28220 sujets

CSS et mise en forme, CSS3

salut.
ce sont tes positions absolute et relative qui provoquent ce decalage .
utilise plutot les float que les position
salut jpl949,

As tu un exemple avec les float ? je ne connais pas encore cette fontion, je pensais qu'il fallait utiliser absolute et relative pour positionner les div ?

Merci
les position c'est embetant a regler a cause des delative et absolute qui'il faut calculer sur les div parents par moments et sur le body a d'autres.
pour les float c'est plus simple

body
{width:80%;
margin-right:auto;
margin-left:auto;
}
#divtonimage
{ width:350px;
height:tahauteur;
float-left;}
#lecorps
'width:talargeur;
height:tahauteur;
margin-left: la dimension du div#tonimage +5 a10px selon tes gouts;
}
oui mais ouille ouille ouille l'imbrication de tes div !
essaie plutot quelque chose comme ca:
<div id="page">
<div id="logo">
<a href="http://www.princessedunjour.com/">
<img id="logo" src="new_files/logo.gif" alt="Princesse d'un Jour"></a></div>
<div id="nav">
<ul id="menu_haut">
<li><a id="menu1" title="Colliers mariage" href="http://www.princessedunjour.com/accessoires-colliers-mariage.htm">ACCUEIL</a> | </li>
		<li><a id="menu2" title="Bracelets mariage" href="http://www.princessedunjour.com/accessoires-mariage-bracelets.htm">COLLECTIONS</a> | </li>
		<li><a id="menu3" title="Pics à cheveux mariage" href="http://www.princessedunjour.com/accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a> | </li>
		<li><a id="menu4" title="Boucles d'oreilles mariage" href="http://www.princessedunjour.com/accessoires-boucles-doreilles.htm">DESIGN</a> | </li>
		<li><a id="menu5" title="Tiares mariage" href="http://www.princessedunjour.com/accessoires-mariage-tiares.htm">A PROPOS</a> | </li>
        <li><a id="menu6" title="Princesse d'un Jour" href="http://www.princessedunjour.com/index_eng.htm">CONTACT</a> | </li>
		<li><a id="menu6" title="Princesse d'un Jour" href="http://www.princessedunjour.com/index_eng.htm">ESPACE PRO</a></li>
</ul>
</div>

<div id="photo_home"><img src="new_files/Fleur%2520de%2520Cristal2.jpg" alt="Princesse d'un Jour" id="fleurdecristal"></div>

<div id="titre"><h1>BIJOUX ET ACCESSOIRES POUR LE MARIAGE</h1></div>

<div id="contenu">
<h2>Princesse d'un Jour vous invite à découvrir sa toute nouvelle collection de bijoux et accessoires pour le mariage.</h2>
<p>Venez découvrir la douceur et la délicatesse des trésors Princesse
d'un Jour entièrement confectionnés à la main et sur mesure. Des
parures créées spécialement pour la mariée.</p>
<p>Nos bijoux pour le mariage sont garnis de cristal Swarovski et des fines perles de bohème.</p>
</div>
</div>

et en css
body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #DEDEDE;
}
img {
border-width: 0;
border-style: none;
}
div#page {
width: 80%;
height: 600px;
overflow: hidden;
margin: auto; 
background-color: #FFFFFF;	
}
div#logo {
padding:10px 0 0 10px;
}
div#nav {
width: 850px;
clear:both;
height: 15px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
padding-bottom:50px;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
margin: 5px 0;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 8px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: center;
}
#menu_haut a:hover {
color: #000000;
}
div#photo_home {
float:left;
padding:0 20px 20px 100px;
height: 375px;
width: 250px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
}
div#titre {
float:left;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
text-align: center;
}

div#contenu {
float:left;
padding:20px 20px 0 20px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
}
h1 {
color:#999999;
font-family: Arial, Times, serif;
font-size: 11px;
text-align: center;
letter-spacing: 0.2em;
}
p {
color: #666666;
font-family: Tahoma, Times, serif;
font-size: 12px;
}
Bonjour,

J'ai retesté avec les float ici www.princessedunjour.com avec ma CSS www.princessedunjour.com

Le résultat sur ie est convenable, même si j'aurais aimé que le logo soit placé à qq pixel du haut et gauche de page. Si qq'un a une idée...

Par contre sous firefox, le menu horizontal n'est pas du tout centré (verticalement) et j'ai un bandeau gris en haut.

Pourquoi ces différences entre les 2 navigateurs ? Y a til une astuce ?

Merci
Modifié par pp51 (15 Jan 2009 - 09:03)