Plusieurs problèmes : div, marge, espace (CSS)

Wmasters · Mars 12, 2008, 8:28

Bonsoir,

J’ai plusieurs problèmes dans mon site (en construction) :

l’affichage des blocs div se fait très mal sous FF alors que sur IE c’est parfait.
le logo n’est pas au même emplacement selon le naviguateur (IE/FF)
Decalage fond/titre dans une div

Voilà le code html :

Titre de l'astuce - Trucs et astuce @import "css/menu.css";

Accueil
Trucs & Astuces
Programmation
Guide d'achat
Vocabulaire

	</div>		
		
	<!--************************** Contenu **************************--> <div id="corps">

		<li>
                        <a href="#" title="#">Trucs & astuces
                        </a>
                    </li>
                    <li>
                        <a href="#" title="#">Categorie
                        </a>
                    </li>
                    <li>
                        <a href="#" title="#">Theme
                        </a>
                    </li>
                    <li>
                        <a href="#" title="#">Nom de l'astuce
                        </a>
                    </li>
                </ul>
                </div>

Titre de l'astuce

                                <!--*********** Zone de texte ********--> <div class="texte">
		<p>
			Introduction<br>
			IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroduction

IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroduction

		<h4>Solution n°1</h4>	
		<p>
			IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroduction

IntroductionIntroductionIntroductionIntroductionIntroduction

		<h4>Solution n°2</h4>	
		<p>
			IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrodu

IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrIntroductio
oductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductio
IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrIntroductio
oductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductio
IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrIntroductio
oductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductio
IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrIntroductio
oductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductio
IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntrIntroductio
oductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductio
IntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroductionIntroducIntroductio
tionIntroduction

                                <!--*********** Zone droite ********--><div class="droite_menu">

       <div class="element_menu">

       </div>   
       <div class="element_menu2">
           <h3>Les dernières astuces</h3>

           <ul>
               <li><a href="#">Lien</a></li>
               <li><a href="#">Lien</a></li>
               <li><a href="#">Lien</a></li>
               
           </ul>

       </div>

       <div class="element_menu3">
           <h3>Guide d'achat</h3>

           <ul>
               <li><a href="#">Lien</a></li>
               <li><a href="#">Lien</a></li>
               <li><a href="#">Lien</a></li>                 
           </ul>
       </div>

	<!--************************** Pied de page **************************--><div id="pied_de_page">
		<p>Copyright 2008, tous droits réservés</p>
	</div>

et le code CSS : ======================================

body
{
width:1050px;
margin:auto;
margin-top:60px;
margin-bottom:20px;
background-image:url("…/img_site/fond.png");
}

		/* L'en-tête */

		#en_tete
		{
			width:1050px;
			height:23px;
			background-repeat:no-repeat;
			margin-bottom:0px;
		}

		/* Le corps de la page */

		#corps
		{
			margin-left:0px;
			width:1050px;
			margin-bottom:20px;
			padding:5px;			
			color:#000000;
			background-color:#FFFFFF;
			background-image:url("../img_site/motif.png");
			background-repeat:repeat-x;				
			border:1px solid dodgerblue;
		}

		#corps h1
		{
                        color: #800080;
                        font-size: 20px;
                        font-weight: bold;
                        margin: 5px 5px 2px 5px;
                            margin-top:150px;
                            font-family:arial;
                            border-bottom: 2px solid #800080;

		}

		#corps h4
		{
			height:30px;
			background-image:url("../img_site/sous_titre.png");
			background-repeat:no-repeat;
			color:#800080;
                            font-family:arial;
			padding-left:20px;
			text-align:left;
                        font-size: 15px;
                        margin: 5px 5px 2px 5px;
		}

		#corps p
		{
			color:#000000;
                            font-family:arial;
			padding-left:10px;
			text-align:left;
                            font-size:10pt; line-height:1.1em ;
		}

.texte
{
background-color: #FFFFFF;
background-repeat: repeat-x;
border: 0px;
width: 785px;
padding-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
float:left;
}

.droite_menu
{
width: 250px;
height: 500px;
float: right;
background-color: #FFFFFF;
background-repeat: repeat-x;
border: 0px;
padding-top: 0px;
margin-bottom: 0px;

}
.element_menu
{
margin-top:0px;
width: 250px;
background-color: #FFFFFF;
background-repeat: repeat-x;
border: 0px solid dodgerblue;
padding-top: 0px;
margin-bottom: 0px;
background-image:url("…/img_site/fond_droit.png");
}

.element_menu h3
{
font-size: 15px;
color: #B3B3B3;
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
text-align: left;
margin-left:10px;
padding-top: 0px
}

.element_menu ul
{
list-style-image: url("…/img_site/picto_plus.bmp");
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
font-size: 13px;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
line-height:130%;
}

.element_menu2
{
margin-top:0px;
width: 250px;
background-color: #FFFFFF;
background-repeat: repeat-x;
border: 0px solid dodgerblue;
padding-top: 0px;
margin-bottom: 0px;
background-image:url("…/img_site/fond_droit.png");
}

.element_menu2 h3
{
font-size: 15px;
color: #B3B3B3;
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
text-align: left;
margin-left:10px;
padding-top: 0px
}

.element_menu2 ul
{
list-style-image: url("…/img_site/picto_fleche.bmp");
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
font-size: 13px;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
line-height:130%;
}

.element_menu3
{
margin-top:0px;
width: 250px;
background-color: #FFFFFF;
background-repeat: repeat-x;
border: 0px solid dodgerblue;
padding-top: 0px;
margin-bottom: 0px;
background-image:url("…/img_site/fond_droit.png");
}

.element_menu3 h3
{
font-size: 15px;
color: #B3B3B3;
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
text-align: left;
margin-left:10px;
padding-top: 0px
}

.element_menu3 ul
{
list-style-image: url("…/img_site/picto_crochet.bmp");
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
font-size: 13px;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
line-height:130%;
}

a:link { color: #3366CC ;text-decoration: none ;}
a:visited {color: #3366CC ;text-decoration: none ; }
a:hover { color: red ; text-decoration: none ; }

#racine li
{
float: left;
margin: 100px 5px 0px 0px;
padding: 3px 5px 0px 20px;
height: 20px;
background: url(…/img_site/picto_racine.bmp) no-repeat;
list-style: none;
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
font-size: 13px;
}

#logo_racine
{
float: left;
margin: 100px 5px 0px 0px;
padding: 3px 5px 0px 20px;
}

#pied_de_page
{
padding:5px;
text-align:center;
color:dodgerblue;
width: 1050px;
height: 50px;
background-color:#FFFFFF;
background-repeat:repeat-x;
border:1px solid dodgerblue;
font-family: Arial, “Arial Black”, “Times New Roman”, Times, serif;
font-size: 13px;
}

Et les sreens :
Sous Firefox :
http://images3.hiboox.com/vignettes/1108/brkag3kt.png
Sous IE :
http://images3.hiboox.com/vignettes/1108/0izwec6g.png

Merci d’avance
Edité le 12/03/2008 à 20:30

Arkados · Mars 12, 2008, 8:44

Ta page n’est pas valide selon les normes du W3C déjà: il manque l’encodage des caractères (assez grave pour un site francophone !).
Ajoute cette balise meta dans le header:

Avec ça de fait, il reste 13 erreurs {validateur W3C} La plupart sont des erreurs de syntaxe xhtml.

Quand ta page sera “valide XHTML 1.0 Transitional”, tu aura la garantie qu’elle s’affichera correctement dans tous les navigateurs dignes de ce nom.

Il faudra faire preuve de beaucoup de rigueur, la plupart des navigateurs respecteront à la lettre les normes W3C dans un futur assez proche. IE est extrêmement en retard sur les autres navigateurs sur ce point. C’est pour cela qu’il tolère à ce point les erreurs dans ta page.
EDIT: résolu, donc suppression de la page de mon ftp // remplacement du lien pour le vite de validation W3C.
Edité le 14/03/2008 à 21:46

Wmasters · Mars 12, 2008, 8:57

Merci j’ai rajouté la balise meta, j’avais complètement oublié.

Mais je comprends pas les erreurs. Les caractères ("&"…) ok mais le reste…(pour les blocs… je vois pas)

Wmasters · Mars 12, 2008, 9:09

Voilà en faite ce qui ne va pas :
http://images3.hiboox.com/vignettes/1108/xhe8aowd.png
J’espère avoir été assez clair
Edité le 12/03/2008 à 21:10

ketby · Mars 12, 2008, 11:49

Tu as plusieurs problème de synthaxe:
-Pour des interfaces multi-imbriqué, on n’utilise pas de balise

( c’est quoi cette manie de mettre des p à la place des div?)
-Ta structure d’imbrication n’est pas assez précise: Pense à une boite, qui contien une autre boite, qui en contien d’autres etc …

Vu le site que tu veux faire, tu dois absolument penser à encadré tout bloc par un autres. (aucun bloc ne doit etre seul, en dehors de toute bloc, concretement, sous la balise body, tu dois avoir un div, qui contien tous les autres, qui s’imbrique les uns les autres.)

-Ta synthaxe manque de rigueur, et ton code Css n’est pas correctement initialisé , il te manque un :

*{
padding:0;
margin:0;
font-size: 12px; // ou ce que tu veux;
font-familly: // celle que t’a décidé;
text-align:left ; // en standart pour que ie ne déplace pas tout pour rien.
}

Un dernier conseil, fait ton site pour qu’il soit compatible FF, et ensuite adapte le pour IE, sa marche bcp mieu dans ce sens la. (expérience faite)

Wmasters · Mars 13, 2008, 9:41

C’est bon j’ai fait tout ce que tu m’as dit, mais rien à faire sous FF le corps n’est pas extensible, le corps s’arrête comme si il n’y avait plus de div après

Titre de l’astuce

, alors les div continuent mais par dessus le corps. Que faire ?

ketby · Mars 13, 2008, 2:26

Bon, je te refais ton interface correctement dans l’après midi, je t’envoi sa ici ce soir vers 22h30.
Patiente jusque la

PS : je ne te ferais pas la gestion des couleurs, mais uniquement l’emplacement global des blocs ok ? il te faudra remettre les couleurs et la position exact des élément à jours.

A ce soir

Wmasters · Mars 13, 2008, 4:18

Merci c’est super sympa, je débute en CSS mais c’est pour le lycée.

_Raynor_1_1 · Mars 13, 2008, 5:48

En quoi ses

après ses <h*> sont mauvais ??

Ca par contre je ne connaissais pas : ça sert à quoi ? On peut faire la même directive sur non ?

Brass · Mars 14, 2008, 11:05

Salut

Est-ce que ta page devrait ressembler grossièrement à quelque chose comme ça ?

misc.as-o.ch…

Wmasters · Mars 14, 2008, 5:42

Whaou tu m’as même arrangé le code css et html ! Il est encore mieux. Franchement un très grand merci à toi !!

Brass · Mars 15, 2008, 1:21

Super, si ça te convient, ben c’est parfait :ane:

N’oublie pas d’enregistrer ton document en UTF8 depuis ton éditeur de code si tu garde la balise plutôt que d’utliser du ISO!

:icon_biggrin:

Wmasters · Mars 15, 2008, 1:45

ok et encore merci