Sujet Précédent Sujet Suivant

Alignement de 2 blocs en css

Résolu/Fermé
lap923 Messages postés 2 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 21 janvier 2009 - 21 janv. 2009 à 04:07
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 ;
}
A voir également:

2 réponses

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

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
djakool4 -

158 réponses
Great Teacher Onizuka SAISON 2
remi1912 -
Sorrow -

35 réponses
Le royaume de Ga'Hoole 2
Return -
Plejej9 -

42 réponses
Je tiens combien de temps avec 2Go d'internet ?
champi100 -
dadout -

7 réponses
3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses