28220 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde !
Je suppose que cette question a été posé mille fois. Mais j'ai lu le tutoriel sur le centrage d'un site web dans Alsacreations ainsi queles tuto de Open Web. mais j'ai toujours un problème en suspens.
Je souhaiterais faire un beau site centré.
Tout d'abord j'ai une bannière au dessus du site ( de taille fixe 800*170 px) que je dois centrer)
Je le fait via le code suivant :
code HTML

<!-- Affichage de la bannière -->
<div id="Banniere"><img src="Bannière/Banniere.gif" border="0" alt="Bienvenue sur le site "></div>

code CSS

#Banniere{
     position: relative;
	 margin-left:auto;
	 margin-right:auto;
     width: 800px;
	 height:170px;
	 top:5px;
     text-align: left;
	 border-width:1px;
	 border-color:#F79832;
	 border-style:solid;
}

Jusque là ca fonctionne très bien, la bannière est bien centrée Smiley lol
C'est ici que je cale complètement et que je patine..
Je souhaiterais faire un menu de 200px de large dont le conteneur aurait donc une largeur/hauteur fixe. Je souhaiterais que le coin gauche du menu s'aligne avec le coin gauche de la bannière.
Comme code HTML, j'ai ceci :
code HTML

<!-- Affichage du menu-->
<div id="Menu">Ici le menu</div>

et c'est pour le CSS que je bloque..
code CSS

#Menu{
      
	 width:100px;
	 height:200px;
	 border-width:1px;
	 border-color:#F79832;
	 border-style:solid;
	 }

Pourriez-vous me dire le code à insérer afin que mon bloc menu de taille fixe puisse être à une distance voulue(fixe malgré les marges qui sont en auto?)
J'aurai également besoin de ce code pour recréer un bloc de 600px à droite du menu pou y mettre mon corps du site...
D'avance, Merci pour l'aide Smiley cligne
Modifié par arnaud_verlaine (29 Nov 2005 - 14:15)
Bonjour,

Si j'ai bien cerné votre problème, vous devez utiliser un conteneur que vous centrez en utilisant comme vous l'avez fait, les marges automatiques. Il vous permettra ainsi de centrer directement tous les éléments qui seront à l'intérieur.


<div id="container">
   <div id="banniere">
   ...
   </div>
   <div id="menu">
   ...
   </div>
</div>


Ensuite, utilisez les marges pour aligner vos éléments à votre convenance.

Cordialement.
Modifié par Xesos (29 Nov 2005 - 13:32)