Menu au milieu

Sujet résolu

21 janvier 2006 à 20:51:36

Bonjour à tous,
je suis en train de créer le menu de mon site et j'ai un petit problème. Je vous montre le screen de ce que j'ai pour le moment :
Image utilisateur

Je voudrais que tout ca soit au milieu, que les blocs prennent toute la place disponible et que quand on passe avec la souris sur un bloc il change de couleur (le bloc tout entier).
Je vous montre mon html :

<div id="menu_haut">
<ul id="speedbarre">
<li class="speed"><a href="index.php">Accueil</a></li>
<li class="speed"><a href="inscription.php">Créez votre Heavy Blog</a></li>
<li class="speed"><a href="connexion.php">Gérez votre Heavy Blog</a></li>
<li class="speed"><a href="statistiques.php">Statistiques</a></li>
<li class="speed"><a href="contact.php">Contact</a></li>
<li class="speed"><a href="about.php">A propos</a></li>
</ul>

</div>

et mon css :

#speedbarre
{
list-style-type: none;
margin-left:0;
padding-left: 0;
height: 28px;
background-color: blank;
border: 1px dashed #2C485C;
}

#speedbarre li
{
height: 28px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
padding-top: 1px;
font-size:0.9em;
}

.speed
{
float: left;
border-left: 1px dashed #2C485C;
}

#speedbarre a
{
color: #555555;
font-style: normal;
text-decoration: none;
font-weight:bold;
}

#speedbarre a:hover
{
color: #111111;
}

J'espère que vous pourrez m'aider,
merci d'avance

Nautré125

21 janvier 2006 à 21:00:48

pour que le bloc change de couleur tu applique ton :hover au bloc (marche pas sous IE qui n'accepte les hover que pour les liens) ou tu pourrait essayer de faire un display:bloc; pour tes liens.

pour prendre toute la place c'est align:justified; si je m'en souviens bien.

Riko

21 janvier 2006 à 22:37:06

Salut, essaie ce code :

<ul class="menu">

<li class="speed"><a href="index.php">Accueil</a></li>
<li class="speed"><a href="inscription.php">Créez votre Heavy Blog</a></li>
<li class="speed"><a href="connexion.php">Gérez votre Heavy Blog</a></li>
<li class="speed"><a href="statistiques.php">Statistiques</a></li>
<li class="speed"><a href="contact.php">Contact</a></li>
<li class="speed"><a href="about.php">A propos</a></li>
</ul>

ul {
list-style-type: none;
text-align: center;
}

li {
margin: 5px;
display: inline;
}

.menu a {
border: 1px dashed #2C485C;
text-decoration: none;
color: #000;
background: #fff;
padding: 5px;
}

.menu a:hover {
color: #111111;
background-color: #FFCC33;
}

jp949

22 janvier 2006 à 8:44:18

pour centrer un bloc il faut lui donner une largeur et mettre margin:auto; autrement dit #speedbarre {width:XYpx; margin:auto; } de plus tu fais 2regles pour tes liens une seule suffit
speedbarre li
{ float:left;
border:blabla;
height: 28px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
padding-top: 1px;
font-size:0.9em;
}

Hooli

22 janvier 2006 à 19:12:49

Merci à tous pour vos réponses
j'ai suivi la méthode de Riko et c'est presque parfait. En fait il y a plusieurs espaces non voulus et des endroits ou les bordures ne se touchent pas.
Je vous ai fait un screen :
Image utilisateur

Je vous redonne mes nouveaux codes :
HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Heavy-Blog.be - Accueil</title>
<meta name="description" content="Heavy-Blog vous propose de créer votre blog selon vos envies." />
<meta name="keywords" content="heavy-blog, blog, heavy" />
<link type="text/css" rel="stylesheet" href="css/css.css" title="CSS de Heavy-Blog.be" />
</head>

<body>
<div id="header">

</div>

<div id="menu_haut">
<ul class="menu">

<li class="speed"><a href="index.php">Accueil</a></li>
<li class="speed"><a href="inscription.php">Créez votre Heavy Blog</a></li>
<li class="speed"><a href="connexion.php">Gérez votre Heavy Blog</a></li>
<li class="speed"><a href="statistiques.php">Statistiques</a></li>
<li class="speed"><a href="contact.php">Contact</a></li>
<li class="speed"><a href="about.php">A propos</a></li>
</ul>

</div>

<div id="menu_gauche">
<fieldset>
<legend>Blog de la semaine</legend>
Hooli<br/>--------<br/>
Ici se trouve la description qui dechire de trop moi je te le dis
</fieldset><br/>
</div>

<div id="corps">
<h1>Bienvenue sur Heavy Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec bibendum ornare arcu. Curabitur consequat odio id erat. Quisque scelerisque metus id eros. Sed tempus. Donec non orci. Nunc vulputate dapibus diam. Morbi odio. Nullam a lorem a odio luctus blandit. Morbi malesuada dolor a lectus. Ut mattis sem eget lectus. Duis in mi. Aliquam in purus eget lectus sollicitudin euismod. Donec pede ipsum, rutrum quis, posuere ut, rutrum vel, nibh. Donec sollicitudin nisi eget lacus. Etiam semper. Ut pellentesque diam a neque. Nullam sagittis, odio ac ultricies sodales, arcu purus commodo massa, vitae volutpat pede diam vitae urna. Phasellus scelerisque odio vitae enim. Nullam felis nunc, semper eu, varius in, vulputate vel, nulla. Proin est nisi, tempor malesuada, feugiat vitae, volutpat sit amet, ante.
</p>
<p>Mauris et augue. Vivamus sed est. Morbi elit nisl, tincidunt eget, commodo tincidunt, congue non, est. Aenean nunc pede, sollicitudin id, sodales a, lacinia id, libero. Integer odio est, gravida et, consequat dictum, scelerisque eget, sem. Vivamus cursus, odio sit amet euismod mollis, velit neque feugiat arcu, eu accumsan dolor turpis id tortor. Praesent ut sem. Sed a justo id lacus hendrerit porttitor. Cras nulla ante, laoreet ac, feugiat vitae, dictum sit amet, augue. Sed posuere nisi quis odio. Maecenas dolor nisl, posuere a, interdum eget, tristique ut, enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet quam. Proin mi.
</p>
<p>Aliquam arcu. Etiam id pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nec mi. Maecenas quis tortor a tellus nonummy feugiat. Nullam id arcu. Etiam non tellus nec mi rutrum posuere. Aliquam nunc urna, suscipit iaculis, sollicitudin sit amet, convallis eget, mi. Mauris ullamcorper nulla sed mi. Nunc egestas porttitor lectus. Pellentesque pretium est elementum nisl. Nunc libero ante, suscipit vitae, scelerisque vitae, tincidunt sed, dolor. Sed congue libero et urna. Donec velit. Proin placerat convallis quam. Nulla consectetuer venenatis metus.
</p>
</div>

<div id="footer">
<p>© Copyright Heavy-Blog.be - Tous droits réservés - Script by Hooli<br/>

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

CSS :

body
{
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
}

#header
{
height: 100px;
background-image: url(../img/banniere.jpg);
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px dashed;
}

#menu_haut
{
border-bottom: 1px dashed;
border-right: 1px dashed;
border-left: 1px dashed;
}

ul
{
list-style-type: none;
text-align: center;
}

li
{
display: inline;
}

.menu a
{
border: 1px dashed #2C485C;
text-decoration: none;
color: #000;
background: #fff;
padding: 5px;
}

.menu a:hover
{
color: Red;
background-color: #FFCC33;
}

#menu_gauche
{
border-right: 1px dashed;
width: 15%;
float: left;
background-color: #FFCC33;
}

#corps
{
margin-left : 16%;
border-right: 1px dashed;
}

#footer
{
border: 1px dashed;
text-align: center;
clear:both;
}

#footer p
{
margin: 0px;
padding: 0px;
}

h1
{
background-color: #FFCC33;
color: Red;
}

Merci d'avance

Riko

23 janvier 2006 à 19:00:49

Salut, j'ai peut être trouvé quelque chose pour toi:

Voici le code

Désolé je n'ai pas réussi a réduire l'espace autour du menu et je ne sais pas si le code est logique mais cela l'air de fonctionner

body
{
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
}

#header
{
height: 100px;
background-image: url(../img/banniere.jpg);
background-repeat: no-repeat;
background-position: center;
/*suppression de ----border-bottom: 1px dashed------*/
}

#menu_haut
{
border: 1px dashed;

}

ul
{
list-style-type: none;
text-align: center;
}

li
{
display: inline;
}

.menu a
{
border: 1px dashed #2C485C;
text-decoration: none;
color: #000;
background: #fff;
padding: 5px;
}

.menu a:hover
{
color: Red;
background-color: #FFCC33;
}

#menu_gauche
{
border-right: 1px dashed;
width: 15%;
float: left;
background-color: #FFCC33;
}

#corps
{
margin-left : 16%;
border-right: 1px dashed;

}

/* ajout de*/
#corps p
{
margin-bottom: 0px; /*descend la borure jusqu'en bas*/
padding: 5px; /*jouer avec le padding pour donner le l'espace par rapport aux bordures*/

}
/*-------------*/

#footer
{
border: 1px dashed;
text-align: center;
clear:both;
}

#footer p
{
margin: 0px;
padding: 5px;/*espacement du texte par rapport a la bordure*/
}

h1
{
background-color: #FFCC33;
color: Red;
margin-top: 0px; /*la bordure droite de monter jusqu'en haut*/
margin-bottom:20px;/*decalage du texte vers le bas par rapport au titre*/

}

Hooli

27 janvier 2006 à 16:40:34

Merci à tous pour votre aide, le problème est réglé. Je vous mets les codes au cas ou ca pourrait servir à quelqu'un :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Heavy-Blog.be - Accueil</title>
<meta name="description" content="Heavy-Blog vous propose de créer votre blog selon vos envies." />
<meta name="keywords" content="heavy-blog, blog, heavy" />
<link type="text/css" rel="stylesheet" href="css/css.css" title="CSS de Heavy-Blog.be" />
</head>

<body>
<div id="header">

</div>

<div id="menu_haut">
<ul class="menu">

<li class="speed"><a href="index.php">Accueil</a></li>
<li class="speed"><a href="inscription.php">Créez votre Heavy Blog</a></li>
<li class="speed"><a href="connexion.php">Gérez votre Heavy Blog</a></li>
<li class="speed"><a href="statistiques.php">Statistiques</a></li>
<li class="speed"><a href="contact.php">Contact</a></li>
<li class="speed"><a href="about.php">A propos</a></li>
</ul>

</div>

<div id="menu_gauche">
<fieldset>
<legend>Week's Blog</legend>
<b>Hooli</b><br/><hr noshade size="1" width="100%" align="left" color="#FFCC33">Ici se trouve la description du blog...
</fieldset><br/>

<fieldset>
<legend>Last Blog</legend>
<b>Hooli</b><br/><hr noshade size="1" width="100%" align="left" color="#FFCC33">Ici se trouve la description du blog...
</fieldset><br/>

<fieldset>
<legend>Birthdays</legend>
Joyeux anniversaire<br/>
<b>Hooli</b><br/>
<b>Gazon</b>
</fieldset>
</div>

<div id="corps">
<br/>
<h1>Les News . . .</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec bibendum ornare arcu. Curabitur consequat odio id erat. Quisque scelerisque metus id eros. Sed tempus. Donec non orci. Nunc vulputate dapibus diam. Morbi odio. Nullam a lorem a odio luctus blandit. Morbi malesuada dolor a lectus. Ut mattis sem eget lectus. Duis in mi. Aliquam in purus eget lectus sollicitudin euismod. Donec pede ipsum, rutrum quis, posuere ut, rutrum vel, nibh. Donec sollicitudin nisi eget lacus. Etiam semper. Ut pellentesque diam a neque. Nullam sagittis, odio ac ultricies sodales, arcu purus commodo massa, vitae volutpat pede diam vitae urna. Phasellus scelerisque odio vitae enim. Nullam felis nunc, semper eu, varius in, vulputate vel, nulla. Proin est nisi, tempor malesuada, feugiat vitae, volutpat sit amet, ante.
</p>
<p>Mauris et augue. Vivamus sed est. Morbi elit nisl, tincidunt eget, commodo tincidunt, congue non, est. Aenean nunc pede, sollicitudin id, sodales a, lacinia id, libero. Integer odio est, gravida et, consequat dictum, scelerisque eget, sem. Vivamus cursus, odio sit amet euismod mollis, velit neque feugiat arcu, eu accumsan dolor turpis id tortor. Praesent ut sem. Sed a justo id lacus hendrerit porttitor. Cras nulla ante, laoreet ac, feugiat vitae, dictum sit amet, augue. Sed posuere nisi quis odio. Maecenas dolor nisl, posuere a, interdum eget, tristique ut, enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet quam. Proin mi.
</p>
<p>Aliquam arcu. Etiam id pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nec mi. Maecenas quis tortor a tellus nonummy feugiat. Nullam id arcu. Etiam non tellus nec mi rutrum posuere. Aliquam nunc urna, suscipit iaculis, sollicitudin sit amet, convallis eget, mi. Mauris ullamcorper nulla sed mi. Nunc egestas porttitor lectus. Pellentesque pretium est elementum nisl. Nunc libero ante, suscipit vitae, scelerisque vitae, tincidunt sed, dolor. Sed congue libero et urna. Donec velit. Proin placerat convallis quam. Nulla consectetuer venenatis metus.
</p>
</div>

<div id="footer">
<p>© Copyright <a href="http://www.heavy-blog.be">Heavy-Blog.be</a> - Tous droits réservés - Script by <a href="mailto:hooli666@gmail.com">Hooli</a><br/>

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

body
{
font-family: 'Trebuchet MS', Arial, 'Times new roman', Times, serif;
background-color: black;
color: white;
font-size: 0.9em;
}

#header
{
height: 100px;
background-image: url(../img/banniere.jpg);
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px dashed;
border-color: #FFCC33;
}

#menu_haut
{
border-bottom: 1px dashed;
border-left: 1px dashed;
border-right: 1px dashed;
border-color: #FFCC33;
}

#menu_haut ul
{
margin-top: 5px;
}

ul
{
list-style-type: none;
text-align: center;
margin: 5px;
}

li
{
display: inline;
padding-left: none;
}

.menu a
{
text-decoration: none;
background: Black;
padding: 5px;
border-right: 1px dashed;
border-left: 1px dashed;
border-color: #FFCC33;
color: Lime;
font-weight: bolder;
}

.menu a:hover
{
color: Red;
background-color: #FFCC33;
}

#menu_gauche
{
width: 15%;
float: left;
}

#menu_gauche p
{
margin-left : 5px;
}

#corps
{
margin-left: 15%;
border-right: 1px dashed;
border-left: 1px dashed;
border-color: #FFCC33;
}

#corps p, h1
{
margin-left: 1%;
}

#corps a
{
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-style:italic
}

#corps a:hover
{
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:line-through;
}

#footer
{
border: 1px dashed;
border-color: #FFCC33;
text-align: center;
clear:both;
}

#footer p
{
margin: 0px;
padding: 0px;
}

#footer a
{
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-style:italic
}

#footer a:hover
{
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:line-through;
}

h1
{
background-color: #FFA500;
color: Black;
margin-top: 0px;
}

p
{
margin-bottom: 0px;
}

fieldset
{
border-color: #FFCC33;
margin-right: 2%;
}

legend
{
color: Lime;
}

hr
{
margin: 0px;
}

Menu au milieu

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Menu au milieu

Menu au milieu

Supprimer

Modérer

Signaler le message aux modérateurs