Strutturare la pagina con i css

scegli un altro forum

Pagine (2): [ 1 2 > ]

Indietro Ricarica Avanti

Autore

Discussione

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ:

MSN:

Skype:

[Principiante CSS]

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!

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 09:26

Clicca qui per inviare all'utente sitodue un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente sitodue

Aggiungi l'utente sitodue alla tua lista degli utenti amici

Klio
Utente di HTML.it

Registrato il: Oct 2000

Provenienza:

Messaggi: 110

ICQ :

MSN :

Skype :

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

__________________
! CHE DIO VE FURMINI !

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 10:46

Clicca qui per inviare all'utente Klio un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente Klio

Aggiungi l'utente Klio alla tua lista degli utenti amici

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

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

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 11:05

Klio
Utente di HTML.it

Registrato il: Oct 2000

Provenienza:

Messaggi: 110

ICQ :

MSN :

Skype :

Citazione:

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:
codice:

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; 	
}

codice:

<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 ?

__________________
! CHE DIO VE FURMINI !

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 11:56

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

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

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 12:57

Klio
Utente di HTML.it

Registrato il: Oct 2000

Provenienza:

Messaggi: 110

ICQ :

MSN :

Skype :

Citazione:

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

__________________
! CHE DIO VE FURMINI !

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 14:10

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

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?

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 15:01

Klio
Utente di HTML.it

Registrato il: Oct 2000

Provenienza:

Messaggi: 110

ICQ :

MSN :

Skype :

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

__________________
! CHE DIO VE FURMINI !

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 16:25

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

codice:

#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 src="logo.jpg"/>
  <h1>Titolo</h1>
  <div class="clear"> </div>
</div> <!--fine testa -->

<div id="corpo">
    <h1>corpo della pagina</h1>
</div> <!--fine corpo -->

</div> <!--fine main -->

</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...

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 16:34

Klio
Utente di HTML.it

Registrato il: Oct 2000

Provenienza:

Messaggi: 110

ICQ :

MSN :

Skype :

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

__________________
! CHE DIO VE FURMINI !

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 17:53

ResianTaxidrive
Moderatrice di CSS

Registrato il: Oct 2007

Provenienza: Udine

Messaggi: 2419

ICQ :

MSN :

Skype :

Il margin-bottom sposta verso l'alto un elemento rispetto alla sua naturale posizione. Se tu vuoi abbassare un elemento é chiaro che non puó essere il margin-bottom la proprietà che serve a te; devi avvalerti del margin-top.

Segnala ad un moderatore | IP: Collegato | Permalink

19-06-2012 23:47

Clicca qui per inviare all'utente ResianTaxidrive un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente ResianTaxidrive

Aggiungi l'utente ResianTaxidrive alla tua lista degli utenti amici

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

Ciao, grazie per la risposta...
Quindi devo dedurre che la posizione iniziale del tag <h1> (che nel frattempo ho sostituito con un <div> senza ottenere nessun miglioramento) è a metà altezza rispetto all'elemento adiacente quand'è settato come "float:left"?
Il problema di agire sul margin-top è che se il testo all'interno del tag diventa più breve, ad esempio da 2 a 1 riga, si disallineerà comunque; io vorrei ancorarlo sulla stessa linea di base dell'immagine adiacente... come posso ottenere quest'effetto? A cosa serve "line-height" di cui parlava Klio?

Segnala ad un moderatore | IP: Collegato | Permalink

20-06-2012 11:13

ResianTaxidrive
Moderatrice di CSS

Registrato il: Oct 2007

Provenienza: Udine

Messaggi: 2419

ICQ :

MSN :

Skype :

Se assegni uno sfondo colorato al tuo h1 vedrai la sua dimensione. Probabilmente l'immagine e l'h1 sono allineati a partire dall'alto e h1 ha un margine.

Puoi fare una cosa del genere

codice:

<div style="position:relative; float:left">
	<div style="width:200px;height:200px; background-color:#f00; float:left">anzichè il div metti la tua immagine</div>
	<h1 style="float:left; position:absolute;bottom:0;left:200px; margin-bottom:-10px; width:200px">Metti il tuo testo</h1>
	<div style="clear:both; "></div>
</div>

Segnala ad un moderatore | IP: Collegato | Permalink

21-06-2012 11:55

sitodue
Utente di HTML.it

Registrato il: Sep 2011

Provenienza:

Messaggi: 306

ICQ :

MSN :

Skype :

Uhm... dunque ho fatto un po' di prove ma non mi è molto chiaro il meccanismo...
h1 ha un margine (DW me lo mostra in giallino) ma anche portandolo a zero resta allineato in alto (nel caso di un div) o al centro (nel caso di un h1);
Il tuo esempio funziona ma se l'immagine cambia dinamicamente, il testo non le sarà più adiacente... ho quindi provato ad eliminare i tag position absolute e relative dal contenitore e dal testo e a quel punto h1 è si allineato perfettamente all'immagine senza bisogno di specificare "left:200px" ma la proprietà "bottom=0" smette di funzionare, come nel codice che ho postato io, e il testo è nuovamente allineato all'altezza del margine superiore e non più su quello inferiore :-s

Segnala ad un moderatore | IP: Collegato | Permalink

21-06-2012 13:49

ResianTaxidrive
Moderatrice di CSS

Registrato il: Oct 2007

Provenienza: Udine

Messaggi: 2419

ICQ :

MSN :

Skype :

i valori top, left, bottom, right funzionano solo se l'oggetto in questione ha un posizionamento diverso da static (relative, absolute);

Potresti assegnare una larghezza al div esterno e assegnare ad h1, (anzichè left:200px; ), right:0;

L'iinsieme dell'immagine e dell'h1 possono avere le dimensioni più disparate o esiste comunque una larghezza di massima? Nel secondo caso prova a fare come ti ho detto due righe sopra e vedi se le varie casistiche ti soddisfano (probabilmente il testo sarà più o meno discostato rispetto all'immagine)

Nel primo caso dovresti andare a calcolare la larghezza della tua immagine con tecniche di scripting e di conseguenza, sempre con le medesime tecniche, assegnare la regola css opportuna.

E' possibile vedere una immagine di quello che vuoi fare?

Segnala ad un moderatore | IP: Collegato | Permalink

25-06-2012 16:51

Tutte le ore sono con fuso orario CET. Ora sono le 15:52.

Pagine (2): [ 1 2 > ]

Ultima discussione Prossima discussione

HTML.it forumLato clientCSSStrutturare la pagina con i css

Versione per la stampa |

Invia il thread via email |

Ricevi aggiornamenti sul thread |

Scarica il thread

ciao Unregistered

HTML.it forumLato clientCSSStrutturare la pagina con i css

Strutturare la pagina con i css

HTML.it forumLato clientCSSStrutturare la pagina con i css

Cerchi un argomento specifico e hai fretta? Usa il motore di ricerca