28173 sujets

CSS et mise en forme, CSS3

Appliquer commentaire conditionnel/hack css pour Opera? (la honte!...)

Pages :
Bonjour,

Comme chacu le sait, les commentaires conditionnels s'appliquent à IE.
Hors, phénomène très rare, je rencontre un problème de lecture de mon code css avec Opera, toutes version confondue. Sous IE6/IE/FF/Konqueror/safari, aucun problème.

Voici l'adresse du site en question (faites pas attention au code, j'ai pas trop nettoyé, c'est en construction..) :
http://www.intersport-luzardiden.com/index.php

Sous Opera, le "footer" (bandeau du bas contenant les mentions légales) se place beaucoup trop haut. J'ai fais pas mal d'essais de changement de css, pas mal de recherche, mais je n'ai pas trouvé de solution...


Voici le code css du footer :


#footer{
width:100%;
background:url(../images/nav2.gif) top left repeat-x;
height:100px;
position: relative;
left: 0px; bottom: 125px;
z-index: 2;
}


.footer2 {
position: absolute;
left: 875px; top:27px;
z-index: 4;
}


Pourriez vous m'apporter un peu d'aide, des pistes?
En vous remerciant par avance...

Merci!
Je pensais trouver quelqu'un qui pourrait m'aiguiller sur ce forum...

Auriez vous un autre forum a me conseiller pour poser ma question peut-être?
Modifié par lerouxjul (19 Dec 2007 - 16:48)
Modérateur
Salut,

Pour isoler Opera, tu peux passer par les media queries... Smiley smile

PS : Ce n'est pas fiable à 100%, il peut y avoir des interactions avec certains navigateurs de téléphone, PDA, il me semble... mais pas avec d'autres navigateurs pc/mac à l'heure actuelle.

PS2 : Il y a aussi la possibilité de passer par JS (ce qui veut donc dire que tu supposes que les utilisateurs ont JS actif) en ajoutant, par exemple, une classe CSS si le navigateur reconnait la propriété window.opera
Modifié par koala64 (19 Dec 2007 - 16:33)
Le problème du Js , c'ets que le navigateur opera peut se faire passer pour IE, ce qui fait que la condition ne sera pas détectée...


L'idée des media queries m'intéresse plus. Que proposerais tu comme media queries a insérer?

Sinon, tu crois que c'est un bug de mauvaise lecture de la part d'opera ou c'est plutôt que j'ai mal codé mon truc?

Car peut être qu'un changement dans le code css pourrait faire en sorte que tous les navigateurs comprennent la même chose?
lerouxjul a écrit :

Sinon, tu crois que c'est un bug de mauvaise lecture de la part d'opera ou c'est plutôt que j'ai mal codé mon truc?


Je n'ai pas de souci avec Opéra (XP, 9.22) pour ton site Smiley cligne
Modérateur
Igor a écrit :
Je n'ai pas de souci avec Opéra (XP, 9.22) pour ton site Smiley cligne
Bon bah déjà, c'est une bonne nouvelle. Smiley lol

Pour ma part, je n'en dispose pas là tout de suite donc il m'est impossible de voir.

lerouxjul a écrit :
Le problème du Js , c'ets que le navigateur opera peut se faire passer pour IE, ce qui fait que la condition ne sera pas détectée...
Il me semble que cette propriété est détectée malgré le changement d'identité... A vérifier quand même, je dis ça de tête... et je suis un peu dans le speed là... Smiley langue

lerouxjul a écrit :
Sinon, tu crois que c'est un bug de mauvaise lecture de la part d'opera ou c'est plutôt que j'ai mal codé mon truc?

Car peut être qu'un changement dans le code css pourrait faire en sorte que tous les navigateurs comprennent la même chose?
C'est ce qu'il faut privilégier oui. Je n'ai pas eu le temps de regarder mais si tu peux te passer de contournement, il va sans dire que c'est préférable. Smiley cligne

lerouxjul a écrit :
L'idée des media queries m'intéresse plus. Que proposerais tu comme media queries a insérer?
Ca dépend de ton code source ça... Tu peux cibler un élément et indiquer ses propriétés au sein des media queries afin d'isoler le code au simple conteneur concerné.
Si tu ne connais pas les media queries, je te conseille de faire une rapide recherche sur le forum; quelques exemples trainent dans les parages. Smiley smile
Igor a écrit :


Je n'ai pas de souci avec Opéra (XP, 9.22) pour ton site Smiley cligne


Si si, il y a réellement un problème avec opera, quelque soit la version d'ailleurs et quel que soit le système d'exploitation (même problème sur MAC)

J'ai testé sur plusieurs machines.

Tu dois avoir le même problème, car si tu ne l'a pas, c'est un nouveau mystère...



A gauche, opera Version 9.24 & a droite FF.
Le bandeau clair du bas, sous le contenu, il est placé trop haut sous Opera. Il doit être normalement placé comme a droite sous FF.

http://img139.imageshack.us/img139/3548/55812369yx6.jpg
Puis-je me permettre d'être un peu brutal, sans avoir le temps de m'attarder (mais il y a plein de gens ici pour approfondire) ?

La mise en page à base de tableaux et de positionnement ne serait pas, disons, aussi "curieuse", il n'y aurait aucun besoin de contourner quoi que ce soit dans aucun navigateur, à commencer par Opera. C'est un design global très élémentaire, en fait.

Là, j'ai un joyeux (si j'ose dire) mélange de tentative de mise en page CSS et de tableaux de présentation, inintelligible.

L'une et l'autre seraient aussi pertinents l'une que l'autre. Il arrive parfois qu'on les mélange. Mais pas de cette manière. Prenez un parti, nom de Zeus ! Smiley cligne
C'est le cms utilisé (joomla) qui rajoute des tableau pour afficher le contenu. Moi je n'ai que du css dans mon code...mais ce n'est pas cela qui pose problème, le bug reste bien présent a la lecture du code css, tableaux ou pas...
lerouxjul a écrit :
C'est le cms utilisé (joomla) qui rajoute des tableau pour afficher le contenu. Moi je n'ai que du css dans mon code...mais ce n'est pas cela qui pose problème, le bug reste bien présent a la lecture du code css, tableaux ou pas...

Est-il possible d'avoir une version en ligne du problème avec le code épuré ?
Voila le code html un peu épuré :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="http://www.intersport-luzardiden.com/templates/igrafy/css/template_css.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="highslide-container"></div>
<div class="kontener">
 <table class="opak" border="0" cellpadding="0" cellspacing="0">
 	<tr>
	<td class="bok">
	<img class="lewtop" src="http://www.intersport-luzardiden.com/templates/igrafy/images/lewtop.jpg" />
	</td>
	<td>
	<div class="toptlo"><div class="szukaj"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" /><input type="hidden" name="option" value="search" /></form>
	</div></div></td></tr></table>
</div>
	




<!--INTERIEUR-->
	
<div id="nav"></div>	
		
<div id="container">
	<div id="left">MENU<br><br><br><br></div>
	<div id="middle"><div class="hack">INTERIEUR<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div>
</div><!--container-->
		
<div class="clear"></div>


<div id="footer">
	<span class="footer2"><small style="font-family: Arial;">Site Web mis en place par&nbsp; <a href="http://www.igrafy.com" target="_blank">iGrafy</a><br><a href="http://www.intersport-luzardiden.com/content/view/1/2/" target="_top">Mentions légales</a></small>
	</span>
</div>

</body>
</html>


Et voila le code css du site de la page :

html {
	height: 100%;
	margin:0px;

}

body {
	height: 100%;
	margin:0px;
	padding: 0px;
	font-family: Helvetica, Sans Serif;
	font-size: 12px;
	color:#3B5179;
}

.opak{
	margin:0px;
	padding:0px;
	width:100%;
} 
 
 
.lewtop{
	float:left;
 
}

 
.toptlo{
	height:126px;
	background-image:url(../images/gortlo.jpg);
 	background-repeat: repeat-x;
 	overflow:hidden;
 
}

.topmenutlo{
	background-image:url(../images/topmenutlo.gif) ;	
	height:26px;
 	overflow:hidden;	 
}
 
 
.podmenu {
 
 
}

.bokprawtlo{
	height:173px;
	background-image:url(../images/prawboktlo.gif);
 	margin:0px;
	padding:0px;
	overflow:hidden;
}




.bok{
	width:675px;
}

.pathway{  
	font-size:12px;
}
 


.szukaj .inputbox{
	overflow:hidden;
	padding:0px;
	margin-top:2px;
 	margin-right:5px;
 	font-size:9px;	
	color:#999999;
}

.inputbox {
	margin-top:2px;
	border-width:1px; 
	border-color:#777777; 
	border-style:solid; 
	background-color:#F5F5F5; 
	color:#333333;
 	font-size:11px;
	padding:0px;
}

.button{ 
	margin-top:4px;
	border-width:1px; 
	border-color:#777777; 
	border-style:solid; 
	background-color:#F5F5F5; 
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
 	font-size:10px;
}

a{
	text-decoration:none;
	font-family: Arial, Helvetica, Sans Serif;
	font-size: 12px;
	color:#333399;

}

a:hover{
	text-decoration:underline;
}


.dolpasek{
	width:100%;
	background-image:url(../images/minipasektlo.gif);
	background-repeat:repeat-x;
	height:25px;
}



.componentheading{
	color:#123796;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	height:29px;
	font-weight: bold;
	background-image:url(../images/strzalka.gif);
	background-repeat:no-repeat;
	text-indent:35px;
    line-height:30px;
}

 
.contentpaneopen .contentheading{
	color:#123796;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	height:29px;
	font-weight: bold;
	background-image:url(../images/strzalka.gif);
	background-repeat:no-repeat;
	text-indent:35px;
}
 
.createdate{
	color:#FFBA00;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.small{
	color:#1942AB;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 11px;
} 
 


ul { 
	list-style-type: none;
	padding: 0; 
} 


.stopka{
	text-align:center;
	width:100%;
	font-size:10px;
	font-family: Helvetica, Sans Serif;
	color:#999999;
}


.szukaj{
	margin-top:20px;
	margin-right:20px;
	float:right;
}



.sectiontableentry1, .sectiontableentry2{
	margin:0px;
	padding:0px;
	text-align:left;
}

form{
	padding:0px;
	margin:0px;
}
.helper{
	width:1200px;
}








/* MAIN MENU */

a.mainlevel-top,a.mainlevel_active-top, a#active_menu-top.mainlevel_current-top{
font-size:16px;
color:#fff;
padding:12px 12px 10px 12px;
margin-right:3px;
font-weight:bold;
float:left;
text-decoration:none;
}

a.mainlevel-top:hover, a#active_menu-top.mainlevel-top, a.mainlevel_active-top, 
a#active_menu-top.mainlevel_current-top{
color:#191919;
background:url(../images/nav_active.png) top left repeat-x;
border:#53bdf4 1px solid;
border-bottom:none;
padding:12px 11px 10px 11px;
}

a.mainlevel{
border-bottom:#2b90b9 1px solid;
background:url(../images/mainlevel.gif) no-repeat;
background-position:3px 6px;
display:block;
}

a#active_menu.mainlevel{
background:#2B45A9 url(../images/active.gif) no-repeat;
background-position:3px 6px;}

a.mainlevel:hover{
background:#5787EC url(../images/active.gif) no-repeat;
background-position:3px 6px;}

a.mainlevel, a.sublevel{
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
padding:6px 0px 6px 10px;}

#left .moduletable table tbody tr td div{
background-color:#3D60C4;
border-bottom:#1881ac 1px solid;
padding:6px 0px 6px 10px;
}

a.sublevel:hover{
color:#000;
}

a#active_menu.sublevel{
color:#000;
}










/* CONTENEUR */


#nav{
margin-top:0px;
width:100%; position:relative;
background:url(../images/nav.jpg) top left repeat-x;
height:100px;}
#nav table{border-collapse:collapse;
z-index: 1;
}



#container{
width:100%;
position: relative;
left: 0px; top:-70px;
z-index: 3;
}


#left{
float:left;
margin-right:15px;
margin-left:15px;
padding-top:15px;
background:url(../images/h3_left1.jpg) top left repeat-x;
voice-family: "\"}\"";
voice-family:inherit;
overflow:hidden;
width:200px;
}

html>body #left{
width:200px;
}

#left .moduletable, #left .moduletable-grey, #right .moduletable, #right .moduletable-grey{padding:10px; margin-bottom:10px;}

#left .moduletable h3, #left .moduletable-grey h3, #right .moduletable h3, #right .moduletable-grey h3{
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
padding:12px 6px;
}

/*TITRE DES MODULES OU MENUS*/
#left .moduletable h3{margin-top:-15px;}

#left .moduletable{
background-color:#1E3296;
color:#fff;}

#left .moduletable a{color:#fff;}

#left .moduletable-grey{
background-color:#5787EC;}

#left .moduletable-grey h3{
color:#5787EC;}

#left h3, #right h3{
color:#fff;
font-family:"trebuchet ms", verdana, Arial, Helvetica, sans-serif;
margin:0;}




#middle{
float:left;
border:#1e3296 1px dashed;
background:#ffffff url(../images/bg.jpg) top left repeat-x;
width:600px;
}


#middle .hack{
padding-top: 14px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 12px;
}





.clear {
	clear: both;
}


#footer{
width:100%;
background:url(../images/nav2.gif) top left repeat-x;
height:100px;
position: relative;
left: 0px; bottom: 125px;
z-index: 2;
}


.footer2 {
position: absolute;
left: 875px; top:27px;
z-index: 4;
}
J'ai l'impression que tous ce code à calmé vos ardeurs...

Vous ne voyez pas pourquoi ce satané Opera comprend mal ce code compris par tous les navigateurs...

Smiley smile Smiley biggrin Il faudrais une loi qui impose FireFox comme unique navigateur... Smiley smile Smiley biggrin Smiley langue il n'y a vraiment pas photo, je n'ai jamais eu le moindre souci avec FF... Smiley smile Smiley biggrin Smiley langue
Modifié par lerouxjul (19 Dec 2007 - 21:04)
lerouxjul a écrit :
Il faudrais une loi qui impose FireFox comme unique navigateur... Smiley smile Smiley biggrin Smiley langue
Ça ressemblerait méchamment à une dictature Smiley biggol !
Heyoan a écrit :
Ça ressemblerait méchamment à une dictature Smiley biggol !


oui, mais ce serait tellement plus simple...
Et puis une dictature sans billou, je dis pas non... Smiley langue
Bon, j'ai bien envie d'essayer de résoudre le problème avec les "media queries" car j'aimerai bien apprendre comment cela fonctionne et a quoi cela sert.
J'ai fais pas mal de recherches mais je n'ai pas trouvé grand chose...

Apparemment ce serait un style de commentaire conditionnel qui ne s'appliquerait qu'a Opera...

Auriez vous un lien vers un tuto pour que j'essaie de faire qulque chose avec les "media queries"...il n'y a rien sur la faq de alsacreations...
Modérateur
bonjour,

oups la , non , ce n'est pas la solution !

Rapidement :

css incoherent et trop surchargé.
En particulier trop de position relative pour rien , etonnant qu'il n'y est pas plus de problémes que ça .

trop de div Smiley smile (il me semble que joomla permet d'editer en ligne les templates , l'architecture html serait donc modifiable ...)

le div#nav , pourrait etre enlevé ou au mis en display: none; pour ne pas avoir a faire remonter le #container en decalage visuel et relatif ... par exemple .


Un margin-top:-70px; au lieu du top:70px; a #container et un bottom:65px au de 125px ; a #footer sembleraient remettre opera et FF d'accord.

Mais ce n'est pas la solution a garder !

La solution est de reprendre a tête reposer toute la partie css qui positionne et dimensionne dans le flux chacun de tes elements , en gros , ne garder que les mise en forme de texte , couleur et fond . jeter le reste.

sinon , joomla , c'est pas un peu surdimensionné comme solution pour ce genre de site , le theme(template) de base utilisé ne vaudrait-il pas d'etre changé si l'edition est trop compliqué ?

En tout cas bon courage et essaie de ne pas surchargé le css pour compensé les mauvais choix , la mise en forme : feuilles de style en cascade Smiley cligne .

GC
joomla , n'est pas totalement idot comme solution car je compte ensuite y inserrer des modules que j'ai déja developpé/hacké pour Joomla donc c'est plus simple pour moi.


Sinon, merci beaucoup, j'ai fais tes modifs et je crois que tu as vu juste sur le problème...J'en conclu l'inverse que ce que j'ai pu lire...qu'il vaut mieux éviter les position relative et favoriser les margin négatifs?
Je croyais que IE 6 n'aimait pas du tout les margin/paddings négatifs...

Sinon, je n'ai jamais bien compris l'intérêt du "display: none;".
Je l'ai mis dans le div #nav... Quel en est l'intérêt dans ce cas précis.

Sinon, le problème de décalage du bandeau #footer du bas sous Opera est solutionné, par contre, un nouveau problème apparait comme tu peux le voir sur le site (et il apparait sur tous les navigateurs cette fois) : l'ordre de superposition des div n'est plus bon et le #footer est passé par dessus de #container malgré l'utilisation des z-index...

Comment y remédier...?
Modifié par lerouxjul (20 Dec 2007 - 11:50)
Autant pour moi, j'avais oublié d'associer une propriété de positionnement ("relative", "absolute" ou "fixed") pour le z-index, voila pourquoi cela posait problème. Tout semble bon maintenant... je fais quand même des tests suur plusieurs navigateurs...

Sinon, je n'ai jamais bien compris l'intérêt du "display: none;".
Est ce que vous pourriez m'expliquer l'intérêt de la rajouter dans #nav ?
Pages :
Sujet clos
Aller à