Conflits entre menu et thème CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Conflits entre menu et thème CSS

ersatz

Bonjour à tous :hello:

Je suis nouveau avec CSS, et jusqu'à présent ca allait bien, jusqu'à cet apres midi :mrgreen:
j'utilise wordpress, et pour customiser mon thème j'ai créer un menu horizontal : http://uzi.jupiterii.com/testmenu_v2/htmlv2.html

j'en suis content, par contre, il est impossible de l'intégrer dans le fichier css de mon thème, rien ne va plus sinon : le menu déroulant fait décaler vers le bas le contenu, les images de fonds (rollovers) ne marchent pas, j'ai des marges qui apparaissent à droite et à gauche.... Je croyais vraiment qu'une fois que le menu fait y'aurait plus qu'à le coller, mais loin de là et je ne sais plus que faire de tous ces problèmes d'intégration.

Pourriez vous me dire ce qui ne va selon. Toute aide sera VRAIMENT VRAIMENT trèsss apprécié :jap: :jap:

je mets le css du thème :

Code :

body { margin: 0; padding: 0; background: #262626; }
* {margin: 0; padding: 0; border: 0px none; font-family: "Trebuchet MS", Arial, sans-serif }
/*------------Basic styles------------*/
h1, h2, h3, span#copyright, span#design { margin: 0 10px; color: #fff; font-weight: normal; text-decoration: none; background: transparent }
p {
margin: 0 0 1em;
padding: 0;
line-height: 1.4em;
font-size: 0.8em;
}
/*p { font-size: 0.8em; line-height: 1.4em; text-align: justify }*/
h1 { font-size: 1.3em; line-height: 1.4em; letter-spacing: 0.25em } /* site heading */
h2 { font-size: 1.0em; line-height: 1.4em; color: #FFA000 } /* site heading */
h3 { font-size: 0.8em; line-height: 1.4em; color: #FFA000 } /* sub headings */
span#copyright { font-size: 13px; line-height: 35px } /* sets the copyright styles */
span#design { float: right; font-size: 13px; line-height: 35px } /* floats the design link into position */
span.validation { float: right; margin-right: 10px; } /* floats the validation buttons */
.validation img { margin: 0; } /* floats the validation buttons */
div { padding: 10px 0;}
#hdrimg a {color: #06FF00; text-decoration: none; font-weight: normal;}
#hdrimg a strong {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover strong {color: #06FF00; text-decoration: none; font-weight: normal;}
/*-------------Layout----------------*/
#hdrimg { /* Large image */
float: left;
width: 100%;
margin-bottom: 5px;
background: url('images/hdr.gif') repeat-x;
height: 170px; /* ie5x hack begins here */
voice-family: "\"}\"";
voice-family: inherit;
height: 150px;
}
html>body #hdrimg {
height: 150px; /* ie5x hack ends here */
}
.rowcontainer { /* Used to keep the divs in a row. you can use this for any size of divs */
float: left;
margin-bottom: 5px;
width: 100%;
overflow: hidden;
background: #333;
}
#bttmbar { float: left; width: 100%; height: 35px; background: url('images/hdr.gif') bottom repeat-x } /* Bottom copyright bar */
/*------Columns: Note they dont add up to 100%, this is intentional to avoid problems!----------*/
.fullcolumn { float: left; width: 99%;} /* Full width column for a one column site */
.halfcolumn { float: left; width: 49%;} /* Half width column for a two column site. */
.onethirdcolumn { float: left; width: 33%; } /* One third width column for a three column site */
.quartercolumn { float: left; width: 24.5% } /* One quarter width column for a four column site */
.threequartercolumn { float: left; width: 74.5% }
.twocolumn { float: left; width: 20% }
.sixcolumn { float: left; width: 59% }
/*------------------------------Main Navigation------------------------------------------*/
#nav { position: absolute; top: 145px; left: 0px; height: 25px; width: 100% }
ul#nav { margin: 0 }
#nav li /* Main nav list items */
{
font-size: 13px;
float: left;
list-style: none;
text-align: center
}
#nav li a { /* Main nav styles for all links */
display: block; /* Although display:block suggests a vertical list the float:left property under #nav li causes the menu to float inline */
margin-left: 5px; /* adds a gap between the tabs */
width: 90px; /* width of the tab */
line-height: 25px; /* height of the tab */
text-decoration: none;
}
#nav a:link, #nav a:visited { background: url('images/tab.gif') no-repeat 0 -25px }
#nav a:hover, #nav a:active { background: url('images/tab.gif') no-repeat 0 0 }
#nav a#current { background: url('images/tab.gif') no-repeat 0 0 }
/*-----------------------------------Other tags-----------------------------------------*/
acronym { border-bottom: 1px dashed #999; cursor: help }
blockquote { border-top: 2px solid #FFA000; border-bottom: 2px solid #FFA000; margin-left: 1.5em; padding-left: 5px; background-color: #333333}
/* lists */
ul { margin: 5px 0 5px 35px; list-style: url('images/bull.gif') }
ol { margin: 5px 0 5px 35px; list-style: decimal }
ol li, ul li { color: #fff; font-size: 0.8em; line-height: 1.4em }
hr { margin: 10px 0px; height: 1px; background: #444; color: #444 } /* rule styling */
img {margin: 0 10px} /* all images styling */
img.right {float: right} /* right floating images */
img.left {float: left} /* left floating images */
/*-------------------------------------------------------------------------------*/
/* Modification done to basic theme */
/* Added */
#searchdiv {
margin-bottom: 10px;
margin-left: 5px;
}
h4, h5, h6 {
font-family: "Georgia", "Times New Roman", Times, serif;
font-weight: normal;
}
a, a:visited {
font-weight: bold;
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*font: bold 20px/1.1em "Trebuchet MS", "Verdana", sans-serif; }*/
h3.entrytitle {
padding: 0;
margin-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 1.1em;
}
h3.entrytitle a, h3.entrytitle a:visited {
color: #FFA200;
text-decoration: none;
}
h3.entrytitle a:hover{
color: #FFA200;
text-decoration: underline;
}
h3 a {
text-decoration: none;
border: 0px none;
color: #FFA200;
}
div .entrybody h3, div .entrybody h2{
margin-bottom:10px;
color:#B37100;
}
h3 a:hover {
text-decoration: none;
border: 0px none;
text-shadow: none;
color: #333;
}
.entry{
background-color: #2E3233;
border: 1px solid #3e4243;
padding: 10px;
margin-bottom:15px;
color:#FFFFFF;
}
.arc {
border: 1px solid #3e4243;
background-color:#2E3233;
padding:10px;
color:#FFFFFF;
margin-bottom:15px;
}
.entrymeta {
font-size: 11px;
margin-bottom: 15px;
color:#FFFFFF;
}
.entry ul, .entry ol{
margin-left:30px;
list-style:disc;
margin-top:10px;
margin-bottom:10px;
}
.entry ul li, .entry ol li {
padding-top:5px;
line-height:1.5em;
}
/* Sidebar styling*/
#sidebar {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
background-color: #2E3233;
padding:5px;
color:#dddddd;
border: 1px solid #3e4243;
}
#sidebar h2 {
font-weight: bold;
text-transform: uppercase;
color: #dddddd;
font-size: 110%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #555;
margin-bottom: 10px;
}
#sidebar p{
margin: 7px;
color:#999999;
line-height: 1.4em;
}
#sidebar a, #sidebar a:visited {
color:#ffa200;
text-decoration:none;
}
#sidebar a:hover {
color:#ffa200;
text-decoration:underline;
}
#sidebar ul li {
list-style-type: none;
list-style-image: url('none');
margin-bottom: 15px;
margin-left: 10px
}
#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
margin-top: 3px;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0.5em;
padding-top: 0.1em;
padding-right: 0;
padding-bottom: 0.1em;
padding-left: 0;
list-style-type: none;
list-style-position: outside;
list-style-image: url('images/bull.gif');
}

Publicité

FLK

tu utilise le menu qu'on trouve dans le lien que tu as donné avec le CSS qui tu as copié dans ton post ?

Si oui, alors c'est normal que ca marche pas ... il manque tous les styles de ton menu.

ersatz

En fait ca marche pas quand je les ajoute. Je les ai pas mis parceque ca aurait fait une liste interminable, et il sont visibles dans le lien.
hehe

FLK

c'est possible d'avoir une demo qui marche pas?

tu dois avori des styles qui rentrent en conflit j'imagine.

ersatz

Ouais, plein en fait.
Je mets une demo en ligne de qui marche pas.

ersatz

Bon, on reprend, ces lignes de codes ont certainement dues vous faire peur

Ce qui se passe c'est que je voudrais modifier le css de mon thème original:

J'ai donc fait un menu (http://uzi.jupiterii.com/testmenu_v2/htmlv4.html), mais je n'arrive pas à l'intégrer dans mon site, juste dessous le header.

Comme vous pouvez le voir sur ce lien : http://uzi.jupiterii.com/, pas mal d'élément entre conflit : le header a disparu, le footer (qui a la meme background image) aussi, et je ne comprend pas pourquoi mon menu est haut perché.

Avez vous une idée?, c'est peut etre une propriété d'un conteneur qui ne va pas ou une position, mais je n'arrive pas à trouver
Merci à tous !

Message édité par ersatz le 16-10-2006 à 18:15:24

omega2

le plus simple : donne un id unique à l'élément racine de ton menu et référence tous les style de ton menu en indiquant cet id là.
Tu véras, ton ancien fichier css ne sera plus bousillé par le css du menu.

Il restera peut être ensuite à adapter un des deux css pour éviter que le menu ne soit géné par le css du théme du site.

ersatz

Ouais c'est ce que j'ai fait :

Code :

/* Menu */
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
z-index:100;
width:100%; /* correction pour Opera */
padding-left: 180px;
background:url(pagebar_bg.gif);
height: 37px;
#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
#menu li a {
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
.........

Je vois pas un élement du menu qui n'est pas un #menu dans lui, et pourtant :5

gatsu35

Blablaté par Harko

Code :

#menu dl, dt, dd, ul, li

Code :

#menu dl, #menu dt, #menu dd, #menu ul, #menu li

ersatz

Ouais bonne idée, je vais tester.
Je devrais peut être mettre le code en entier du Css menu + CSS thème pour que vous regardiez si y'a pas d'autre erreur, parceque si vous trouvez déjà un truc avec les 3 lignes de code d'exemple que j'ai mis ! :pt1cable: Sinon vous pouvez tjs le voir le dans le lien du site.
Merci à toi

Message édité par ersatz le 16-10-2006 à 22:30:00

Publicité

ersatz

en fait ça à rien changer :??:

Message édité par ersatz le 16-10-2006 à 22:53:40

gatsu35

Blablaté par Harko

balances tout le code de ton menu bon sang

ersatz

Ah! j'ai bien avancé!
En fait j'avais pas fait attention que Dreamweaver m'a mis à jour mes liens :heink: ...voilà pk y'avait plus le hearder et le footer
Comme vous pouvez le voir il reste plus qu'a corriger un léger décalage entre la barre du menu et le texte (http://uzi.jupiterii.com/).

Voilà tout le CSS, le menu est à la ligne 307
Merci à Gatsu35 et aux autres de s'intéressé à mon pb :

Code :

body { margin: 0; padding: 0; background: #262626; }
* {margin: 0; padding: 0; border: 0px none; font-family: "Trebuchet MS", Arial, sans-serif }
/*------------Basic styles------------*/
h1, h2, h3, span#copyright, span#design { margin: 0 10px; color: #fff; font-weight: normal; text-decoration: none; background: transparent }
p { /*p { font-size: 0.8em; line-height: 1.4em; text-align: justify }*/
margin: 0 0 1em;
padding: 0;
line-height: 1.4em;
font-size: 0.8em;
}
h1 { font-size: 1.3em; line-height: 1.4em; letter-spacing: 0.25em } /* site heading */
h2 { font-size: 1.0em; line-height: 1.4em; color: #FFA000 } /* site heading */
h3 { font-size: 0.8em; line-height: 1.4em; color: #FFA000 } /* sub headings */
span#copyright { font-size: 13px; line-height: 35px } /* sets the copyright styles */
span#design { float: right; font-size: 13px; line-height: 35px } /* floats the design link into position */
span.validation { float: right; margin-right: 10px; } /* floats the validation buttons */
.validation img { margin: 0; } /* floats the validation buttons */
div { padding: 10px 0;}
#hdrimg a {color: #06FF00; text-decoration: none; font-weight: normal;}
#hdrimg a strong {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover strong {color: #06FF00; text-decoration: none; font-weight: normal;}
/*-------------Layout----------------*/
#hdrimg { /* Large image */
float: left;
width: 100%;
margin-bottom: 5px;
background: url('images/hdr.gif') repeat-x;
height: 170px; /* ie5x hack begins here */
voice-family: "\"}\"";
voice-family: inherit;
height: 150px;
}
html>body #hdrimg {
height: 150px; /* ie5x hack ends here */
}
.rowcontainer { /* Used to keep the divs in a row. you can use this for any size of divs */
float: left;
margin-bottom: 5px;
width: 100%;
overflow: hidden;
background: #333;
}
#bttmbar { float: left; width: 100%; height: 35px; background: url('images/hdr.gif') bottom repeat-x } /* Bottom copyright bar */
/*------Columns: Note they dont add up to 100%, this is intentional to avoid problems!----------*/
.fullcolumn { float: left; width: 99%;} /* Full width column for a one column site */
.halfcolumn { float: left; width: 49%;} /* Half width column for a two column site. */
.onethirdcolumn { float: left; width: 33%; } /* One third width column for a three column site */
.quartercolumn { float: left; width: 24.5% } /* One quarter width column for a four column site */
.threequartercolumn { float: left; width: 74.5% }
.twocolumn { float: left; width: 20% }
.sixcolumn { float: left; width: 59% }
/*------------------------------Main Navigation------------------------------------------*/
#nav { position: absolute; top: 145px; left: 0px; height: 25px; width: 100% }
ul#nav { margin: 0 }
#nav li /* Main nav list items */
{
font-size: 13px;
float: left;
list-style: none;
text-align: center
}
#nav li a { /* Main nav styles for all links */
display: block; /* Although display:block suggests a vertical list the float:left property under #nav li causes the menu to float inline */
margin-left: 5px; /* adds a gap between the tabs */
width: 90px; /* width of the tab */
line-height: 25px; /* height of the tab */
text-decoration: none;
}
#nav a:link, #nav a:visited { background: url('images/tab.gif') no-repeat 0 -25px }
#nav a:hover, #nav a:active { background: url('images/tab.gif') no-repeat 0 0 }
#nav a#current { background: url('images/tab.gif') no-repeat 0 0 }
/*-----------------------------------Other tags-----------------------------------------*/
acronym { border-bottom: 1px dashed #999; cursor: help }
blockquote { border-top: 2px solid #FFA000; border-bottom: 2px solid #FFA000; margin-left: 1.5em; padding-left: 5px; background-color: #333333}
/* lists */
ul { margin: 5px 0 5px 35px; list-style: url('images/bull.gif') }
ol { margin: 5px 0 5px 35px; list-style: decimal }
ol li, ul li { color: #fff; font-size: 0.8em; line-height: 1.4em }
hr { margin: 10px 0px; height: 1px; background: #444; color: #444 } /* rule styling */
img {margin: 0 10px} /* all images styling */
img.right {float: right} /* right floating images */
img.left {float: left} /* left floating images */
/*-------------------------------------------------------------------------------*/
/* Modification done to basic theme */
#searchdiv {
margin-bottom: 10px;
margin-left: 5px;
}
h4, h5, h6 {
font-family: "Georgia", "Times New Roman", Times, serif;
font-weight: normal;
}
a, a:visited {
font-weight: bold;
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*font: bold 20px/1.1em "Trebuchet MS", "Verdana", sans-serif; }*/
h3.entrytitle {
padding: 0;
margin-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 1.1em;
}
h3.entrytitle a, h3.entrytitle a:visited {
color: #FFA200;
text-decoration: none;
}
h3.entrytitle a:hover{
color: #FFA200;
text-decoration: underline;
}
h3 a {
text-decoration: none;
border: 0px none;
color: #FFA200;
}
div .entrybody h3, div .entrybody h2{
margin-bottom:10px;
color:#B37100;
}
h3 a:hover {
text-decoration: none;
border: 0px none;
text-shadow: none;
color: #333;
}
.firstpost p.comments_link, .entrybody p.comments_link {
margin:0;
}
.firstpost {
background-color: #2E3233;
border: 1px solid #3e4243;
padding: 10px;
margin-bottom:15px;
background-image: url('images/latest.gif');
background-repeat: no-repeat;
background-position: right bottom
}
.entry{
background-color: #2E3233;
border: 1px solid #3e4243;
padding: 10px;
margin-bottom:15px;
color:#FFFFFF;
}
.arc {
border: 1px solid #3e4243;
background-color:#2E3233;
padding:10px;
color:#FFFFFF;
margin-bottom:15px;
}
.entrymeta {
font-size: 11px;
margin-bottom: 15px;
color:#FFFFFF;
}
.entry ul, .entry ol{
margin-left:30px;
list-style:disc;
margin-top:10px;
margin-bottom:10px;
}
.entry ul li, .entry ol li {
padding-top:5px;
line-height:1.5em;
}
/* Sidebar styling*/
#sidebar {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
background-color: #2E3233;
padding:5px;
color:#dddddd;
border: 1px solid #3e4243;
}
#sidebar h2 {
font-weight: bold;
text-transform: uppercase;
color: #dddddd;
font-size: 110%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #555;
margin-bottom: 10px;
}
#sidebar p{
margin: 7px;
color:#999999;
line-height: 1.4em;
}
#sidebar a, #sidebar a:visited {
color:#ffa200;
text-decoration:none;
}
#sidebar a:hover {
color:#ffa200;
text-decoration:underline;
}
#sidebar ul li {
list-style-type: none;
list-style-image: url('none');
margin-bottom: 15px;
margin-left: 10px
}
#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
margin-top: 3px;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0.5em;
padding-top: 0.1em;
padding-right: 0;
padding-bottom: 0.1em;
padding-left: 0;
list-style-type: none;
list-style-position: outside;
list-style-image: url('images/bull.gif');
}
/* Menu */
#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
float:left;
z-index:100;
width:100%; /* correction pour Opera */
padding-left: 180px;
background:url(pagebar_bg.gif);
height: 37px;
}
#menu dl {
float: left;
width:auto
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
height: 37px;
line-height: 37px;
}
#menu dt a {
color: #fff;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-size: 0.8em;
text-decoration: none;
font-weight:normal;
padding: 0px 10px 0px 10px;
display: block;
height: 100%;
border: 0 none;
}
#menu dd {
display: none;
border:#292929 px solid;
border-top: none;
width: auto;
position:absolute;
}
#menu li {
text-align: left;
background-color: #2C2C2C;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
-khtml-opacity: 0.65;
opacity: 0.65;
}
#menu li a {
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-size: 0.8em;
font-weight:normal;
white-space:nowrap; /* pour IE qui elargira les listes a la demande */
}
#menu li a:hover, #menu li a:focus{
background:#808080;
color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-weight:normal;
font-size: 0.8em;
}
#menu dt a:hover, #menu dt a:focus {
background:url('pagebar_bg2.gif');
}
#menu #active a
{
background-image: url('pagebar_bg4.gif');
}

ersatz

Résoluuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu!

gatsu35

Blablaté par Harko

Ya une chose que tu n'aurais jamais du faire :
div { padding: 10px 0;}
Ca c'est une énorme erreur, car le div est la balise de base en HTML, une balise sans valeur sémantique et donc qui sert un peu pour tout. Et lui rajouter un padding par défaut pour TOUT est une énorme erreur

ersatz

Hey t'aurai pas le dire plus tot
Non je déconne, mais en tout cas bien vu! parceque c'était ça la merde (entre autre) du thème :fou: !
D'ailleurs, même étant un noob total, je suis d'accord avec toi, et j'ai du mal à croire que le gars qui ait codé ce truc (y'a certains passages assez chaud) ait fait une boulette pareille.

merci en tout cas :hello:

gatsu35

Blablaté par Harko

Tu parles du menu ou du theme, car la CSS mise à part le menu est un peu pourridans certains coins

ersatz

ben tout, css, le xhtml, ou niveau de commandes php il me semblait qu'il gérait pas mal.
Dis moi si tu vois d'autres boulettes.

FORUM HardWare.fr

Programmation

HTML/CSS

Conflits entre menu et thème CSS

Sujets relatifs
[CSS] Bug d'affichage IE (encore)	Cherche une propriété CSS
question adressage menu	Menu de catégories
IE et CSS	RollOver Sur menu
[CSS] Blocs de textes qui reviennent à la ligne ???	[RESOLU] Menu déroulant en HTML
[CSS]	Lien fichier CSS
Plus de sujets relatifs à : Conflits entre menu et thème CSS

Page générée en 0.185 secondes