Alignement de 2 blocs en css [Résolu/Fermé]

Messages postés
2
Date d'inscription
mercredi 21 janvier 2009
Statut
Membre
Dernière intervention
21 janvier 2009
- - Dernière réponse : Matio
Messages postés
671
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
25 janvier 2011
- 21 janv. 2009 à 04:33
Bonjour,

J'ai essayé voila 4 heures de comprendre le comment du pourquoi mais je n'arrête pas de m'y perdre....
L'organisation de ma page est la suivante :
Header
Menu
Contenu des pages web du menu

Alors que je la voudrais comme ceci :
Header
Menu Contenu des pages web du menu

Je voudrais donc mettre le menu et le contenu des pages web du menu sur la même ligne.


J'ai essayé plusieurs techniques mais j'avoue être novice du CSS (je comprends pas tres bien ce que je fais)
Si quelqu'un peux m'aider rapidement je lui en serait reconnaissant. Surtout que je fais ça pour un cousin qui a besoin d'avoir un site rapidement pour être reconnu dans le milieu du golf... Et c'est loin d'être un bourges !!


Je vous livre mon HTML et mon CSS (je me suis appuyé sur un tutorial pour le faire)

Le HTML :
<body>

<div id="conteneur">
<h1 id="header"></h1>

<ul id="menu">
<li><a href="Presentation.html">Présentation</a></li>
<li><a href="Lecon.html">Leçon</a></li>
<li><a href="Stages.html">Stages</a></li>
<li><a href="Golf_Entreprise.html">Golf Entreprise</a></li>
<li><a href="Actualites.html">Actualités</a></li>
<li><a href="Tarifs.html">Tarifs</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</ul>

<div id="contenu">
<h2>Présentation</h2>
<p>dfgdfgdgd
dfgdgdfg
dfgdfgdfg
</p>
</div>

</div>
</body>
</html>




LE CSS :
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background-color: #000000;
}

div#conteneur
{
width: 980px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #1111FF ;
}
h1#header
{
height: 330px;
background: url(../images/titre/Sans-titre-1.gif) no-repeat left top;
margin: 0 ;
}

ul#menu
{
margin: 0 ;
margin-left: 10px ;
padding: 0px ;
list-style-type: none ;
width: 180px ;
border: 1px dashed red;
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#menu li a
{
display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 170px ;
line-height: 30px ;
color: #000 ;
text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

text-decoration: none ;
background: url(../images/accessoires/B_menu.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
border: 1px solid #000 ;
}

div#contenu
{
padding: 0 30px 0 100px ;
display: inline ;
}


div#contenu h2
{
display: inline ;
}
Afficher la suite 

2 réponses

Messages postés
2
Date d'inscription
mercredi 21 janvier 2009
Statut
Membre
Dernière intervention
21 janvier 2009
0
Merci
ok, je viens de trouvé
il faut rajouter fload left a la bilse menu....
Messages postés
671
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
25 janvier 2011
267
0
Merci
Salut,
utilise la propriété float pour positionner les choses les unes à coté des autres et tu peut mettre ton menu dans un div