18010 sujets

Questions générales et questions de débutants

Probleme d'alignement div

Bonjour,

J'ai un problème d'alignement des mes div.
Je souhaiterais centrer mes div mais ça ne donne pas le résultat escompté
Mes div id header, bttmenu et class container ne sont pas centrer comme le copyright en haut.
Je ne comprends pas mon erreur.
Quelqu'un pourrait m'aider svp?

En vous remerciant de vos réponses
Justine

Je vous mets mon index en html pour mieux comprendre
<body onLoad="MM_preloadImages('images/button/bouton2.gif','images/button/boutonb2.gif','images/button/boutonc2.gif','images/button/boutone2.gif','images/button/boutonf2.gif')" bgcolor="#CCCCCC">
<div id="header"><font size="10"><b>Tamarind Villa</b></font></div>
<div id="bttmenu"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/button/bouton2.gif',1)"><img name="Image2" border="0" src="images/button/bouton1.gif" width="100" height="49"></a><a href="about_tamarind.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/button/boutonb2.gif',1)"><img name="Image3" border="0" src="images/button/boutonb1.gif" width="151" height="51"></a><a href="Tamarind%20Location.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/button/boutonc2.gif',1)"><img name="Image4" border="0" src="images/button/boutonc1.gif" width="100" height="51"></a><a href="Contact%20details.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/button/boutone2.gif',1)"><img name="Image6" border="0" src="images/button/boutone1.gif" width="115" height="50"></a><a href="Rates%20&amp;%20Availability.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/button/boutonf2.gif',1)"><img name="Image7" border="0" src="images/button/boutonf1.gif" width="154" height="50"></a></div>

<div class="container" style="position:absolute; width:1000px; z-index:10; top:110px">

<center><p>
</br>
</br>
"How strange to be in this vast, opulent villa in St Lucia by myself.</br>
I wander through the seven double bedrooms, each with its own bathroom. </br>
White walls, high ceilings, dark-wood floors, high airy rooms with ocean views - where in this wilderness of elegance shall I sleep? </br>
I settle on an upstairs room with a four-poster bed and a balcony the size of a cricket pitch.</br>
Where shall I drink alone? Between the balcony, the veranda, the deck and the gazebo by the swimming pool, 
there are at least a dozen prime drinking chairs, and every time I sit down with my glass of rum, I feel like sitting somewhere else.</br>
The sun is setting over the Caribbean: the landscaped gardens are full of flowers: mangos and mangos and limeshang ripe on the trees."</br>
</br>
As described in the Travel section of the Saturday Telegraph newspaper 28 July 2012.
</p></center>
</div>
<div align="center" style="top:500px"><p><font face="Arial, Helvetica, sans-serif">&copy; <font size="1">Tamarind Villa, St Lucia 2014</font></font></p></div>
</body>


Voici mon code css
body {
	background-color: #CCCCCC;
	background-repeat: no-repeat;
}
p {
	font-family:Tempus Sans ITC;
	font-size:100%;
	color:black;
	background-color:transparent;
	text-align:center;
	margin-left:0;
	margin-right:0;
}
#header {
	text-align:center;
	font-family:Tempus Sans ITC;
	font-size:55px;
	position:absolute; 
	width:1000px; 
	height:50px;
	z-index:1;
	top: 15px;
	margin-left:auto;
	margin-right:auto;
}
#bttmenu {
	position:absolute; 
	width:1000px; 
	height:50px; 
	z-index:30;  
	top: 85px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
#copyright {
	position:absolute; 
	width:1000px; 
	height:50px; 
	z-index:30;  
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}	
.container {
	background-color:#fefee2;
	position:absolute;
	width:1000px; 
	top: 115 px;
	border-color:#fefee2;
	border-style:solid;
	z-index:10; 
	border-top-left-radius:50px;
	border-top-right-radius:50px;
	border-bottom-left-radius:50px;
	border-bottom-right-radius:50px;
	margin-left:auto;
	margin-right:auto;
}
div + div {
	margin-left:auto;
	margin-right:auto;
}

Modifié par justineit (26 Apr 2014 - 21:10)
Sujet clos
Aller à