Menu Horizontal ne va pas
Résolu
yvangia
Messages postés
84
Date d'inscription
Statut
Membre
Dernière intervention
-
yvangia Messages postés 84 Date d'inscription Statut Membre Dernière intervention -
yvangia Messages postés 84 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je débute en programmation et j'ai un problème
j'ai une page avec un menu vertical a gauche mais je n'arrive pas à mettre un menu horizontalement en haut. quand je fait float: left il se mets devant mon menu verticale
merci beacuoup d'avance
voici mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Poetry</title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centraal">
<div id="logo">
<img src="Poezie.png" />
<div id="bovennavigatie">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="#">Voorstelling</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>
<!-- Contenu principal -->
<h1>Titre</h1>
<div id="midden">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborume! </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</body>
</html>
Mon code CSS:
body
{
background-color:#C4D4CB;
color:#E84167;
font-family: Georgia, "Times New Roman",
Times, serif;
padding-left: 11em;
text-align: center;
}
#centraal
{
width: 1000px;
margin: auto;
}
h1
{
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar
{
float:left;
top: 2em;
left: 1em;
width: 9em;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navbar li
{
background: #55665E;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #30282A;
}
ul.navbar a
{
text-decoration: none;
}
a:link
{
color: #E84167;
}
a:visited
{
color: #E84167;
}
a:hover
{
color: #542733;
}
#midden
{
width:800px;
margin-left: 12em;
}
Je débute en programmation et j'ai un problème
j'ai une page avec un menu vertical a gauche mais je n'arrive pas à mettre un menu horizontalement en haut. quand je fait float: left il se mets devant mon menu verticale
merci beacuoup d'avance
voici mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Poetry</title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centraal">
<div id="logo">
<img src="Poezie.png" />
<div id="bovennavigatie">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="#">Voorstelling</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>
<!-- Contenu principal -->
<h1>Titre</h1>
<div id="midden">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborume! </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</body>
</html>
Mon code CSS:
body
{
background-color:#C4D4CB;
color:#E84167;
font-family: Georgia, "Times New Roman",
Times, serif;
padding-left: 11em;
text-align: center;
}
#centraal
{
width: 1000px;
margin: auto;
}
h1
{
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar
{
float:left;
top: 2em;
left: 1em;
width: 9em;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navbar li
{
background: #55665E;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #30282A;
}
ul.navbar a
{
text-decoration: none;
}
a:link
{
color: #E84167;
}
a:visited
{
color: #E84167;
}
a:hover
{
color: #542733;
}
#midden
{
width:800px;
margin-left: 12em;
}
A voir également:
- Menu Horizontal ne va pas
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide