28221 sujets

CSS et mise en forme, CSS3

En suivant les conseils qui m'ont été donnés ici j'ai fait de beaux menus qui marchent.
Qui marchent sur tous les navigateurs Mac (y compris IE). Qui marchent sur Firefox PC, mais qui sont en désordre sur IE6 PC.
Le désastre est visible ici :
http://www.quanta-tech.com/General/modele1.php

J'ai certainement du louper quelque chose, mais après avoir passé le WE dessus...

Si ça ennui pas trop voici mon code CSS :


/* ceci concerne un menu horizontal placé à gauche à 20 px du bord/*

body {
	margin: 0; 
	background-color: #ffffff; 
	font-family: arial, helvetica, verdana, sans-serif; 
	font-size: 1em; 
	}
	
.chapitremenu { 
	color: #d2691e; 
	font-weight: bold; 
	font-size: 0.85em; 
	line-height: 50%; 
	text-align: left 
	}
	
#navigation ul    { 
	text-align: left; 
	text-indent: -20pt; 
	list-style-type: none; 
	float: left; 
	width: 100px 
	}
	
#navigation2 ul  { 
	text-align: left; 
	text-indent: -20pt; 
	list-style-type: none; 
	float: left; 
	width: 100px; 
	margin-top: -15px; 
	}
	
#navigation3 ul { 
	text-align: left; 
	text-indent: -20pt; 
	list-style-type: none; 
	float: left; 
	margin-top: -15px; 
	width: 100px 
	}
	
#navigation li { 
	float: left; 
	}
#navigation2 li { 
	float: left; 
	}
#navigation3 li { 
	float: left; 
	}
#navigation a { 
	margin: 0 2px; 
	width: 100px; 
	height: 15px; 
	float: left; 
	font-weight: normal; 
	display: block; 
	font-size: 0.65em; 
	text-align: left; 
	border: 0; 
	color: purple; 
	text-decoration: none; 
	background: #ffffff;
	}
	
#navigation2 a { 
	color: purple; 
	font-weight: normal; 
	font-size: 0.65em; 
	text-decoration: none; 
	background-color: #ffffff; 
	text-align: left; 
	float: left; 
	margin: 0 2px; 
	border: 0; 
	width: 100px; 
	height: 15px; 
	display: block 
	}
	
#navigation3 a { 
	color: purple; 
	font-weight: normal; 
	font-size: 0.65em; 
	text-decoration: none; 
	background-color: #ffffff; 
	text-align: left; 
	float: left; 
	margin: 0 2px; 
	border: 0; 
	width: 100px; 
	height: 15px; 
	display: block 
	}
	
#navigation a:hover { 
	background: #ffffff; 
	color: #d3691e;
	}

#navigation2 a:hover { 
	color: #d2691e; 
	background-color: #ffffff 
	}
	
#navigation3 a:hover { 
	color: #d2691e; 
	background-color: #ffffff 
	}


Et le HTML qui va avec :


<div class="menugauche" title="summary site">
		<div id="navigation" title="Acousto-optic products">
		<ul>
		<p class="chapitremenu">Acousto-Optic</p>
		<li><a href=".."> Modulators</a></li>
		<li><a href=".."> Deflectors</a></li>
		<li><a href=".." target="_self"> Frequency Shifters</a></li>
		<li><a href=".." target="_self"> Tunable Filters</a></li>
		<li><a href=".." target="_self"> Polychromatic AOM</a></li>
		<li><a href=".." target="_self"> Q-Switches</a></li>
		</ul></div>
		<div id="navigation2" title="Radio-Frequency products">
		<ul>
		<p class="chapitremenu">RF drivers</p>
		<li><a href=".." target="_self"> Fixed Frequency</a></li>
		<li><a href=".." target="_self"> Variable Frequency</a></li>
		<li><a href=".." target="_self"> Power Amplifiers</a></li>
		<li><a href=".." target="_self"> Polychromatic AOM</a></li>
		<li><a href=".." target="_self"> Q-Switches</a></li>
		</ul></div>
		<div id="navigation3" title="Services">
		<ul>
		<p class="chapitremenu">Services</p>
		<li><a href="" target="_self"> Custom design</a></li>
		<li><a href="" target="_self"> Catalogs download</a></li>
		<li><a href="" target="_self"> Company info</a></li>
		<li><a href="" target="_self"> Contacts</a></li>
		</ul></div>
		</div><!--ferme menu gauche-->

Merci si quelqu'un peut m'aider.

Hubert91
Modifié le 01 Feb 2005 - 10:52
Deux choses m'échappent, là.

La première est que ta page http://www.quanta-tech.com/General/modele1.php présente un beau menu... vertical.

(Pas beau dans IE6.0, effectivement, en raison de problèmes de text-indent inutiles, a priori)

La seconde, c'est:

		<link href="../CSSNew.css" rel="stylesheet" media="screen">
		<style type="text/css" media="screen"><!--
--></style>
				<csimport user="../../QuantaTechsite.data/Composants/TeteCSS.html" occur="8">
			<style type="text/css" media="screen"><!--#calque1   { color: white; font-style: normal; font-weight: 500; font-size: 11px; line-height: 120%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, Sans-Serif; position: absolute; top: 140px; left: 45px; width: 229px; height: 48px; visibility: visible; display: block }
#calque2 { color: purple; font-style: italic; font-size: 14px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, Sans-Serif; position: absolute; top: 208px; left: 42px; width: 450; height: 10px; visibility: visible; display: block }
--></style>
			<link href="../CSSNew.css" rel="stylesheet" media="screen">
		</csimport>


... peut-être en rapport avec:

<meta name="generator" content="Adobe Golive 6">


Bref, il faudrait déjà résoudre ce petit problème d'humeurs incompatibles entre HTML et CSS d'une part, et ton outil d'autre part Smiley cligne
Administrateur
Salut,

En passant, aurais-tu l'obligeance d'éditer ton post et d'y mettre les balises [ CODE] ? Le texte est actuellement illisible et ne donne pas très envie de s'y investir.

Tu en profiteras aussi, j'espère, pour modifier ton titre et de rendre plus explicite ton problème, car "Menu encore" n'est pas très significatif, tu ne trouves pas ?
Psst ? Raphaël ? Je peux te faire un aveu ?
Je préfère de très loin quand les gens n'utilisent pas le bitonio à code : au moins, on peut copier-coller leur code sans se retrouver avec des lignes vides dans tous les coins Smiley biggol

(Ces fichus <br /> n'ont strictement rien à faire dans les éléments <pre>, Nom de Zeus !)

Smiley cligne
Administrateur
Laurent Denis a écrit :
Psst ? Raphaël ? Je peux te faire un aveu ?
Je préfère de très loin quand les gens n'utilisent pas le bitonio à code : au moins, on peut copier-coller leur code sans se retrouver avec des lignes vides dans tous les coins Smiley biggol

(Ces fichus <br /> n'ont strictement rien à faire dans les éléments <pre>, Nom de Zeus !)

Smiley cligne


Lorsque le message est interprété, il faut bien signifier les sauts de ligne.
<-- là je viens de faire un saut de ligne. Dans la base de donnée, il est représenté par un "\n" (caractère d'échappement).
Pour le restituer dans le code, il faut transformer le \n en <br> pour aller à la ligne. Ça me paraît inévitable et le Hub fait ainsi aussi.

Le problème est que chez nous, par mesure de sémantique dans les codes, nous utilisons <pre> et c'est pour cela que ça pose des problèmes (le Hub utilise un <div>).

Il faut peut-être effectivement revoir ce point et utiliser un bête <div> avec une police à châsse fixe

On est en train de disserter dessus en interne.
Je pense qu'on va choisir la solution adoptée ailleurs, c'est à dire faire un <div class="code"> plutôt qu'un <pre>.
C'est un peu dommage, mais on va devoir en arriver là Smiley decu
Raphael a écrit :
Le problème est que chez nous, par mesure de sémantique dans les codes, nous utilisons <pre> et c'est pour cela que ça pose des problèmes (le Hub utilise un <div>).


Heu... Par mesure de présentation, veux-tu dire ? Car c'est le seul effet du <pre> ici, comme dans la quasi-totalité des cas. De la bonne présentation, certes, utile dans la structure et tout à fait sémantique (si, si, j'ai bien écris "présentation sémantique")... mais de la pure présentation tout de même Smiley cligne
Administrateur
Laurent Denis a écrit :


Heu... Par mesure de présentation, veux-tu dire ?
Oui en fait il s'agit plus de présentation qu'autre chose, nous devrions en fait utiliser des éléments comme <code> ou <samp>

(désolé pour le Hors Sujet)
Seul Laurent Denis m'ayant répondu sur le fond, j'ai tenu compte de ses remarques. J'ai viré les text-indent négatifs et j'ai réglé mes problèmes avec mon outil comme il le dit avec élégance !
Il n'en reste pas moins que le menu est décalé vers le centre d'environ 40px sur les navigateurs normaux (Mac et PC) et presque le double sur IE6 PC.
J'ai remarqué que les menus présentés en exemple sur ce site dans les tutos subissaient le même sort : 40 px vers la droite sur tous les navigateurs.
Il doit donc y avoir deux choses :
- un retrait automatique de <ul> d'environ 40 px (si mon souvenir est bon c'est pas définition) : est-il possible de l'annuler ?
- un bug dans mon code qui s'ajoute à ce retrait automatique dans IE6 et je vois pas où.
Si vous pouviez me répondre sur <ul> je verrai si je parviens à trouver mon bug. Une div mal fermée ou un emboitage inespéré ?

Merci et désolé pour le bruit.
Administrateur
Hubert91 a écrit :
Il n'en reste pas moins que le menu est décalé vers le centre d'environ 40px sur les navigateurs normaux (Mac et PC) et presque le double sur IE6 PC.
Il doit donc y avoir deux choses :
- un retrait automatique de <ul> d'environ 40 px (si mon souvenir est bon c'est pas définition) : est-il possible de l'annuler ?

Hello,
A priori - comme tu n'as rien spécifié au niveau des marges internes et externes de tes listes - il s'agit à mon avis d'un classique problème de marges/padding par défaut sur <ul> et <li>.
As-tu pensé à passer, comme cela est vivement conseillé, sur la méthodologie à suivre ? --> http://forum.alsacreations.com/topic.php?fid=4&aid=18

a écrit :
J'ai remarqué que les menus présentés en exemple sur ce site dans les tutos subissaient le même sort : 40 px vers la droite sur tous les navigateurs.

Ça, c'est tout simplement parce que les marges du document (body) ne sont pas les mêmes selon les navigateurs (suivre la méthodologie également pour ce point). Il suffit là aussi de préciser les margin/padding sur le <body>.
Merci Raphael, je crois que je vais parvenir à régler mon problème avec ce que tu m'as envoyé. Je vais lire tout ça et demain matin je pense pouvoir mettre avec joie : résolu !

Bonne soirée.

Hubert91