[CSS ] probleme sur balises Li // résolu

Marsh Posté le 28-10-2004 à 09:55:54

jour',

bon
1) je suis une tourbe en CSS
2) en xhtml aussi
3) mais j'ai pas le choix

ceci etant, j'ai un soucis, quand j'ai ca :

<li style="background-image:url('./img/CG71/but_info.gif');background-repeat:no-repeat;"/>

ca marche bien, l'image apparait.

en revanche quand j'ai ca :

<li class="menu_gris"/>

avec :

.menu_gris {
background-image :url('./img/CG71/but_info.gif');
background-repeat:no-repeat;
}

ca marche pas, l'image apparait pas sur IE, et meme résultat sur firefox.

:'(

Message édité par ZuL le 28-10-2004 à 10:23:03

Reply

Marsh Posté le 28-10-2004 à 09:55:54

Reply

Marsh Posté le 28-10-2004 à 10:06:21

bizarre ..
t as une URL ?

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.

Reply

Marsh Posté le 28-10-2004 à 10:08:45

euh nan c'est en intranet

Reply

Marsh Posté le 28-10-2004 à 10:10:20

cela dit c'est la graphiste stagiaire qui a fait le bouzin et y'a 4 fichiers de styles differents et je me dis que y'a ptet des trucs qui se chevauchent.

théoriquement si on précise sur un élément class="fgdfg" ca le prend en priorité sur tout le reste nan ?

Reply

Marsh Posté le 28-10-2004 à 10:11:52

question con, mais on sait jamais...
dans le 2eme cas ta class est-elle définie dans un fichier externe, si oui, a tu bien fait un link vers ce fichier dans ta balise <head> ?

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World

Reply

Marsh Posté le 28-10-2004 à 10:12:44

ui.

sous firefox quand j'affiche les CSS je retrouve bien ma class.

je copie colle les sources, des fois que (et pas taper pour la cradocité de la chose, cai pas mon taf )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>[Copix] test</title>
<link rel="stylesheet" href="./styles/styles_cg71.css" type="text/css" />
<link rel="stylesheet" href="./styles/style_hp.css" type="text/css" />
<link rel="stylesheet" href="./styles/styles_menu.css" type="text/css" />
<link rel="stylesheet" href="./styles/style_info.css" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="./js/menu/javascript.js" />

<META NAME ="description" CONTENT="sdf">

<META NAME ="keywords" CONTENT="sdf"> </head>

<body>
<SCRIPT language=JavaScript src="js/javascript.js" type=text/javascript></SCRIPT>


<div id="stylebody">

<div id="bandeau"><img src="./img/CG71/up_info.jpg"></div >
<div id="bandeaulink"><a href="#"><img src=".\img\CG71\px_transp.gif" height=89 width=230 /></a></div>


<div id="container">
<div id="menugauche_hp">
<a href="#" class="menug"><br />Se rendre aux archives </a>
<ul id="" class="menuh"><li ><a href="#&menuId=20041026012140">hjghjghj</a></li><li ><a href="#&menuId=20041027121100">dddddd</a></li><li ><a href="#&menuId=20041027121106">ffffffffff dfg f g fdg df gdfg df</a></li></ul> </div>
<div id="contenu">
<div id="menuhaut">
<ul id="menudef" class="menuh"><li class="menu_gris"><a href="index.php?module=cms&action=get&id=2004102713231129&menuId=20041026125710">Informations pratiques</a><ul><li class=""><a href="#&menuId=20041026012140">hjghjghj</a></li><li class=""><a href="#&menuId=20041027121100">dddddd</a></li><li class=""><a href="#&menuId=20041027121106">ffffffffff dfg f g fdg df gdfg df</a></li></ul></li><li class=""><a href="index.php?module=cms&action=get&id=2004102713553229&menuId=20041026125726">Service des archives</a><ul><li class=""><a href="index.php?module=cms&action=get&id=2004102714041814&menuId=20041027121552">ffff</a></li><li class=""><a href="#&menuId=20041027121602">uuuu</a></li><li class=""><a href="#&menuId=20041027121606">llll</a></li></ul></li><li class=""><a href="index.php?module=cms&action=get&id=2004102714030066&menuId=20041026125744">Offre culturelle et pédagogique</a></li><li class=""><a href="index.php?module=cms&action=get&id=2004102714041814&menuId=20041026125757">Archives : <br/>mode d'emploi</a></li><li class=""><a href="index.php?module=cms&action=get&id=2004102714055885&menuId=20041026125813">Sources et Ressources</a></li><li class=""><a href="#&menuId=20040324024705">Administration</a><ul><li class=""><a href="index.php?module=admin&desc=admin&action=getAdmin&menuId=20040324024756">Administration du site</a></li><li class=""><a href="?module=copixheadings&desc=admin&menuId=20040324024908">Espace contribution</a></li><li class=""><a href="?module=newsletter&desc=admin&menuId=20040324024954">Gestion des newsletters</a></li><li class=""><a href="?module=profile&desc=admin&menuId=20040324025136">Gestion des droits</a></li><li class=""><a href="?module=users&desc=admin&menuId=20040324025210">Gestion des utilisateurs</a></li><li class=""><a href="?module=menu&desc=admin&menuId=20040324025044">Gestion des menus</a></li><li class=""><a href="?module=parameters&menuId=20040430092501">Paramètres</a></li></ul></li></ul>

<script type="text/javascript">

//<![CDATA[

initmenu('menudef');

//]]>

</script>

</div>
<div style="width: auto;"><h2>dfg</h2>fdgdfg</div><p><a href="index.php?version=1&id=2004102713231129&update=1&module=cms&desc=admin&action=newFromPage"><img src="./img/tools/update.png" alt="Modifier" /> Modifier</a></p> </div>
</div>


<div id="bas_hp">
<div id="drapeaux">
<a href="index.php?level=2&module=copixheadings"><img src=".\img\CG71\flag_uk.gif"></a> 
<a href="index.php?level=4&module=copixheadings"><img src=".\img\CG71\flag_de.gif"></a> 
<a href="index.php?level=3&module=copixheadings"><img src=".\img\CG71\flag_es.gif"></a> 
</div>
<div id="baslink"><a href="#" class="liensbas">Lettres de diffusion</a>  
<a href="#" class="liensbas">Plan du site</a>  
<a href="#" class="liensbas">Glossaire</a>  
<a href="#" class="liensbas">Droits et crédits</a>  
</div>
</div>

</div>
</body>

styles_cg71.css

/* styles CG71 génériques*/

body {
padding:0px;
margin: 0px;
spacing: 0px;
width:800px;
background-color: #fff;
color: #000000;
font-family:Arial;
font-weight:normal;
font-size: 0.7em;

}

a {
text-decoration:none;
color:#333333;
font-style:oblique;
}

a:hover {
text-decoration:none;
color:#777777;
font-style:oblique;

}

img {
border:0px solid;
padding:0;
}

/* styles des divs */

#bandeau {
margin: 0px auto;
top:0px;
left:0px;
spacing:0px;
width:800px;
height:89px;
z-index:0;
}

#bandeaulink {
position:absolute;
top:0px;
left:70px;
width:230px;
height:89px;
z-index:1;

}

#menuhaut {
margin:0px;
margin-top:10px;
}

#contenu {
margin-left:155px;
border:0px;
width:650px;
color:#000000;
}

#drapeaux {

margin-left:30px;
bottom:40px;
left:50px;

}

#baslink {
margin-left:280px;
margin-top:23px;
}

a.liensbas {

font-family:Arial;
font-weight:normal;
font-style:normal;
font-size: 0.9em;
color:#000000;
text-decoration:none;
}

a.liensbas:hover {

font-family:Arial;
font-weight:normal;
font-style:normal;
font-size: 0.9em;
color:#ffffff;
text-decoration:none;
}

/* styles menu gauche */

.menug {
color:#ffffff;
}

a.menug {
font-style:normal;
font-size:1.1em;
font-family:Arial;
color:#ffffff;
border-bottom:1px solid #ffffff;
text-decoration:none;
}

a.menug:hover {
color:#bbbbbb;
font-style:normal;
font-size:1.1em;
font-family:Arial;
text-decoration:none;
}

#menugauche_hp {
float: left;
width: 139px;
display:inline;
list-style-type: none;
}

/*menu haut */

ul.menuh {
/*list-style-type: none;*/
width: 100%; /* précision pour Opera */
}

.menuh li {
float: left;
}

.menuh a {
margin: 0 2px;
padding-left:25px;
width: 90px;
height: 25px;
display: block;
text-align: left;
font-style:oblique;
font-weight:bold;
text-decoration: none;
color: #000;
}

.menuh a:hover {
color:#555;
}

#auth_login_zone {
display:block;
}

.versement {
width:100%;
border:1px solid #ccc;
}

.versement td {
border:1px solid #ccc;
}

/* styles personnalises*/

.menu_gris {
background-image :url('img/CG71/but_info.gif');
background-repeat:no-repeat;
}

.menu_bleu {
background-image:url('./img/CG71/up_info.jpg');
background-repeat:no-repeat;
}

.menu_vert {
background-image:url("'./img/CG71/up_info.jpg');
background-repeat:no-repeat;
}

.menu_jaune {
background-image:url('./img/CG71/up_info.jpg');
background-repeat:no-repeat;
}

.menu_rouge {
background-image:url('./img/CG71/up_info.jpg');
background-repeat:no-repeat;
}

styles_menu.css

#menudef {
background:transparent;
padding: 0px;

border: 0px;

align: right;
margin: 0;
display:block;
text-align:left;
height:auto;
z-index:999;

font-size: 1em;
}

#menudef ul {
/*background-color: #ffffff;*/

margin-left:0px;
margin-top:-3px;

padding:0;

border:0;
display:block;
visibility:hidden;
width:100px;
z-index:999;
position:absolute
}

#menudef a {
/*background:transparent;*/
font:bold;
font-weight:bold;
text-align:left;
text-decoration:none;
color:#215d93;
padding-bottom:2px;
padding-top:2px;
display:block;
width:100px;
height:auto;
margin:0
}

#menudef a:hover {
/*text-align: right;*/
/*background-color: #ffffff;*/

}

#menudef ul a {
/*background:transparent;*/
background-color:#eeeee3;
font:normal;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
margin:0;
border-top:0;

border-right: 1px solid #000000;
border-left: 1px solid #000000;

width:130px;
height:auto
}

#menudef ul a:hover {
background-color:#eeeeee;
font:normal;
color:#215d93;
text-align: left;
padding-bottom:2px;
padding-top:2px;

width:130px;
height:auto;

}

#menudef li {
/*background:transparent;*/
padding-right:0;
padding-left:0;
padding-bottom:0;
padding-top:0;
margin:0;
border:0;

/*border-bottom: 1px solid #000000;*/

list-style-type:none;
width:100px;
}

#menudef li li ul{
margin-left:100px;
margin-top:-18px;
}

#menudef li ul {
width:140px;
border-top: 1px solid #000000;
border-bottom:#696969 1px solid;
}

#menudef li ul li {
width:140px;
}

#menudef li ul li ul{
}

Message édité par ZuL le 28-10-2004 à 10:17:50

Reply

Marsh Posté le 28-10-2004 à 10:13:33

ZuL a écrit :

euh nan c'est en intranet

bon déjà un <li> qui ne contient rien c'est n'importe quoi.
Les <li> c'est des éléments d'une liste
il doivent être entourer de balise d'ordre de liste
Pour simplement faire apparaitre une image, il ne faut pas utiliser <li>

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.

Reply

Marsh Posté le 28-10-2004 à 10:14:40

le fichier externe est-il dans le meme répertoire que ta page, dans le cas contraire, l'url de l'image doit etre mise en conséquence dans ton CSS

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World

Reply

Marsh Posté le 28-10-2004 à 10:15:51

Lorr Hyde a écrit :

bon déjà un <li> qui ne contient rien c'est n'importe quoi.
Les <li> c'est des éléments d'une liste
il doivent être entourer de balise d'ordre de liste
Pour simplement faire apparaitre une image, il ne faut pas utiliser <li>

nan mais ca contient des trucs c'etait juste pour pas tout coller le code

Reply

Marsh Posté le 28-10-2004 à 10:16:51

ZuL a écrit :

nan mais ca contient des trucs c'etait juste pour pas tout coller le code

alors donne ton code entier ...
Ha ... c deja fait

Message édité par Lorr Hyde le 28-10-2004 à 10:17:48

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.

Reply

Marsh Posté le 28-10-2004 à 10:16:51

Reply

Marsh Posté le 28-10-2004 à 10:17:15

Xav_ a écrit :

le fichier externe est-il dans le meme répertoire que ta page, dans le cas contraire, l'url de l'image doit etre mise en conséquence dans ton CSS

l'url de l'image est saisir par rapport a mon index.php.

l'arbo :

www
img
CG71
mon image
styles
mon style
index.php

Reply

Marsh Posté le 28-10-2004 à 10:17:30

Lorr Hyde a écrit :

alors donne ton code entier ...

au dessus

Reply

Marsh Posté le 28-10-2004 à 10:20:07

Xav_ a écrit :

le fichier externe est-il dans le meme répertoire que ta page, dans le cas contraire, l'url de l'image doit etre mise en conséquence dans ton CSS

c'etait la solution

(merci je t'aime :love: )

les images etaient donc dans ../img/...
et non dans ./

tain j'etais :
1) persuadé de l'avoir testé
2) persuadé que les styles etaient fusionnés sur le html et que les paths etaient relatif par rapport a la dite page html

Reply

Marsh Posté le 28-10-2004 à 14:51:02

content d'avoir pu te rendre service

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World

Reply

[CSS ] probleme sur balises Li // résolu

Sujets relatifs:

Leave a Replay