[resolu]Positionnement d'un titre à mi hauteur d'un logo

Bonjour,

Pourriez-vous m'indiquer comment centrer mon h1 à mi hauteur du logo ? J'ai essayé padding et margin, mais le texte reste toujours au même endroit...

Merci d'avance.

http://www.princessedunjour.com/nouveau3.htm

html

<div id="page">
                   <div id="logo">
				   <a href="http://www.princessedunjour.com">
                   <img id="logo" src="logo222.gif" alt="Princesse d'un Jour" /></a>
				   <h1 id="titre">BIJOUX ET ACCESSOIRES POUR LE MARIAGE</h1>			 
		           </div>
	 </div>

et ma CSS

body {
margin: 0;
text-align: center;
background-color: #EBEBEB;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
width: 920px;
text-align: left;
background-color: #FFFFFF;
}
div#logo {
height: 61px;
width: 208px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
margin: 5px 0 0 20px;
}
h1 { 
height: 61px;
font-family: Arial, Times, serif;
letter-spacing: 0.3em;
font-size: 65%;
color: #990099;
margin: 10px 0 0 0;
}

Modifié par pp51 (28 Nov 2005 - 10:35)

Bonsoir,

Simplifions, simplifions

<div id="page">
  <h1 id="titre">
    <a href="http://www.princessedunjour.com">
      <img src="logo222.gif" alt="Princesse d'un Jour"[b] style="vertical-align: middle; margin-right: 50px;"[/b] /></a>
      BIJOUX ET ACCESSOIRES POUR LE MARIAGE
  </h1>			 
</div>

attention: vertical-align ne jouera que pour aligner verticalement image et texte placés dans le même élément bloc (ici le <h1>)
Modifié par Laurent Denis (27 Nov 2005 - 18:17)

encore une fois merci !

une question cependant, je croyais que le code html ne devait pas conternir d'éléments type CSS ?

Et donc maintenant si je veux souhaite coller le logo (avec le titre) sur la gauche, j'utilise la fonction margin ?

J'ai un peu de mal à positionner le menu horizontal que je veux à qq pixels plus bas. J'ai suivi ta méthode des margins mais cela ne "bouge" pas.

Bref, j'ai des pbls de positionnements des éléments, avec ou sans div

cf: www.princessedunjour.com/nouveau3.htm

<div id="page">
        <h1 id="titre">
        <a href="http://www.princessedunjour.com">
        <img src="logo222.gif" alt="Princesse d'un Jour" style="vertical-align: middle; margin-right: 50px; horizontal-align: left;" /></a>
        BIJOUX ET ACCESSOIRES POUR LE MARIAGE
        </h1>
		
		<ul id="menu_haut">
        <li><a id="menu1" title="Colliers mariage" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		<li><a id="menu2" title="Bracelets mariage" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		<li><a id="menu3" title="Boucles d'oreilles mariage" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		<li><a id="menu4" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		<li><a id="menu5" title="Tiares mariage" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		<li><a id="menu6" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">CONTACT</a></li>
        <li><a id="menu7" title="Princesse d'un Jour" href="index_eng.htm">ESPACE PRO</a></li>
        </ul> 
</div>

et css:

body {
margin: 0;
text-align: center;
background-color: #EBEBEB;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
width: 920px;
text-align: left;
background-color: #FFFFFF;
}
h1 { 
font-family: Arial, Times, serif;
letter-spacing: 0.3em;
font-size: 65%;
color: #990099;
margin-left: 0;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 5px;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin: 0 10px 15px 10px;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 15px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: left;
}
#menu_haut a:hover {
color: #000000;
}

une idée ?

thanks