[CSS] Autodimensionamento body....ma come?

[medi]

Ciao, ho un piccolo/grosso problema con un sito per un amico. Essenzialemente è costituito da due colonne una sinistra per un menu di navigazione e da uno centrale per i contenuti e il footer.

i due div che costituiscono il menu e il contenuto sono entrambi impostati con float:left e si autodimensionano nella larghezza.Su richiesta volevo rendere il sito in grado di "reggere" a variazioni di dimensione tramite lo zoom dei browsers e tramite lo script js per il dimensionamento dei font.

Ma succede un piccolo problema....arrivati ad un certo punto (anche senza ingrandimenti ma semplicemente per l'estensione di alcune tabelle nei contenuti) la somma dei width e dei margini è maggiore di quella del body il che provoca lo spostamento del div "contenuti" sotto quello del menu.Non so se ho reso bene il problema. Per vederlo basta creare una pagina con due div con float:left e impostare le dimensioni in modo che la somma superi il 100%....vedrete la stessa cosa che accade a me.

Mi sapete suggerire un modo per risolvere? non c'è la possibilità di autodimensionare il body in modo da adattarsi in larghezza anche al difuori della parte visibile della pagina o qualcosa che mi dia lo stesso effetto? ho fatto diversi tentativi ma non ho trovato ancora una soluzione...

grazie

[m.distrutti]

il body non puoi ridimensionarlo perchè e' diciamo il super contenitore(i due div sono dentro il body giusto per intenderci)

su HTML.it cmq ci sono spiegazioni molto dettagliate sul come realizzare questi tipi di layout , dacci un occhiata

http://html.it/guide/esempi/layout_css/esempio20c.html

prima di darti qualche consiglio potresti postarmi un immaginne perche non so se ho capito bene il tuo problema:doh:

[medi]

qualche mese fa avevo studiato i css proprio da html.it e credo che più o meno sia in linea con quel layout (con le dovute differenze). Comnque domani per non dire di non aver provato faccio un test con la loro pagina :fagiano:

lo so a spiegarlo ho fatto pena...comunque ecco due screen (per far comparire l'effetto ho impostato io le dimensioni dei div cosi da simulare per esempio la presenza di una tabella "troppo larga")

cosi è come vorrei che mi comparisse sempre (ovviamente accettando un eventuale allargamento verso destra)
http://img517.imageshack.us/img517/1314/esempio1un0.th.jpg (http://img517.imageshack.us/my.php?image=esempio1un0.jpg)

ecco cosa succede però aumentando la dimensione del div contentui (si ottiene lo stesso risultato aumentando anche i margini o il menu di sx)

http://img120.imageshack.us/img120/3503/esempio2zx9.th.jpg (http://img120.imageshack.us/my.php?image=esempio2zx9.jpg)

da quel che sono riuscito a capire nella mia ignoranza....nel caso in cui la somma delle dimensioni e dei margini superi quella che è la larghezza della finestra (e quindi del body), non trovando più spazio laterale per allargarsi il div contenuti si sposta in basso,come se facesse un "a capo".
le immagini sono state prese usando firefox 2.0.0.12....ma su IE6 si ha lo stesso problema.

che sarà mai :mbe:

grazie

[m.distrutti]

oddio si ora forse credo di aver capito, viene ricercato un modo per visualizzare gli spazi

sto problema e' venuto anche a me adesso non ricordo esattamente come risolverlo ma se metti display:inline; sia al div contenuti che al div menu dovresti tenerli allineati

in qualsiasi caso se continuasse a darti problemi prova a impostare per default l'altezza del div menu abbastanza alta per il resto se hai ancora difficolta potrei provare anche io a farlo,pero vabbe dai il bello dei css e' che devi sbatterci la testa anche quando li conosci rotfl

cmq non era complicata la cosa da sistemare

PS:ricordo molto bene che questo problema e' affrontato nel sito HTML.it cmq

[medi]

sto problema e' venuto anche a me adesso non ricordo esattamente come risolverlo ma se metti display:inline; sia al div contenuti che al div menu dovresti tenerli allineati


Da un lato sono sollevato...almeno non ho la solita sfiga di avere problemi che nessun altro ha o ha avuto :D
Avevo già provato con display:inline...ma se mantengo anche il float:left il problema rimane...se elmino float:left mi crea un piccolo "box" sopra e uno sotto alla scritta, e credo che purtroppo il browser abbia ragione dato che gli elementi inline non possono contenere altro che semplice testo

in qualsiasi caso se continuasse a darti problemi prova a impostare per default l'altezza del div menu abbastanza alta
:muro: già provato anche questo e anche con i margin-bottom...anche mettendo l'altezza del div di sinistra al 100% mi porta il div contenuti ugualmente al di sotto

pero vabbe dai il bello dei css e' che devi sbatterci la testa anche quando li conosci rotfl

cmq non era complicata la cosa da sistemare
Hai ragione ma per quanto ci ho sbattuto la testa prima (creare prima il layout, eliminare tutte le differenze o almeno limitarle tra i browsers...non sono d'accordo nemmeno sulle unità di misura) e per quanto l'ho sbattuta ora...non ho più uno spazio libero per nuovi bernoccoli :sofico: e il cervello comincia a risentirne

Prima di postare avevo fatto lunghe ricerche su google e su vari siti che trattano l'argomento...eppure nn ho trovato niente di particolarmente utile...evidentemente servono altre chiavi di ricerca oltre a quelle da me usate oppure mi sono proprio sfuggite. Riverificherò ;)

Probabilmente hai ragione come soluzione non sarà complicata...però quasi quasi vedo più vicina l'idea di usare come layout un immagine con Photoshop eventualmente modificata tramite php, non sarebbe male :sofico:
di certo non avrei a che fare con dei div ribelli :cry: e poi preferisco di gran lunga la programmazione allo styling :D
Grazie dell'aiuto

[medi]

niente....non sono ancora riuscito a trovare la soluzione :cry:

[m.distrutti]

ho scaricato quersto layout da html.it e adattato con menu a sinistra e contenuti a destra come da te richiesto mi sembra

prova questo un attimo
<div id="container">

<div id="header">
<h1>Layout di html.it</h1>
</div>
<div id="content">
Prova di contenuti
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="navigation">
<ul>
<li><a id="activelink" href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>

<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
<li><a href="#">MENU6</a></li>
<li><a href="#">MENU7</a></li>
</ul>

</div>
<div id="footer">FOOTER</div>
</div>

css :

/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}

body{font-family: arial,sans-serif;font-size: 76%;text-align: center}

div#container{
position:relative; width: 100%;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c;}

/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{position:absolute;top: 80px;left: 0;width: 13em}
div#content{margin-left: 13em;padding: 1em}
div#footer{text-align:center; padding: 0.5em;
background-color: #69c; color: #FFF}

/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

nel caso il testo dovesse eccedere viene riportato a capo
giusto per capire un attimo, cmq c'e' una proprieta css per i box che consente la visualizzazione del contenuto eccedente tramite barre di scorrimento applicate verticalmente od orizzontalmente

se devi implementare una tabella molto grande credo sia normale che ti dia errori in visualizzazione dato che la tabella non puo tornare a capo come un testo :D e venga messa sotto il div menu per visualizzarla