Alignement de 2 blocs en css
Résolu
lap923
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Matio Messages postés 671 Date d'inscription Statut Membre Dernière intervention -
Matio Messages postés 671 Date d'inscription Statut Membre Dernière intervention -
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 ;
}
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:
- Alignement de 2 blocs en css
- Supercopier 2 - Télécharger - Gestion de fichiers
- 2 ecran pc - Guide
- Word numéro de page 1/2 - Guide
- Faire 2 colonnes sur word - Guide
- Whatsapp 2 - Guide