Gros probléme design IE

Avec le code CSS

Sujet résolu

26 juillet 2006 à 16:09:12

Je remerci par avance tout ceux qui vont me lire

Bonjour, j'ai passer pas mal de temps à faire un design assez simpa pour mon site, et le problémme, c'est que, sous IE...il foire, mais completement

En faite, j'avais du passer mes menus en block, et sous IE, il y avait un décalage, alors je l'ai enlevé, mais le background color ne va plus jusqu'au bout du texte dans le li, comment faire ?
Pareille pr les li strong ( mais eux ne sont pas centré non plus...)

Ensuite, pour le menu verticale, normalement les cellules li change de couleur avec un hover, et bien dans le menu verticale, ca marche pas, alors que dans le menu de gauche, ca marche

Ensuite, 2-3 problémme d'alignement....

Je vous donne le code, assez long

Citation : Code Xhtml

<!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" xml:lang="fr">
<head>
<link rel="shortcut icon" href="http://site.formol.free.fr/images/notes/favicon.ico"/>
<title>E-Tuning</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="e-tuning.css" />
</head>
<body>


<div id="en_tete">

</div>


<div id="menu_horizontal">
<ul>
<li class="bouton_gauche"><a href="index.php">Accueil</a></li>
<li class="bouton_gauche"><a href="membres.php">Membres</a></li>
<li class="bouton_gauche"><a href="dons.php">Faire un Don</a></li>
<li class="bouton_droite"><a href="compte.php">Se connecter</a></li>
<li class="bouton_droite"><a href="compte.php">Votre Compte</a></li>
<li class="bouton_droite">En ligne</li>

</ul></div>
<div id="mascotte"><img src="mamouth.png" alt="mascotte"/></div>

<div id ="menu_gauche">
<div id ="element_menu">

<ul>
<li><strong>Tuning</strong></li>
<li><a href="page.php?cat=Tutaux">Tutaux</a></li>
<li><a href="page.php?cat=Tests">Tests</a></li>
<li><a href="page.php?cat=Mods">Mods</a></li>
<li><a href="page.php?cat=watercooling">Watercooling</a></li>
<li><strong>Informatique</strong></li>
<li><a href="http://e-tuning.jeun.fr/">Hardware</a></li>
<li><a href="page.php?cat=Software">Software</a></li>
<li><a href="page.php?cat=Overclocking">Overclocking</a></li>
<li><a href="page.php?cat=Tests_info">Tests</a></li>
<li><strong>E-Tuning</strong></li>
<li><a href="http://e-tuning.jeun.fr/">Forum</a></li>
<li><a href="page.php?cat=Articles">Articles</a></li>
<li><a href="page.php?cat=Download">Download</a></li>
<li><span class="fin"><a href="proposer.phps">Proposer</a></span></li>
</ul>

<ul>
<li><strong>Partenaires</strong></li>
<li><a href="http://www.siteduzero.com">Le Site du Zéro</a></li>
<li><a href="http://www.jeuxvideo.com/">Jeux vidéo.com</a></li>
<li><a href="http://www.jamendo.com/fr/">Jamendo</a></li>
<li><span class="fin"><a href="partenaire.php">Être partenaire</a></span></li>
</ul>

</div>

</div>

<div id ="menu_droite">
<div id ="sondage">
<strong>Sondage</strong>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>

<div id ="chat">
<strong>Chat</strong>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

</div>
</div>



<div id="corps">
<h1>Bienvenue</h1><p>Un processeur est normalement prévu pour fonctionner à une fréquence donnée, c'est-à-dire celle à laquelle son fonctionnement est certifié. Il peut cependant être intéressant d'augmenter cette fréquence car c'est elle qui régit sa vitesse de calcul. Il est ainsi possible de gagner en puissance de calcul sans pour autant dépenser d'argent.

D'autre part, il est également possible d'augmenter la fréquence des bus de la carte-mère, c'est-à-dire la vitesse de communication entre le processeur et les autres éléments.

On nomme généralement "overclocking" ce processus d'augmentation de la fréquence du processeur (mot anglais qu'il est possible de traduire par "surfréquençage").

Malgré tout, ce processus n'est pas sans danger pour votre ordinateur. En effet, une augmentation de fréquence s'accompagne tout d'abord de l'élévation de la température des éléments qui la subissent. Il faut ainsi veiller à ce que les éléments touchés par cette élévation de température soient convenablement ventilés (le processeur est bien évidemment un élément qui subira une grande élévation de température, mais les autres éléments la subiront aussi...). La première chose à faire est donc d'ajouter des radiateurs / ventilateurs supplémentaires pour évacuer le surplus de chaleur.

D'autre part, les cartes additionnelles peuvent ne pas accepter une augmentation de fréquence trop importante (une carte PCI, par exemple, est initialement prévue pour tourner à 33 MHz).

Ainsi, dans le meilleur des cas votre système fonctionnera correctement. Il peut toutefois devenir instable ou se bloquer, auquel cas il suffit de revenir à la configuration précédente. Certains éléments pourraient même surchauffer et griller, auquel cas il faudrait les changer et le processus d'overclocking pourrait éventuellement revenir plus cher que de changer de processeur...

Comprendre les notion de fréquence

Pour comprendre l'overclocking, il faut effectivement connaître les notions de fréquence et les relations qui existent entre les fréquences de la carte-mère et du microprocesseur.

Il faut tout d'abord savoir comment les constructeurs déterminent la fréquence à laquelle le processeur tourne:
les processeurs fabriqués par un constructeur sont issus d'une même série de base. Cependant, à la fin de la production les processeurs subissent des tests de fréquence, c'est-à-dire que l'on soumet les processeurs à une fréquence donnée, puis on regarde si le processeur fonctionne de manière stable. Le processeur peut toutefois fonctionner à une fréquence plus élevée sans qu'on le sache, et c'est presque toujours le cas, car les fabricants pour assurer la qualité de leurs processeurs utilisent une grande marge de sécurité, et c'est sur celle-ci que l'on va empiéter lorsque l'on poussera le processeur dans ces derniers retranchements pour gagner des mégahertz, synonymes de puissance!
Ainsi, un Pentium 150 aura vraisemblablement peu de différences avec un Pentium 166.

Un processeur tourne à une vitesse plus élevée que la carte-mère, il existe donc ce que l'on appelle un coefficient multiplicateur (ou coefficient de multiplication) qui définit la vitesse relative du processeur par rapport à la carte-mère. Un coefficient de 2 signifiera donc: " le processeur tourne à une fréquence deux fois plus élevée que la carte-mère".<br/>
<a href="mailto:webmaster@e-tuning.info">FoRmOl</a></p>
</div>



<div id="pied_de_page">
<p>
Copyright © -<b> E-Tuning </b>- Toute reproduction totale ou partielle est interdite sans l'accord des auteurs<br/>
Nous contacter : <a href="mailto:webmaster@e-tuning.info">FoRmOl</a> -
<a href="mailto:neoblade1@hotmail.com">Neoblade</a>
</p>
</div>

</body>
</html>

et le code CSS ( j'ai du changer quelques truc pr eviter les espaces entre chaque celules sous IE, ect....

Citation : Code CSS

body {
margin : auto;
margin-top : 20px;
margin-bottom : 20px;
background-color : #e1fdf9;
font-family : "Trebuchet MS", Arial, serif;
}
#en_tete {
width : 760px;
height : 150px;
background-image : url("images/E-Tuning.gif");
background-repeat : no-repeat;
margin : auto;
margin-bottom:45px;
}
#menu_gauche {
float : left;
width : 190px;
margin-left:-30px;
margin-top: 3px;
}
#menu_droite {
float : right;
width : 150px;
margin-right:10px;
margin-top: 19px;
}
#menu_horizontal {
height : 30px;
margin: 1px;
background-color : #e9eefb;
border : 2px solid #6663cb;
font : 0.8em "Trebuchet MS";
color : #5d90b5;
}
#menu_horizontal ul {
list-style-type : none;
margin : 0;
padding : 0;
}
#menu_horizontal li {
padding : 0 0.5em;
line-height : 30px;
}
#menu_horizontal li.bouton_gauche {
float : left;
border-right : 1px dashed #6663cb;
}
#menu_horizontal li.bouton_droite {
float : right;
border-left : 1px dashed #6663cb;
}
#menu_horizontal a {
text-decoration : none;
padding : 0 0.5em;
color : #5d90b5;
}
#menu_horizontal li:hover
{
background-color : #e1fdf9;
color : #294f79;
}

#menu_horizontal a img {
border : none;
padding : 0 0.3em;
}
li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}

#element_menu li {
list-style-type : none;
margin : 0;
padding : 0;
border-top : 2px solid #6663cb;
border-left : 2px solid #6663cb;
border-right : 2px solid #6663cb;
height: 23px;
}

#element_menu ul
{
border-bottom: 2px solid #6663cb;
}

#element_menu a {
text-decoration : none;
color : #5d90b5;
padding-left : 1.3em;
background-color : #e9eefb;

}
#element_menu a:hover {
background-color : #e1fdf9;
color : #294f79;
}
ul strong {
font-size : 1.2em;
text-align : center;
text-decoration : underline;
color : #000000;
background-color : #d3d3d3;

}

#menu_droite strong
{
font-size : 1.2em;
text-align : center;

text-decoration : underline;
color : #000000;
background-color : #d3d3d3;
border-bottom:2px solid #6663cb;
}

#corps {
margin-left : 170px;
margin-right : 180px;
margin-bottom : 20px;
margin-top : 20px;
padding : 10px;
background-color : #e9eefb;
border : 2px solid #6663cb;
color : #5d90b5;
font-size: 1.1em;
}
#corps a {
color : #294f79;
text-decoration : none;
font-style : italic;
}
#corps a:hover {
color : #5d90b5;
text-decoration : underline;
font-style: italic;
}
#corps h1 {
color : #010058;
font-family : "Comic Sans MS", Arial, Verdana, "Arial Black", serif;
text-align : center;
}

#pied_de_page
{
margin-top: 20px;
clear: both;
color : #5d90b5;
margin: 1px;
padding:10px;
text-align:center;
background-color:#e9eefb;
border:2px solid #6663cb;/*Le cadre fera 2px , sera solid*/
}

#sondage
{
border:2px solid #6663cb;/*Le cadre fera 2px , sera solid*/

margin-bottom: 15px;
}

#chat
{
border:2px solid #6663cb;/*Le cadre fera 2px , sera solid*/

}

#mascotte
{
position: absolute;
top: 175px;
right: 44%;
}

Si vous arrivez à me sortir de ce problémme, ce serai G-E-N-I-A-L !

Je remerci tout ceux qui vont essayer de m'aider

k1mpeR

26 juillet 2006 à 16:20:19

Ta pas un screen ou URL, et utilise le zcode ( <code> ).

FoRmOl

26 juillet 2006 à 16:35:57

Pour le Z code, je le fait, mais dans l'apercu, ca ne change rien

Voila les photos : ( je precise qu'avant d'essayé d'adapter le design pr IE, mozilla marchait tres bien)

Pour mozzila :

http://img141.imageshack.us/img141/7872/mozillaqx5.jpg

Pour IE:
http://img160.imageshack.us/img160/2640/iequ1.jpg

Je te remerci par avance

PS: je ne peux pas passez d'URL car il n'est pas uploader car c'est la V2.0 de mon site

k1mpeR

26 juillet 2006 à 18:29:29

Pour les titre ne les met pas dans les liste mais met h1
Et puis tu met text-align: center;

FoRmOl

26 juillet 2006 à 18:44:54

EDIT: non!! Faut pas faire ca, ca rend invalide le document sur le W3C car on ne peut pas mettre de <h..> dans un <ul>
Pis ca faisait presque pareille en plus

Sinon, pour le hover en haut et le background imcomplet ?
En tout cas, je te remercie pour ta reponse, ca donne un peu d'espoir

ybouane

26 juillet 2006 à 18:56:01

Ok Je vais essayer de t'aider

FoRmOl

26 juillet 2006 à 19:09:29

Personnes n'a de solution ?

Sword

26 juillet 2006 à 19:12:44

Nan car on ne comprend rien a ton code.
Met ton code XHTMl entre les balises < code type="html"></code>
Met ton code CSS entre les balises < code type="css"></code>

scaler

26 juillet 2006 à 19:26:39

salut

La pseudo-classe hover ne fonctionne que sur la balise a sous IE.
Pour le fond qui ne vas pas jusqu'au bout, tu as deux choix :
-> Met le background sur la balise li.
-> Applique un display: block sur la balise a.

Dans tes menus, tu as le droit d'écrire par exemple :

<h2>Partenaires</strong></h2>
<ul>
<li><a href="http://www.siteduzero.com">Le Site du Zéro</a></li>
<li><a href="http://www.jeuxvideo.com/">Jeux vidéo.com</a></li>
<li><a href="http://www.jamendo.com/fr/">Jamendo</a></li>
<li><span class="fin"><a href="partenaire.php">Être partenaire</a></span></li>
</ul>

Ce sera plus joli.

bon courage.

ybouane

26 juillet 2006 à 19:31:56

pour centrer le texte tu fais

<center>Ton texte</center>

Pour mettre une couleur de font au menu il faus que tu face une couleur de fond ayu menu pas une couleur de font au texte

FoRmOl

26 juillet 2006 à 19:33:28

Alors, j'ai mis ce code pr le hover :

#menu_horizontal li a:hover
{
background-color : #e1fdf9;
color : #294f79;
}

Mais seulement le texte est affécté et non la cellule...

ybouane ca c'est pas valide Xhtml , mais merci quand même

EDIT :

et sinon, pr le menu, je peux pas mettre des <h2> car si tu regarde le code tu vois qu'il y a 3 sous titre

<ul>
<li><strong>Tuning</strong></li>
<li><a href="page.php?cat=Tutaux">Tutaux</a></li>
<li><a href="page.php?cat=Tests">Tests</a></li>
<li><a href="page.php?cat=Mods">Mods</a></li>
<li><a href="page.php?cat=watercooling">Watercooling</a></li>
<li><strong>Informatique</strong></li>
<li><a href="http://e-tuning.jeun.fr/">Hardware</a></li>
<li><a href="page.php?cat=Software">Software</a></li>
<li><a href="page.php?cat=Overclocking">Overclocking</a></li>
<li><a href="page.php?cat=Tests_info">Tests</a></li>
<li><strong>E-Tuning</strong></li>
<li><a href="http://e-tuning.jeun.fr/">Forum</a></li>
<li><a href="page.php?cat=Articles">Articles</a></li>
<li><a href="page.php?cat=Download">Download</a></li>
<li><span class="fin"><a href="proposer.phps">Proposer</a></span></li>
</ul>

et j'ai apliqué le background pr les liens, mais le background du titre, je fais comment ?

Ensuite, le hover du lien ne se met que sur le texte sous IE ( comme pr le menu horizontale )
et le sous titre des menus ne sont pas centré

ca me deséspere

scaler

26 juillet 2006 à 19:52:47

Yop

Tu ne maitrises pas encore assez les bases Xhtml et css.

<dl>
<dt><strong>Tuning</strong></dt>
<dd><a href="page.php?cat=Tutaux">Tutaux</a></dd>
<dd><a href="page.php?cat=Tests">Tests</a></dd>
<dd><a href="page.php?cat=Mods">Mods</a></dd>
<dd><a href="page.php?cat=watercooling">Watercooling</a></dd>
<dt><strong>Informatique</strong></dt>
<dd><a href="http://e-tuning.jeun.fr/">Hardware</a></dd>
<dd><a href="page.php?cat=Software">Software</a></dd>
<dd><a href="page.php?cat=Overclocking">Overclocking</a></dd>
<dd><a href="page.php?cat=Tests_info">Tests</a></dd>
<dt><strong>E-Tuning</strong></li>
<dd><a href="http://e-tuning.jeun.fr/">Forum</a></dd>
<dd><a href="page.php?cat=Articles">Articles</a></dd>
<dd><a href="page.php?cat=Download">Download</a></dd>
<dd><span class="fin"><a href="proposer.phps">Proposer</a></span></dd>
</dl>

Pour ce qui est des liens qui n'ont pas un background dimensionné, c'est parce que a est une balise de type inline.
Pour pouvoir lui donner des dimensions, dans le cas d'un menu horizontal, tu vas lui appliquer un float: left ou right, dans le cas d'un menu vertical, tu vas lui appliquer un display: block.

Pour centrer le texte, tu vas mettre un text-align center sur le conteneur de type block auquel appartient le texte : ul, div, p, etc.

@+

FoRmOl

26 juillet 2006 à 19:59:23

Houla, pas tout compris, mais tu à l'air d'etre sur que ce sois ca

tu pourré m'aider pour le css stp ?

et non, en effet, je maitrise pas tout le Xhtml encore ( comment ca ca se voit

)

Merci

FoRmOl

27 juillet 2006 à 12:54:43

personnes ne peux m'aider svp ?
je bloque completement

je vous remerci par avance

CampingDay

27 juillet 2006 à 19:48:36

On pourrais pas avoir le lien de ton site stp?

FoRmOl

27 juillet 2006 à 23:26:01

c'est la V2.0

je l'ai mise sur le site, mais c'est sensé être "secret"

c'est uen page que j'enleverai apres que vous l'ayais vu, mais le resultat devra etre pareille

http://www.e-tuning.info/e-tuning/design.html

En esperant que tu puisse m'aider

FoRmOl

28 juillet 2006 à 13:52:44

Personne ne peux m'aider un peu plus SVP ?

kubb

28 juillet 2006 à 14:57:41

Ta essayer avec un background color?

FoRmOl

28 juillet 2006 à 15:09:42

Oue, mais ca prends juste autour du lien

Sinon, pour le strong qui est dans le li, et bien c'est pareille, il ne va spas jusqu'au bout

har1bo

28 juillet 2006 à 18:11:49

Pour le background,essaie de definir la largeur,je pense que ça ira mieux

FoRmOl

28 juillet 2006 à 20:27:37

ha merci

mais je connais pas cette propriéter :s
tu peux me la dire stp ?
ce serait parfait

Riko

29 juillet 2006 à 1:38:28

Salut,

Citation : Pas de titre

le background color ne va plus jusqu'au bout du texte dans le li, comment faire ?

Supprimes background-color : #e9eefb; de #element_menu a

#element_menu a {
text-decoration : none;
color : #5d90b5;
padding-left : 1.3em;
/*background-color : #e9eefb;*//*on supprime le fond du lien*
}

Ajoutes le background-color : #e9eefb; à ton bloc #element_menu li

#element_menu li {
list-style-type : none;
margin : 0;
padding : 0;
border-top : 2px solid #6663cb;
border-left : 2px solid #6663cb;
border-right : 2px solid #6663cb;
height: 23px;
font-family:Serif;
background-color : #e9eefb;/*on met le bloc en couleur*/
}

Pour le centrage:

supprimes le padding left de element menu a

#element_menu a {
text-decoration : none;
color : #5d90b5;
/*padding-left : 1.3em;*/ /*a supprimer*/
background-color : #e9eefb;

}

Puis ajoutes text-align:center a ton bloc element menu li:

FoRmOl

29 juillet 2006 à 19:28:46

merci