18073 sujets

Questions générales et questions de débutants

Menu en face page principale

Bonjour,
je suis débutant en CSS
comme ci-dessous
http://asor.free.fr/css/css.jpg
pour quelle raison je n'arrive pas à avoir le menu à côté de la page principale ?
voici ma page :
http://asor.free.fr/css/index.htm
[b]code css[/i]
#navlist
{
color: white;
background: #006699;
border-bottom: 0px solid #006699;
border-right: 0px solid #006699;
margin-left: 0;
margin-top: 0; 
margin-bottom: 0; 
width: 100%;
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
font-size:10px; 
font-family:Verdana, sans-serif; 
padding-left:0px; 
padding-right:0px; 
padding-top:6px; 
padding-bottom:6px
}
#navlist li
{
list-style: none;
margin: 10px;
font-size: 10px;
}
#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0;
margin-top: 0;
color: white;
background: #336699;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 6px solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#navlist a#current 
{ 
background: #336699;
border-color: #006699 #66ccf f #55bbdd;
padding: 0.4em 0.35em 0.25em 0.9em
}
#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}
#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#navlist a:hover, #navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd red;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#navlist a:active, #navlist a#current:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
.texte
{
background: #ffffff;
text-align: justify;
font-family: Times;
font-weight: normal;
font-size: 12pt; 
margin-left: 12px; 
margin-top:0px; 
margin-bottom:6px;
padding: 0.4em 0.35em 0.25em 0.9em;
}
h1
{
background: #ffffff;
text-align: center;
font-family: Times;
font-weight: normal;
font-size: 16pt; 
}
.img1
{
left: 10%;
top: 70%
} 
#body 
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 70px;
background-color: #336699;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#336699;
}
#centre {
background-color:#ffffff;
margin-left: 150px;
padding:12px;
}
#gauche {
position: absolute;
left:6px;
width: 150px;
}
#pied {
height: 30px;
background-color: #336699;
}
p 
{
margin: 0 0 10px 0;
}

Merci d'avance pour la correction de mes erreurs
Conseil : si tu utilises Firefox, installe la Webdevelopper Toolbar.
En français ici : http://joliclic.free.fr/mozilla/webdeveloper/

Ensuite, vas sur ta page et fais un petit
Entourer > Entourer les éléments de type block

Tu devrais voir apparaître tes blocs grâce à des bordures, y compris ceux qui sont censés se fondre dans la page.
Du coup tu pourras voir ce qui rentre en collision avec quoi, et pourquoi tu n'as pas la place de caser à la fois ton menu et ton contenu dans la largeur de ta page.

Remarques générales
- la div#navcontainer ne sert pas à grand chose et te gêne plus qu'autre chose. En particulier, elle prend toute la largeur de la page... donc forcément, le contenu n'a plus la place de se mettre à droite... Smiley biggol
- tu as des conteneurs dans des conteneurs dans des conteneurs (en caricaturant un peu...), avec des propriétés sympathiques comme width: 100%; (un des plus gros fouteurs de merde de toute la tribu CSS, c'est une bonne idée de l'inviter plusieurs fois Smiley lol )...
- et puis des hacks qui traînent. Mais les hacks, bah c'est pas bien...

Bref, moi je reprendrais à zéro ma structure de page et mes styles associés (on peut par contre garder la mise en forme du texte, les couleurs, tout ça...). Parce que là c'est un peu du bricolage quand même, ça risque de pas tenir à l'usage Smiley cligne
Salut,

Bon, visiblement, c'est plutôt IE que tu utilises, parce que sous Firefox, c'est la cata directe...Mais rien de bien méchant au final.

mpop est de bon conseil, notamment sur le width:100% qu'il faut utiliser avec parcimonie (qui ça ?). Pour le reste, va faire un tour dans les tutoriels, sur la partie qui concerne le positionnement et tu devrais pouvoir avancer.

Smiley cligne
Salut,

Tu as #gauche dans ta css, mais rien de correspondant dans le html.. donc forcément ça ne peut pas marcher Smiley lol

Apparement #gauche devrait correspondre à #navcontainer : donc soit remplace le nom dans la css (#gauche par #navcontainer ) ou bien soit dans le html (#navcontainer par #gauche), l'un ou l'autre.

A+
Sujet clos
Aller à