Sujet Précédent Sujet Suivant

Besoin d'aide ... Menu Horizontal

Fermé
Owerace - 24 juil. 2012 à 12:19
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 - 25 juil. 2012 à 16:43
Bonjour,

Je viens ici car j'ai besoin d'aide,
En effet je cherche à faire, un menu Horizontal,
J'ai réussi a faire le code Css et Html.
Mais j'aimerais que ce menu soit dans mon corps , là ou je taperais mes article ...
Mais après beaucoup d'essais, je n'y arrive pas. Et quand j'y arrive, le flooter se cole au menu.
Je vous mets Le CSS :


body
{
background-color:#ffffff ;
font-size :16px;
font-family : Verdana }


#conteneur
{
width: 1280px;

margin-left: 65px;
margin-right: 0px;
}
#header
{
background-image: url("../SIMSHEADER.jpg");
width: 1280px;
height: 174px;
}

#header a
{
display: block;
height: 174px;
width: 1280px;
}

#menu
{

background-image: url("../MENUSIMS.jpg");
width: 1280px;
height : 162px;
text-align: center;
font-size: 57px;
font-family: Arial
font-weight:bolder
}

#menu a
{
color : white;
text-decoration: none;
margin-left: 20px;
margin-right: 20px; }

#menu a:hover
{
font-weight:bolder
color : white;
font-family : Arial;
text-decoration: underline;
}

#menude

{

background-image: url("../SOSIMS.jpg");
width : 296px;
height : 633px;
}

#corps
{

background-image: url("../CORPSSIMS.jpg");
background-repeat: repeat-y;




width : 1280px;
height : 3600px ;
padding-left: 140px;
padding top : 40px;


}

.arrowlistmenu{
width: 100px; /*width of menu*/


}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}




#footer
{


background-image: url("../FLOOTERSIMS.jpg");
width: 1280px;
height: 53px;
}


Je vous mets le 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" >
<head>
<link rel="stylesheet" href="EDITOSIMS.css" type="text/css">
<title>Owerofus</title>
</head>
<link rel="icon" type="image/jpg" href="faviconsims.jpg" />

<body>
<div id="conteneur">
<div id="header"><a href='EDITOSIMS.html'></a></div>
<div id="menu"><br>       <a href='EDITOSIMS.html'>Accueil</a>  <a href='Firstpage.html'>News</a>  <a href='Firstpage.html'>Forum</a></div>

<div id="corps" class="arrowlistmenu">

<ul>

<h3 class="headerbar">CSS Library</h3>

<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<ul>
<h3 class="headerbar">CSS Drive</h3>

<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

</div>
<div id="footer"></div>


</body>
</html>





Et pour info, la page c'est :

http://www.owerofus.fr/EDITOSIMS.html


A voir également:

2 réponses

Réponse 1 / 2
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
24 juil. 2012 à 14:54
si tu passes pas une position a ton 
#footer 
{ 
position:absolute;
top:80%;
background-image: url("../FLOOTERSIMS.jpg"); 
width: 1280px; 
height: 53px; 
}
0
Owerace
24 juil. 2012 à 17:16
Merci pour ta réponse, mais le footer se colle toujours après le menu, et il y a toujours l'espace entre le corps et le menu horizontal ...
0
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
24 juil. 2012 à 17:54
comment tu veux que ton pied de page se comporte lorsque la dimension de la page est supérieure a celle de la fenetre ???
0
Réponse 2 / 2
julie-f Messages postés 63 Date d'inscription mardi 3 juillet 2012 Statut Membre Dernière intervention 31 août 2012 10
Modifié par julie-f le 24/07/2012 à 17:58
Bonjour,

ton div footer est inclu dans le div corps, il faut donc ajouter position: relative pour que ton position absolute soit cadré par rapport à ton corps :
#corps { 
width: 1280px;  
height: 3600px;  
padding-left: 140px;  
background-image: url("../CORPSSIMS.jpg");  
background-repeat: repeat-y;  
border: solid 1px red;  
position: relative; 
}

Ensuite tu aligne ton footer en bas à gauche : 
#footer { 
width: 1280px; 
height: 53px;  
background-image: url("../FLOOTERSIMS.jpg");  
position: absolute;  
bottom: 0px; 
left: 0px; 
}


Edit : Je me suis basé sur le code de ton url, pas sur ton code ci dessus.
0
Owerace
24 juil. 2012 à 22:03
Désolé, mais çà ne marche pas ......
0
Owerace
24 juil. 2012 à 22:32
Si c'est Bon, çà marche avec plusieurs petits réglage !!!! Merci beaucoup ! Si çà ne fonctionne plus je reviendrais ... Merci encore !
0
julie-f Messages postés 63 Date d'inscription mardi 3 juillet 2012 Statut Membre Dernière intervention 31 août 2012 10
25 juil. 2012 à 08:58
Hello,

ton affichage risque d'être bancal, tu as 2 div qui ne sont pas fermés (conteneur et corps)...

Je pense que tu devrais ajouter </div></div> juste au dessus de </body>
0
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
25 juil. 2012 à 16:43
elle se superpose en pied de page
exple :
<div style="position:absolute; bottom: 0px; left: 0px; "> sign </div>
<div style="position:absolute; bottom: 0px; left: 0px; "> sign 2 </div>
0

Discussions similaires

Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses