Allineare img a sx di h1 - Mi sto confondendo...

[ricman]

Spero sia stanchezza o un lapsus...
Non mi si allinea una foto ad un H1.

<div id="header_1">
  [img]/img/logo.png[/img]
  <h1>tanti saluti</h1>
</div>

Vorrei avere la foto che tocca la Sx dell'header_1 e il testo nell'H1 tutto a Dx (sempre relativamente all'header_1)

| |FOTO|                     |Tanti  saluti| |

[ricman]

up

[Mich_]

Sara` proprio la stanchezza ...
Ti sei dimenticato di scrivere il CSS relativo e ilcontesto incui e` inserito il tuo div, per cui non sappiamo cosa hai fatto, e non possiamo correggere.

In linea di massima devi usare i float (uno a sin, l'altro a dx), ma occorre forse anche un width nel div.

[ricman]

Originariamente inviato da Mich_
Ti sei dimenticato di scrivere il CSS relativo e ilcontesto incui e` inserito il tuo div

Allora è una cosa che ho appena iniziato a scrivere, quindi volevo scegliere la soluzione migliore.
Per ora sono a questo punto:

HTML

<div id="main">
   <div id="header_1">
      [img]/img/logo.png[/img]
      <h1>tanti saluti</h1>
   </div>

<div id="header_2">HEAD 2</div>
<div id="header_3">HEAD 3</div>
... ...


CSS

#main {
   width: 760px;
   text-align: left;
   margin: 0 auto;
}
#header_1 {
   background-color: #CCCC00;
}
  #header_1 img {}
  #header_1 h1 {
     font-size: 18px;
     background-color: #0099FF;
  }
#header_2 {
   background-color: #CC9900;
   height: 40px;
}

Il risultato è questo dove l'header_1 ha lo sfondo verdognolo e la foto e quella giallognola e l'h1 è quello azzurro.


Mentre vorrei disporli in questo modo:


Ho fatto delle prove ma mi sfugge qualcosa... se ad esempio metto float:left l'h1 questo mi va sopra l'header_2!

[Mich_]

Ora e` piu` chiaro. Effettivamente ti mancano i float. Prova cosi`:

#header_1 {
   background-color: #CC0;
   width: 100%;
}
#header_1 img {
   float: left;
}
#header_1 h1 {
   float: left;
   font-size: 18px;  /* sarebbe meglio usare una misura relativa, ad esempio 150% */
   background-color: #09F;
}
#header_2 {
   clear: both;
   background-color: #C90;
   height: 40px;
}

PS: occhio ad usare il carattere underscore negli id dei tag: a qualche browser non piace. Meglio se usi #header1, #header2, ...

PS: potrebbe essere necessario inserire nel #header_1 h1 anche margin: auto 0 0 0;

[ricman]

Originariamente inviato da Mich_
PS: occhio ad usare il carattere underscore negli id dei tag: a qualche browser non piace. Meglio se usi #header1, #header2, ...

Ok, grazie...

Originariamente inviato da Mich_
PS: potrebbe essere necessario inserire nel #header_1 h1 anche margin: auto 0 0 0;

Alludi al fatto che l'h1, anzichè essere allineato in basso, è allineato in alto con la foto?
Col "margin: auto 0 0 0;" non succede niente... mi sa che dovrò dargli una misura in px...

[Mich_]

Col "margin: auto 0 0 0;" non succede niente... mi sa che dovrò dargli una misura in px...

La misura in px e` pericolosa: infatti non puoi conoscere la dimensione del testo (i browser hanno la facolta` di forzare una misura diversa).

Il margin dovrebbe essere corretto per i browser standard. Invece in IE dovrebbe funzionare vertical-align: bottom, oppure vertical-align: baseline da inserire pero` nel blocco che contiene il tuo <h1> (credo, per analogia con il text-align).

In alternativa sia al margin che al vertical-align puoi provare ad inserire bottom:0; nel blocco <h1>.

[ricman]

Originariamente inviato da Mich_
La misura in px e` pericolosa: infatti non puoi conoscere la dimensione del testo (i browser hanno la facolta` di forzare una misura diversa).

Mi puoi consigliare un "trattato" sui testi e le misure?
Ancora non mi è chiaro come gestirli al meglio. Per abitudine uso sempre i px ma a quanto pare c'è di meglio... ad esempio tu mi suggerisci la percentuale (150%)... percentuale rispetto a cosa?
(chiedo venia...)

[Mich_]

Il "trattato" che cerchi e` il solito tutorial CSS: quello di HTML.it mi sembra fatto bene, ma ce ne sono altri, sia cartacei che in rete. Alcuni link sono riportati nei "link utili" di questo forum.

Poi se hai problemi specifici chiedi pure: c'e sempre qualcuno disposto a dare una mano.