28220 sujets

CSS et mise en forme, CSS3

[résolu] Positionnement du h1

Bonjour à tous,

Voici ma page: http://www.princessedunjour.com/collections-bijoux-mariage.htm

J'essaye de positionner mon h1 par rapport au logo: je souhaite qu'il se positionne à 75px par rapport à la hauteur du logo.

Je n'y arrive pas.... si vous avez des idées ??

mon code

<div id="page">
        <div id="header">
		<a href="http://www.princessedunjour.com">
        <img src="/bandeau%20logo.png" alt="Princesse d'un Jour" width="342" height="100" title="Princesse d'un Jour" /></a>
        <h1>
		BIJOUX ET ACCESSOIRES POUR LE MARIAGE
        </h1>
		</div>
		<ul id="menu_haut">
        <li><a id="menu1" title="Accueil" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		<li><a id="menu3" title="Design" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		<li><a id="menu4" title="Points de vente" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		<li><a id="menu5" title="A propos" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
		<li><a id="menu7" title= "Espace Pro" href="#">ESPACE PRO</a></li>
		</ul> 
  <div id="blocmenugauche">	
	<ul id="menu_gauche">
	<li><a id="menugauche" title="Toute la collection" href="#">TOUTE LA COLLECTION</a></li>
	<li><a title="Perles de rocaille" href="#">PERLES DE ROCAILLE</a></li>
	<li><a title="Cristal Swarovki" href="#">CRISTAL SWAROVSKI</a></li>
	<li><a title="Perles de Bohème" href="#">PERLES DE BOHEME</a></li>
	<li><a title="Fleurs de soie" href="#">FLEURS DE SOIE</a></li>
	<li><a title="Perles nacrées" href="#">PERLES NACREES</a></li>
	<li><a title="Guipure brodée" href="#">GUIPURE BRODEE</a></li>
	</ul>
	<div>
	<a href="#" title="Collection couleurs" id="couleurs">COLLECTION COULEURS</a>
	</div>
  </div>
	<div id="photo_eve">
	<a href="http://www.princessedunjour.com"> <img src="/Evetest.jpg" title="Perles de rocaille" alt="Perles de rocaille"/></a>
	<a href="#" title="Perles de rocaille" id="perles_de_rocaille">Perles de rocaille</a>
  </div>
	<div id="photo_cristal">
	<a href="http://www.princessedunjour.com"> <img src="/Cristaltest.jpg" title="Cristal Swarovski" alt="Cristal Swarovski"/></a>
	<a href="#" title="Cristal Swarovski" id="cristal_swarovski">Cristal Swarovski</a>
    </div>
	<div id="photo_cleopatre">
	<a href="http://www.princessedunjour.com"> <img src="/cleopatre-blanc-test.jpg" title="Perles de Bohème" alt="Perles de Bohème"/></a>
	<a href="#" title="Perles de Bohème" id="perles_boheme">Perles de Bohème</a>
    </div>
	<div id="photo_camelia_tissu">
	<a href="http://www.princessedunjour.com"> <img src="/camelia-tissu-test.jpg" title="Fleurs de soie" alt="Fleurs de soie"/></a>
	<a href="#" title="Fleurs de soie" id="fleurs_de_soie">Fleurs de soie</a>
    </div>
	<div id="photo_estella">
	<a href="http://www.princessedunjour.com"> <img src="/estella-test.jpg" title="Perles nacrées" alt="Perles nacrées"/></a>
	<a href="#" title="Perles nacrées" id="perles_nacrees">Perles nacrées</a>
    </div>
	<div id="photo_guipure">
	<a href="http://www.princessedunjour.com"> <img src="/Guipure-blanc-test.jpg" title="Guipure brodée" alt="Guipure brodée"/></a>
	<a href="#" title="Guipure brodée" id="guipure_brodee">Guipure brodée</a>
    </div>
	<div id="footer">
			<p id="copyright">Copyright © 2005 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>		 
    </div>
</div>	                           
</body>


et une partie de ma CSS

body {
margin: 0;
text-align: center;
background: url(/Baggrund_flosset.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 800px;
text-align: left;
}
#header {
margin-left: auto;
margin-right: auto;
width: 800px;
}
h1 { 
display: inline;
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
}

Modifié par pp51 (05 Jan 2006 - 16:38)
Bonjour

essaye peut etre ca :

#header {width: 400px;}

h1 { 
margin:40px 0 0 7px;
display: inline;
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
position:absolute;}


Sous Firefox, ca rend pas mal, à tester sous les autres navigateurs .. (si j'ai bien compris ce que tu voulais faire).

Thierry
Bonjour,

J'ai essayé la methode ci-dessus mais sans succès.

Pour être plus clair, je souhaite que mon h1 remonte de 25px vers le haut.

qq'un sait comment faire ?

Merci d'avance.

Smiley cligne
Salut,

Vite fait, c'est peut etre pas la meilleur solution.

h1 { 
margin-top:-50px; /* A modifier pour avoir le positionnement voulu */
margin-left:350px;
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
}
merci nikos, ça fonctionne.

sous ff, tout est ok, par contre sous ie, mon menu horizontal est maintenant "poussé" vers le bas.

Si tu as une astuce pour que l'affichage sous ie soit identique à celui de ff ??

nouveau code css

body {
margin: 0;
text-align: center;
background: url(/Baggrund_flosset.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 800px;
text-align: left;
}
#header {
margin-left: auto;
margin-right: auto;
width: 800px;
}
h1 { 
margin-top:-50px;
margin-left:350px;
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
padding: 0 0 0 0;
}
ul#menu_haut {
padding: 0px;
letter-spacing: 2px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
width: 750px;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
(body {
margin: 0;
text-align: center;
background: url(/Baggrund_flosset.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 800px;
text-align: left;
}
#header {
margin-left: auto;
margin-right: auto;
width: 800px;
}
h1 { 
margin-top:-50px;
margin-left:350px;
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
padding: 0 0 0 0;
}
ul#menu_haut {
padding: 0px;
letter-spacing: 2px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
width: 750px;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
Ca devrait peut etre aller avec ca :

#header {
margin-left: auto;
margin-right: auto;
width: 800px;
height:100px;
}
#logo {
float:left;
}
h1 { 
float:left;
margin-top:50px; /* Ajuster ici */
font-family: Arial, Times, serif;
letter-spacing: 4px;
font-size: 70%;
color: #666666;
padding: 0 0 0 0;
}
ul#menu_haut {
padding: 0px;
letter-spacing: 2px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
text-align: left;
width: 750px;
}
Salut,
en fait cétait normal que les marge verticales de ton titres n'avaient aucunes influence sur sob positionnement vertical puisque tu avais mis display:inline
Les éléments de type en ligne ne prennent pas en compte les marges verticales, et les with/height mais par contre tu px utiliser les propriété line-height et vertical-align pour cela.
Il aurait fallu que tu mette ton image en float:left et le H1 serait venu se positionné automatiquement a droite de ton logo.

La theorie est aussi importante que la pratique en CSS.
Modifié par Hermann (05 Jan 2006 - 14:47)
merci à tous les 2 pour vos conseils, j'arrive maintenant à qq chose qui ressemble à un site web Smiley lol
Sujet clos
Aller à