Strutturare la pagina con i css

[sitodue]

Ciao a tutti;
premetto che sono niubbissimo dei css... ho appena letto la guida presente qui sul sito e sto provando ad impaginare qualche elemento per prendere dimestichezza...
Mi sono venute in mente un paio di domande tanto per cominciare...

1 - Pensavo di racchiudere tutto il codice del body in un tag div per definire i contorni della pagina prima di iniziare con le varie suddivisioni... è corretto? A tal proposito ha senso definire per questo tag delle dimensioni specifiche (ad esempio 1000px per 600px) all'interno delle quali si svilupperà la pagina? ...è' un buon approccio o conviene che le dimensioni siano definite dalla somma dei vari elementi che metterò nella pagina?
Se l'idea di inserire tutto il codice del body in un tag div, che differenza ci sarà a quel punto tra il tag div e lo stesso tag body? Non potrei usare direttamente body come contenitore main del codice della pagina?

2 - Non mi è molto chiara l'importanza della proprietà float; perchè dovrei preferire impostarla per alcuni elementi, lasciandoli liberi di agganciarsi ad altri elementi, quando invece potrei stabilirne l'esatta posizione all'interno della pagina?

Grazie a chiunque mi darà delucidazioni!

[Klio]

ciao !

1- è buona regola racchiudere tutto in un div contenitore, che a sua volta conterrà dei div figli.
il body è anch'esso un contenitore, ma ti conviene lavorare sui div. il codice sarà più chiaro.

2-dipende quali elementi ti troverai a gestire: è chiaro che se, per esempio, al centro della tua pagina vorrai inserire 3 box allineati (o 3 immagini) la proprietà float sarà indispensabile, piuttosto che usare la proprietà position: absolute.
fatti uno schema di un sito semplice su un foglio. poi piano piano prova a riprodurlo con dreamweaver, per esempio.
potresti cominciare con un layout a dimensioni fisse, con un'intestazione e un footer...
poi pensi: e se volessi aggiungere una colonna a sinistra di 150 pixel ? e di volta in volta aggiungi un elemento css .)

spero di averti aiutato un pochino

[sitodue]

Certo che si! già mi hai chiarito un paio di concetti, grazie mille!
Tornando al tuo esempio delle tre figure al centro della pagina, Come primo approccio mi viene in mente di creare un tag div contenitore e posizionarlo al centro della pagina agendo sui margini o sul padding... al suo interno poi farei le suddivisioni per le varie immagini basandomi sulle dimensioni... perchè invece dici che in quest'esempio la proprietà float sarebbe indispensabile?
Temo di essere ancora troppo ancorato al modello "a tabelle"... non riesco a liberarmi dall'idea di vincolare ogni elemento in una tabella immaginaria :-s

[Klio]

Originariamente inviato da sitodue
Tornando al tuo esempio delle tre figure al centro della pagina, Come primo approccio mi viene in mente di creare un tag div contenitore e posizionarlo al centro della pagina agendo sui margini o sul padding... al suo interno poi farei le suddivisioni per le varie immagini basandomi sulle dimensioni... perchè invece dici che in quest'esempio la proprietà float sarebbe indispensabile?
Temo di essere ancora troppo ancorato al modello "a tabelle"... non riesco a liberarmi dall'idea di vincolare ogni elemento in una tabella immaginaria :-s

bravo, infatti quello che dici è il modo giusto.

guarda qui:

body{ 	
background:#000;
margin:0; 	
padding:0;
}  

#container{ 	
width:972px;  	
min-height:500px; 	
margin:0 auto;  	
font:100% arial;  	
color:#000;  	
background:#fff; 
}   

#testata{  	
min-height:152px;  	
background:#666666; 
}  

#foto{  /*questo è un contenitore*/	
width:876px;  	
margin:163px auto 0; 
}    

#foto1,#foto2,#foto3{  	
width:240px;  	
min-height:240px;  	
border:1px solid #000; /* i bordi contano nel computo delle dimensioni!! */  	
float:left;  	
margin-right:75px; 	
margin-bottom:167px;  	
} 
 
#foto3{ 	
margin-right:0; 	
} 
 
#footer{  	
clear:left;  	
min-height:30px;  	
background:#666; 	
}

<div id="container">
 	<div id="testata"></div>  	
 <div id="foto"> 		
   <div id="foto1"></div> 		
   <div id="foto2"></div> 		
   <div id="foto3"></div> 	
 </div>  	
 <div id="footer"></div> 
</div>

semplice no ?
hai capito come si è arrivati a definire le dimensioni del contenitore #foto ?

[sitodue]

Si, in pratica tu definisci il contenitore "foto" di 876px e lo occupi con le tre foto di 240px + 75px tra una foto e l'altra più 6px totale di bordi delle 3 foto... per me è corretto così, proprio per questo non capisco a cosa serve "float:left" indicato nelle foto :-s
Cosa succede eliminando quella proprietà? Appena torno a casa provo su DW

[Klio]

Originariamente inviato da sitodue
Si, in pratica tu definisci il contenitore "foto" di 876px e lo occupi con le tre foto di 240px + 75px tra una foto e l'altra più 6px totale di bordi delle 3 foto... per me è corretto così, proprio per questo non capisco a cosa serve "float:left" indicato nelle foto :-s
Cosa succede eliminando quella proprietà? Appena torno a casa provo su DW

beh in realtà io ho ragionato al contrario. partendo ipoteticamente da delle foto che misurano tot px e calcolando margini più bordi sono arrivato a definire il contenitore in modo che sia tutto allineato. Inoltre, senza la proprietà float, vedrai che le foto (contenute in un div) si posizioneranno una sotto all'altra. questo perchè il div ha la caratterstica di essere un "blocco" e ogni div si posiziona uno di seguito all'altro in verticale.

aggiungo una cosa. è chiaro che per arrivare al risultato del nostro esempio ci sono pure altri modi. questo a me sembra il più logico, ma ciò non toglie che ci potrebbero essere altre vie.

a presto

[sitodue]

Grazie mille, sei stato gentilissimo; ti chiedo un'ultima cosa (per oggi!) collegata ad un altro 3d che ho aperto, in cui cercavo appunto di allineare diversi <div> e <h1> sulla stessa linea, impostando la proprietà display:inline e che mi hanno aiutato a risolvere appunto facendomi invece impostare la proprietà float:left...
Quindi mi chiedo,
1 - ogni volta che devo allineare elementi di blocco mi basta procedere in questo modo invece che andare a modificare la proprietà display?
2 - in quell'esempio ho un tag img {float:left} e poi un tag <h1> {float:left} sulla stessa riga grazie anche all'aiuto di un div {clear:both} che li tiene allineati; il tag <h1> ha anche la proprietà margin-left:0px in modo da essere adiacente all'immagine, ma se provo ad impostare a 0 anche la proprietà margin-bottom non ottengo nessun risultato e l'unico modo che ho trovato per allinearlo esattamente sulla stessa base dell'immagine è "spingerlo" dall'alto aumentando il margin-top... però non mi sembra molto corretta come soluzione... come mai il margin-bottom non ha effetto?

[Klio]

potresti scrivere il codice qui ? così riesco a capire meglio

[sitodue]

#testa img {float: left;}

#testa h1 {float:left;
                border:solid 2px;
                margin-left:0px;
                margin-bottom:0px;}

.clear {clear: both;}


</head>
<body>

<div id="main">
<div id="testa">
  [img]logo.jpg[/img]
  <h1>Titolo</h1>
  <div class="clear"> </div>
</div> 

<div id="corpo">
    <h1>corpo della pagina</h1>
</div> 

</div> 

</body>
</html>

Questa è la parte di codice incriminata...
La proprietà margin-left:0px del tag h1 funziona correttamente, ossia il testo è adiacente all'immagine, mentre la proprietà margin-bottom non sortisce effetti e il testo risulta a metà altezza rispetto all'immagine, quindi per "abbassare" il testo sulla stessa base dell'immagine devo spingerlo dall'alto utilizzando margin-top...

[Klio]

mmm bella domanda.
date le mie scarse conoscenze non so risponderti.
in effetti dando il margin-top funziona (anche con line-height funziona).

credo che il problema risieda nel fatto che il tag h1 ha dimensioni predefinite che si basano sulla grandezza del carattere. se invece di usare h1 avessi usato un div con dimensioni da te scelte forse avresti possibilità di gestire meglio il testo...

non so se sono stato chiaro, a fine giornata sto fuso

a presto