Besoin d'aide ... Menu Horizontal

Owerace -  
Fallentree Messages postés 2445 Statut Membre -
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

2 réponses

  1.
    Fallentree Messages postés 2445 Statut Membre 210
     
    si tu passes pas une position a ton 
    #footer 
{ 
position:absolute;
top:80%;
background-image: url("../FLOOTERSIMS.jpg"); 
width: 1280px; 
height: 53px; 
}
    0
    1. Owerace
       
      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
    2. Fallentree Messages postés 2445 Statut Membre 210
       
      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
  2. julie-f Messages postés 68 Statut Membre 10
     
    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
    1. Owerace
       
      Désolé, mais çà ne marche pas ......
      0
    2. Owerace
       
      Si c'est Bon, çà marche avec plusieurs petits réglage !!!! Merci beaucoup ! Si çà ne fonctionne plus je reviendrais ... Merci encore !
      0
    3. julie-f Messages postés 68 Statut Membre 10
       
      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
    4. Fallentree Messages postés 2445 Statut Membre 210
       
      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 activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
menu caché
laurent -
ChariduP -

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

7 réponses