inline - block

**sitodue** · 19-06-2012, 11:57

Ciao a tutti;
sto facendo prime prove di impaginazione tramite css e mi sono impantanato in questa situazione:

Ho definito degli identificatori <div> per dividere le varie sezioni della pagina e attualmente ho:

codice:

<div id="main">

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

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

</div> //fine main

Le relative regole indicano solo dimensione e colore dei bordi in modo da rendermi conto dell'impaginazione;
Ora poichè se ho capito bene, il tag <h1> è di tipo "block", il titolo mi compare sotto l'immagine; volendoli allineare sulla stessa riga, ho racchiuso il codice <h1>Titolo</h1> in un ulteriore div id=titolo a cui ho assegnato la proprietà display = inline sperando così di allineare il titolo all'immagine... ma ovviamente non funge...
In realtà non sono sicuro se debba essere il div=titolo, il div=testa o direttamente #testa h1 ad avere la proprietà display inline....
Inoltre mi chiedo, quest'approccio di racchiudere le varie sezioni della pagina in altrettanti tag div, è corretto?
Grazie e a tutti

**FedericoC** · 19-06-2012, 12:37

Puoi sempre modificare h1 facendolo diventare in-line, almeno risparmi la creazione di un nuovo div, ed ottieni il solito risultato...

(non ho avuto tempo di fare una prova, ma dovrebbe andare)

**sitodue** · 19-06-2012, 14:05

Ciao, grazie per la risposta.
Così funziona correttamente, ma adesso nasce un altro problema, ossia se il testo all'interno dei tag <h1> è molto, crea una nuova linea che parte dal margine sinistro della pagina, quindi passando anche sotto l'immagine, mentre io vorrei che tutto il testo sia in un riquadro allineato alla destra dell'immagine... Quello che succede è per via del tag h1, o qualunque tag si sarebbe comportato allo stesso modo? Lo risolvo impostando un margine sinistro di h1 per farlo combaciare all'immagine?

**carlomarangoni** · 19-06-2012, 14:21

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#testa img, #testa h1 {
	float: left;
}
.clear {
	clear: both;
}
</style>
</head>

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

Ti ho corretto anche i commenti perchè la sintassi non era la giusta

**sitodue** · 19-06-2012, 15:18

Grazie Carlo! con mio sommo sgomento funziona correttamente (...nel senso che non mi è del tutto chiaro!)
Ho un po' di domande per cercare di capirci qualcosa....

1-quindi per trasformare un elemento blockin un elemento inline, non occorre utilizzare la proprietà dispaly ma basta settarlo float rispetto all'elemento a cui voglio affiancarlo?
2-perchè hai impostato come float anche l'immagine?
3-cosa fa esattamente la proprietà "clear:both" (anche se vedo che è fondamentale in quanto togliendola mi scompagina tutti gli elementi...) ?
4-me l'hai fatta inserire in una classe in modo da poterla riutilizzare? Avrei potuto impostarla direttamente in #testa div{clear:both} senza dichiarare una classe?
5-a cosa serve il <div> su cui me l'hai inserita? sembra un elemento fittizio...

**carlomarangoni** · 19-06-2012, 16:07

Originariamente inviato da sitodue
1-quindi per trasformare un elemento blockin un elemento inline, non occorre utilizzare la proprietà dispaly ma basta settarlo float rispetto all'elemento a cui voglio affiancarlo?

Non si deve effettuare nessuna conversione da block a inline, ma solo allineare gli elementi è float a quello che ci vuole

2-perchè hai impostato come float anche l'immagine?

Per un corretto funzionamento bisogna impostare il float a tutti gli elementi da allineare anche l'ultimo

3-cosa fa esattamente la proprietà "clear:both" (anche se vedo che è fondamentale in quanto togliendola mi scompagina tutti gli elementi...) ?

Il clearing è fondamentale per il corretto flusso della pagina esso toglie l'effetto float agli elementi succesivi all'allineamento con float

4-me l'hai fatta inserire in una classe in modo da poterla riutilizzare? Avrei potuto impostarla direttamente in #testa div{clear:both} senza dichiarare una classe?

No non andrebbe bene impostato in #testa vuole messa esattamente alla fine degli elemento float, potrebbe anche essere un ID ma io limposto di abitudine come una classe per poterla riutilizzare in seguito

5-a cosa serve il <div> su cui me l'hai inserita? sembra un elemento fittizio...

Infatti è solo un elemento fittizio che serve a fare il clearing alla fine del float, ma come detto è fondamentale

**sitodue** · 19-06-2012, 16:14

Grazie 1000, alla prossima

Discussione: inline - block

Strumenti discussione

Ricerca discussione

Visualizza

inline - block

Permessi di invio