logo header

[freddie1978]

Vi prego, sarà una boiata ma non ci riesco e sto perdendo la speranza di trovare una soluzione.
Questo è l'header html della mia pagina :

<header>
<div id="header">
<img src="/images/logo.png" alt="logo" width="200" height="200" >
<h1>Multichannel Alerting System - Centro Funzionale Multirischi</h1>
</div>
</header> <!-- end of header bar -->

e questo è il css. Per favore mi spiegate come posizionare il logo a sinistra e la scritta a seguire ?
Sto studiando css e questo sarà anche banale ma non riesco proprio a capirlo.
grazie a chi vorrà aiutarmi :-)

#header
{
background-image: url(../images/header_bg.png);
position: relative;
width: 100%;
overflow: auto;
}


#header img{
background-image: url(../images/logo.png);
}


#header h1 {
position: relative;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.1em;
color: #446432;
font-family: serif;
font-style: oblique;
}

[danieleb74]

Ciao, hai alcune soluzioni possibili, basta che non assegni un immagine di sfondo ad un'immagine!
Ti indico alcune soluzioni lasciando il codice così com'è o quasi, sta a te studiarne l'effettivo uso e resa.

Soluzione 1:
Assegni un float:left sia all'immagine che all'H1. Ad entrambi devi dare una width esplicita. Devi inoltre mettere un elemento (es: un DIV) con clear:left dopo l'H1
In questo modo si posizioneranno uno vicino all'altro a partire dal margine sinistro.

Soluzione 2:
Assegni all' #header una height esplicita e un position:relative. Posizioni l'immagine e l'H1 con position:absolute e li metti dove vuoi...al pixel!

Soluzione 3:
Rendi entrambi gli elementi display:inline-block

La scelta dipende da tanti altri piccoli fattori legati alla grafica, col tempo imparerai a scegliere per il meglio, funzionano però tutti e 3.
Buon lavoro!