allineamento verticale immagine e due righe di testo (centrale)

[webmasterone]

Come da oggetto
mi sto sforzando di applicare i CSS e ottenere quello che cerco in questo modo e non con le tabelle

perdonate se la domanda può sembrare sciocca o banale, ma sto cominciando ora con i CSS e alle volte sapere le regole non è sufficiente. E' sempre utile qualcuno che ti suggerisca quando è meglio usarne una piuttosto che un altra.

veniamo al codice

l'html è semplicemente :

<div id="container">
        <div id="header">
                <img  src="images/Om_Tools_Blu_small.png" />
                <p>
                    <h1>OM-TOOLS</h1><br/>
                    <h2>Utilità per OM e aspiranti OM ~ HAM and Future HAM Tools</h2>
                </p>
        </div>


............. etc etc etc ................

e questo il CSS che hop usato (come vedete, ho sia settato margin e padding a 0 per tutti gli elementi, per gestirli singolarmente e usato il trick per considerare padding, margin e border nel width degli elementi.

/* per comprendere margini bordo e padding nel width*/ 
* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}


/* tolgo i margini e il padding a tutto, in modo da settarli poi individualmente */
*{margin: 0; padding: 0;}


html,body{background-color: #336699;}


body{ font-family: "Verdana, Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 76%; text-align: center }


/* setto la larghezza del container e lo stile */
div#container{
    width: 80em;
    margin: 0 auto;
    text-align: left;
    border-left: 2px solid #36c;
    border-right: 2px solid #36c;    
}


div#header{
    background-color: #FFFFFF;
    color: #336699;
    padding:1em;position:relative
}




div#header p{display:inline;vertical-align: middle; margin-left:1em;}
div#header h1{font-family: Century Gothic, sans-serif;display:inline;vertical-align: middle; margin-left:1em;position:absolute;left:10em;top:1.7em}
div#header h2{font-family: Century Gothic, sans-serif;display:inline;vertical-align: middle; margin-left:3em;position:absolute;left:11.7em;top:4.5em}
div#header img{display:inline;vertical-align: middle;}

vorrei che il risultato fosse l'immagine a sinistra, e i due blocchi di testo alla sua destra, centrati verticalmente.

l'unico modo che sono riuscito a trovare è di impostare pa position dell' header relativa, in modo da posizionare poi assolutamente i due blocchi di testo.

si, ho ottenuto quello che volgio, ma secondo me non è la strada giusta

deve esserci un modo più semplice

qualcuno mi suggerisce (e spiega perchè) il come ?

grazie


P.s.
qui anteprima del template (in oggetto) che sto costruendo:

http://www.om-tools.it/V_01/index.php

[Mich_]

Ci sono errori di semantica nel codice HTML.
In questi casi i browser cercano di interpretare al meglio, ma (1) ognuno fa come crede; (2) non e` detto che sia quel che vuoi tu.

Il <p> e` un oggetto di tipo blocco (e deve rimanere, non ha senso farlo diventare inline) che non puo` contenere oggetti di tipo blocco (gli <hX>).

Quello che a te serve e` una struttura del tipo:

<div id="container">
   <div id="header">
      <img src="..." alt="logo OM-Tools" />
      <div>
         <h1>OM-TOOLS</h1>
         <h2>Utilita` per aspiranti ..." </h2>
      </div>
   </div>
      ...
</div>

Poi la formattazione del #header diventa:

...
#container {
  ...
  position: relative;
}
#header {
  padding: 1em;
  margin: 0;
  border: 0:
}
#header img {
  display: block;  /* altrimenti non si puo` posizionarla */
  margin: ZZZpx;      /* se il caso */ 
  width: XXXpx ;       /* e` importante conoscerla */
  float: left;
}
#header div {
  margin-left: YYYpx;  /* YYY deve essere almeno XXX + 2*ZZZ */
  margin-right: ...px;   /* per dare un po' di aria, se il caso */
}
#header h1, #header h2 {
  margin: 0 auto;     /* margini orizzontali automatici per centrare; margini verticali possono essere settati come si vuole */
  font-size: ...;
}

[webmasterone]

ok, mi sembra meglio

un paio di dubbi:

#header h1, #header h2 {  margin: 0 auto;     /* margini orizzontali automatici per centrare; margini verticali possono essere settati come si vuole */
  font-family: Century Gothic, sans-serif;
}

margin 0 auto per averla centrata orizontalmente
a me serve centrata verticalmente (nel DIV Header)


in questo momento ho questo risultato:

http://www.om-tools.it/V_01/index.php

il div+h1 e h2 sono centrati verticalmente nel div header, ma l'immagine è tagliata (finisce in basso sotto al div seguente (navbar)

se io setto un height per il DIV header (considerando che l'img è alta 117 e sull' header ho un padding di 1em) ad esempio di 140px

il div con i due h1+h2 rimane in alto , e non più centrato verticalmente nel div

[Mich_]

Ah non lo avevo capito.

Centrare in verticale non e` semplice come in orizzontale.
Ci sono dei trucchi da poter usare per centrare un oggetto in un altro (vedi tra i "link utili"), ma nel tuo caso e` piu` complesso dato che gli oggetti sono due.
Puoi racchiudere i due oggetti in uno unico (con un margine fisso tra i due) e centrare questo; oppure (dato che conosci l'altezza in px del contenitore, che e` obbligata dall'altezza della immagine) puoi fissare le posizioni vert dei due oggetti mediante margine e posizionamento assoluto.

[webmasterone]

ok, allora (a parte gli errori che avevo fatto con i <p>) era quello che avevo fatto prima, giusto ?


ho modificato così l' #eader div, aggiungendo un margin-top:

#header div {
	margin-top:1.9em;
	margin-left: 250px;  /* YYY deve essere almeno XXX + 2*ZZZ */
	margin-right: 10px;   /* per dare un po' di aria, se il caso */
}

Perfetto, grazie

[Mich_]

ok, allora (a parte gli errori che avevo fatto con i <p>) era quello che avevo fatto prima, giusto ?

Beh errori ce n'erano diversi ...
ad esempio non ha senso dare allo stesso oggetto display:inline; e position:absolute; Un oggetto in posizione assoluta non puo` essere di tipo inline.

E poi hai usato l'unita` em un po' a sproposito.

Se si tratta di dimensionare immagini (o oggetti che contengono principalmente immagini) e` meglio usare i px.
Se si tratta di dimensionare oggetti di testo (o che contengono principalmente testo) e` meglio usare gli em.
Se si tratta di posizionare oggetti in una cornice puo` essere meglio usare le %.

La tua larghezza 80em per il contenitore puo` andar bene in molti browser (soprattutto in quello che usi tu con la tua larghezza di monitor), ma in alcuni casi fara` ridere (se non obblighera` ad usare lo scroll orizzontale)

In questa logica, per l'altezza del blocco ha piu` senso usare i px (l'altezza e` determinata dal logo). Invece per la larghezza del tutto, forse la % e` piu` adatta (oppure definire html e body larghi 100% e poi giocare con margini/padding)

[webmasterone]

grazie per i suggerimenti, non si finisce mai di imparare