Sujet Précédent Sujet Suivant

Css : position / problèmes ie/firefox

Fermé
Flow31- Messages postés 84 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 10 avril 2013 - 20 juil. 2009 à 14:52
Flow31- Messages postés 84 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 10 avril 2013 - 23 juil. 2009 à 14:04
Bonjour,

J'espère que vous allez bien.... Moi très bien mais j'ai un problème ! un Gros : je débute css xD

J'avais fait une première version de mon site tout bien, mais lorsque je change mon css...ça redevient une catastrophe.

J'ai tout fait pour firefox (galère evidemment) et rien ne marche sur IE (pas grand chose du moins).
Je souhaiterai que le menu sur firefox reste "fixed" mais qu'il ne garde pas l'espace du haut lorsque l'on descend en bas.

je vais mettre le html et le css, le lien est : http://clan.tkt.free.fr/test.php


=================================================================
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Clan TkT</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
<meta name="Description" CONTENT="Site du Clan TKT de Warcraft 3 - The Frozen Throne" />
<meta name="Rating" CONTENT="Fan de jeux vidéos, joueurs de warcraft 3 - The Frozen Throne" />
<meta name="Rev" CONTENT="aurastyles@hotmail.com" />
<meta name="Subject" CONTENT="Page d'accueil du Clan TKT" />
<meta name="Keywords" CONTENT="Clan TKT, Warcraft 3, Frozen throne, TINQUIETE" />
</head>
<body>
<div id="conteneur">
<div id="en_tete">
<?php include ('haut.php'); ?>
</div>

<div id="session">
<?php include ('session.php'); ?>
</div>

<div id="menu">
<?php include ('menu.php'); ?>
</div>



<div id="corps">

<h1>Bienvenue sur le Site du clan TKT !</h2>
<p><br>
<?php
echo 'Il est ' . date('H\hi\m\i\n') .'<br /><br />';
?>
( ......................code php............)
<br>
<h2><a href="http://clan.tkt.free.fr/debutant.php" title="Tu veux t'améliorer ??">Par ici les débutants.</a></h2>
<br><br><br><br><br>
<a href="http://clan.tkt.free.fr/debutant.php" title="Tu veux t'améliorer ??">Par ici les débutants.</a>test<br><br><br><br><br>
</p>
</div>


<div id="pied_de_page">
<?php include ('bas.php'); ?>
</div>
</div>
</body></html>
========================================================




PUIS le code css :

===========================================================
body
{
margin: 2% 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */

#en_tete
{
width:822px;
height:82px;
border: 2px solid #ab4 ;
background: #dea ;
position:relative;
margin:2%;
}

#conteneur
{
/*position:absolute;*/
width: 96% ;/*975px*/
height:90%;
margin:2%;
border: 2px solid #ab4 ;
background: #fff ;
}

/*#corps, #menu{position:relative;height:100%}*/

#corps
{
position:relative;
border: 2px solid #ab4 ;
text-align: left ;
background: #dea ;
padding: 0 1% 0 5% ;
margin:2%;
bottom:20%;
height:100%;
margin-left:25%;
width:67%;
margin-top:4%;
}

#menu
{
position:fixed;
width:20%;
/*width:180px;*/
border: 2px solid #ab4 ;
background: #dea ;
margin-left:2%;
margin-top:2%;
}

#session
{
width:8%;
margin:2%;
border: 2px solid #ab4 ;
background: #dea ;
padding:1%;
position:absolute;
right:1.5%;
top:4.5%;
}

#pied_de_page
{
position:relative;
border: 2px solid #ab4 ;
background: #dea ;
margin : 2%;
}



/* -------------------------------------------------------------------------------------------------------------------------------------- */
h1#en_tete
{
border: 2px solid #ab4 ;
background: #dea ;
height: 258px;
background: url(apple.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
de tout à l'heure, attention à bien compresser vos images */


/* On ajoute un petit élément décoratif sur le côté
de la page et on crée un espace à gauche et à droite du corps */

div#corps h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image,
on décale le texte en fonction de l'image, on donne un couleur au texte et
on met une bordure basse */

div#corps h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on
ne donne pas d'image décorative cette fois ci */

div#corps p
{

text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié,
alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#corps a
{
color: #8a0 ;
}

div#corps a:hover
{
color: #9b2;
}
/* On met en forme les liens corps dans la page */

p#pied_de_page
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
et un léger espace entre le texte et les bords du pre */

pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
eux mêmes compris dans un pre */

pre span.comment
{
color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
utilisés pour les commentaires */


#menu .gris
{
color:gray;
}

======================================================

J'ai fait presque tous les tutoriels connus, et là je me retrouve toujours avec les mêmes problèmes, car je ne comprends pas...

Pouvez-vous m'aider s'il vous plait ?!

(le lien est : http://clan.tkt.free.fr/test.php (pour ceux qui sont perdus))

6 réponses

Réponse 1 / 6
Claire
20 juil. 2009 à 15:27
Une solution pour ce problème serait d'organiser ton site sous forme d'un tableau.
Après c'est peut être pas ce que tu veux mais ça peut simplifier les choses ...
Au lieu de bouger toutes tes divisions avec du css tu fais de ton site un gros tableau
0
Réponse 2 / 6
Utilisateur anonyme
20 juil. 2009 à 15:28
Hello

Beaucoup d'erreurs .. essaye de faire un code propre sous Firefox après tu verras pour IE tu utiliseras les commentaires conditionnels .. y'a aussi un problème sous Chrome et donc peut-être Safari.

Tous les <font color="xxxx"></font> <strong></strong> mais tout ça dans le CSS. Tu y verras plus clair et ce sera plus pratique.


Euh ? <h1>Bienvenue sur le Site du clan TKT !</h2> :-)


T'as un gros problème avec ce qui est ci-dessous en double dans ta page 

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>  
       <title>Haut de page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css">	   
	</head>
	<body>
	
	<img src="images/woot.jpg" alt="banniere du Clan TKT, Clan TKT, Clan TKT, Clan TKT, Clan TKT, Clan TKT, de Warcraft III (warcraft 3), Frozen Throne">
	
	</body>



Corrige déjà tout ça ;-)
0
Réponse 3 / 6
Flow31- Messages postés 84 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 10 avril 2013 10
21 juil. 2009 à 14:33
Merci boulepate62 et Claire.

Je pense avoir régler tous ces problèmes, j'ai bien remplacé les strong et les font par des span :), le problème du "DOCTYPE" en double est lui aussi réglé.
je re-mets que le css.

===================================================================

body
{
margin: 2% 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #ffb ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */

#en_tete
{
width:822px;
height:82px;
border: 2px solid #ab4 ;
background:#ffb;
position:relative;
margin:2%;
}

#conteneur
{
/*position:absolute;*/
width: 96% ;/*975px*/
height:90%;
margin:2%;
border: 2px solid #ab4 ;
background: #fff ;

}

/*#corps, #menu{position:relative;height:100%}*/

#corps
{
position:relative;
border: 2px solid #ab4 ;
text-align: left ;
background: #ffb ;
padding: 0 1% 0 5% ;
margin:2%;
bottom:20%;
height:100%;
margin-left:25%;
width:67%;
margin-top:4%;
}

#menu
{
position:fixed;
width:20%;
/*width:180px;*/
border: 2px solid #ab4 ;
background: #ffb ;
margin-left:2%;
margin-top:2%;
}

#session
{
width:8%;
margin:2%;
border: 2px solid #ab4 ;
background: #ffb ;
padding:1%;
position:absolute;
right:1.5%;
top:4.5%;
}

#pied_de_page
{
position:relative;
border: 2px solid #ab4 ;
background: #ffb ;
margin : 2%;
}
/* -------------------------------------------------------------------------------------------------------------------------------------- */
h1#en_tete
{
border: 2px solid #ab4 ;
background: #dea ;
height: 258px;
background: url(apple.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
de tout à l'heure, attention à bien compresser vos images */


/* On ajoute un petit élément décoratif sur le côté
de la page et on crée un espace à gauche et à droite du corps */

div#corps h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image,
on décale le texte en fonction de l'image, on donne un couleur au texte et
on met une bordure basse */

div#corps h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on
ne donne pas d'image décorative cette fois ci */

div#corps p
{

text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié,
alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#corps a
{
color: #8a0 ;
}

div#corps a:hover
{
color: #9b2;
}
/* On met en forme les liens corps dans la page */

p#pied_de_page
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
et un léger espace entre le texte et les bords du pre */

pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
eux mêmes compris dans un pre */

pre span.comment
{
color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
utilisés pour les commentaires */


#menu .gris
{
color:gray;
}

/*---------------------------------------------------------------------------*/

.site
{
color:#1111ff;
}

.clan
{
color:#aa5500;
}

.bot
{
color:#aa00aa;
}

.gras
{
font-weight: bold;
font-size:1.2em;
}

=====================================================================

Maintenant, je cherche à résoudre : pourquoi avec firefox : ca passe bien, c'est presque ce que je veux mais sur IE c'est l'horreur, et pas mal de monde utilise IE.

l'adresse du lien : http://clan.tkt.free.fr/test.php

Une idée ?!
0
Réponse 4 / 6
Claire
21 juil. 2009 à 15:03
ce genre de problème n'a pas de solution miracle...

- Soit tu fais des bidouillages de css pour que ça pase dans les deux cas,
- soit tu fais un html compact et sans ambiguitées (tableau )
- soit tu utilise deux fiches de style (que tu change avec une fonction javascript qui détecte la natre du navigateur)
- soit tu te pends par ta fenêtre mais ça fait un peu mal au début.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Utilisateur anonyme
22 juil. 2009 à 02:32
Ton problème est surtout les erreurs :-)

<br> = <br />
Quand tu utilises une image comme ton image dans haut pense à fermer la balise <img src="lien.pg" alt="blabla" />

Evite les majuscules vu que tu utilises XHTML 1.0 Strict..
<meta name="Description" Content="..." = <meta name="description" content="..."


Ensuite, tu as mis dans body text-align: center; ce qui cause le mauvais affichage de ton "menu". Enlève la, ça réglera déjà ça.

Toujours dans ton menu, au niveau de <h3> remplace

div#corps h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}

par
h3{text-align: center;line-height: 1.7em;}


Tu utilises une class element_menu qui ne sert à rien puisqu'elle est vide, suite aux modifications ci-dessous tu pourrais lui appliquer ceci. Mais l'utilisation d'un nouveau <div> n'est pas utile à mon sens. Idem pour les <h3> sont pas utiles.

.element_menu
{
margin-left: 8%;
}


A mon avis, suis l'avis de Claire et fais un tableau ce sera plus simple pour toi .. l'embriquage des <div> et mal fait de surcroit donc ça n'arrange rien, mais ce n'est pas irréalisable si tu veux continuer ainsi. ;-)
0
Réponse 6 / 6
Flow31- Messages postés 84 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 10 avril 2013 10
23 juil. 2009 à 14:04
Bonjour!

Après avoir résolu la /plupart/ des problèmes (Xhtml et css), il me reste un détail :

Est-il possible que mon menu, qui défile avec la page et qui descend comme je le souhaite, stop son défilement avant la fin de la page ?!

J'ai mis une marge en haut pour éviter que le menu soit sur l'entête mais je ne veux plus de cette marge lorsque le menu descend et qu'on va au fond de la page.

Pouvez-vous m'aider svp ?

j'ai viré la page test, maintenant, direction le site : clan.tkt.free.fr (sans les www)

Merci d'avance
0

Discussions similaires

trait horizontal avec du css
tipi75 -
alainpre -

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses