Menu Horizontal ne va pas

Résolu/Fermé
yvangia Messages postés 84 Date d'inscription mercredi 26 décembre 2007 Statut Membre Dernière intervention 2 octobre 2012 - 28 janv. 2012 à 00:48
yvangia Messages postés 84 Date d'inscription mercredi 26 décembre 2007 Statut Membre Dernière intervention 2 octobre 2012 - 28 janv. 2012 à 13:30
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;
}

A voir également:

2 réponses

salut , il te manque juste display:inline sur le li que tu veux mettre a l'horizontal ;)
0
yvangia Messages postés 84 Date d'inscription mercredi 26 décembre 2007 Statut Membre Dernière intervention 2 octobre 2012
28 janv. 2012 à 13:30
Aah super merci ca marche ;D
0