|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1430
Localisation: Aube
|
 Posté le : Mar Nov 27, 2007 12:42 Sujet du message: [CSS] Je haie Firefox... |
|
|
Bonjour
Je rencontre un problème avec FF (v2.0.0.10) que je ne rencontre jamais avec IE (qui lui fonctionne de manière "logique", en tout cas pour moi  ) avec les alignements dans les DIV.
Exemple ici => -http://www.c@l0rifuge-beg@ud.fr
(message édité : Google est impressionnant... et WRI effrayant )
Le code CSS :
| Code: |
/* Définition du style définissant l'encadrement du contenu */
.begaud-box {
witdh:750px;
margin:0;
}
.begaud-entete {
width:750px;
margin:0;
padding:0;
background: url(fond_01.gif) no-repeat top left;
}
.begaud-content {
width:750px;
margin:0;
padding:0;
text-align:center;
background: url(fond_02.gif) repeat-y top left;
}
.begaud-contenu {
width:660px;
position:relative;
clear:both;
display:block;
text-align:justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.begaud-bas {
width:750px;
background: url(fond_03.gif) no-repeat top left;
margin:0;
padding:0;
}
|
Et le code HTML :
| Code: |
<div align="center">
<div class="begaud-box">
<div class="begaud-entete"><img src="images/is_single_pixel.gif" height="46" width="1"></div>
<div class="begaud-content">
<div class="begaud-contenu">
<!-- HAUT DE ZONE DE CONTENU -->
ici mon contenu
<!-- BAS DE ZONE DE CONTENU -->
</div>
</div>
<div class="begaud-bas"><img src="images/is_single_pixel.gif" height="54" width="1"></div>
</div>
</div> |
Je n'arrive PAS à aligner correctement mon contenu, ça commence à me gonfler grave 
Et je ne vois pas où est le problème  ; il y a aussi un soucis par rapport au décalage entre les DIV d'entête et de bas d'encadrement, qui sont une fois bien affichés, une fois pas 
Sous IE aucun soucis.
Une idée ?...
Dernière édition par cedric_g le Mar Nov 27, 2007 17:09; édité 1 fois |
|
| |
|
 |
chtipepere
WRInaute impliqué
Inscrit le: 08 Jan 2004
Messages: 466
|
| Posté le : Mar Nov 27, 2007 12:51 Sujet du message: [CSS] Je haie Firefox... |
|
|
Quelle doctype utilise-tu?
Peux-tu poster les 5 permières lignes de ton HTML (doctype + début du head, en conservant les sauts de lignes)?
Merci |
|
| |
|
|
chtipepere
WRInaute impliqué
Inscrit le: 08 Jan 2004
Messages: 466
|
| Posté le : Mar Nov 27, 2007 12:57 Sujet du message: [CSS] Je haie Firefox... |
|
|
Je n'étais pas allé voir le site.
Pour répondre à ta question, je dirais que Firefox se comporte tout à fait normalement, et que IE fonctionne en quirks mode, il ne respecte donc pas correctement les propriétés CSS.
Moi je dirai : passe en DOCTYPE strict, et ajuste ensuite les décalages.
Enfin, ce n'est que mon avis...
Dernière édition par chtipepere le Mar Nov 27, 2007 12:57; édité 1 fois |
|
| |
|
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1430
Localisation: Aube
|
| Posté le : Mar Nov 27, 2007 12:57 Sujet du message: [CSS] Je haie Firefox... |
|
|
Merci pour ta réponse
Je suppose que c'est cela que tu veux ?
| Code: |
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="begaud.css" rel="stylesheet" type="text/css"> |
Je n'ai pas de doctype , c'est grave ? |
|
| |
|
|
nexxen
WRInaute discret
Inscrit le: 30 Déc 2004
Messages: 68
|
| Posté le : Mar Nov 27, 2007 13:02 Sujet du message: [CSS] Je haie Firefox... |
|
|
Essaye de donner une valeur nulle aux marges de ton H1 et du paragraphe en pied de page, ça devrait résoudre le pb.
Et pour rejoindre chtipepere, utilise un doctype valide, ne mélange pas HTML et XHTML et abandonne les balises et attributs obsolètes du style <div align="center">...FF et toi se sera pour la vie  |
|
| |
|
|
moktoipas
WRInaute accro
Inscrit le: 29 Juin 2004
Messages: 1827
Localisation: Nantes
|
| Posté le : Mar Nov 27, 2007 13:08 Sujet du message: [CSS] Je haie Firefox... |
|
|
je vois qu'il y a des spacer gif dans donc code, ca sert a rien, puisque c'est pour "spacer" des div alors que tu peux faire "height".
position:relative;
clear:both;
display:block;
ces troi ligne la servnet a rien (la prmeiere c'est la valeur par defaut pour les div), la second ne sert que si tu as qqch en float, la troisieme c'est aussi par defaut. |
|
| |
|
|
metropoway
WRInaute occasionnel
Inscrit le: 03 Mar 2004
Messages: 127
|
| Posté le : Mar Nov 27, 2007 13:10 Sujet du message: [CSS] Je haie Firefox... |
|
|
Moi, je hais I.E
Très peu de soucis avec FF alors qu'avec I.E... |
|
| |
|
|
moktoipas
WRInaute accro
Inscrit le: 29 Juin 2004
Messages: 1827
Localisation: Nantes
|
| Posté le : Mar Nov 27, 2007 13:11 Sujet du message: [CSS] Je haie Firefox... |
|
|
| moktoipas a écrit: |
je vois qu'il y a des spacer gif dans donc code, ca sert a rien, puisque c'est pour "spacer" des div alors que tu peux faire "height" en css.
position:relative;
clear:both;
display:block;
ces troi ligne la servnet a rien (la prmeiere c'est la valeur par defaut pour les div), la second ne sert que si tu as qqch en float, la troisieme c'est aussi par defaut. |
edit
je viens de me rendre compte de ce message qui n'a pas de sens et ne sert a rien et en plus je me souvient pas l'avoir fait ><
Dernière édition par moktoipas le Mar Nov 27, 2007 13:42; édité 1 fois |
|
| |
|
|
Victor BRITO
WRInaute impliqué
Inscrit le: 21 Déc 2006
Messages: 423
Localisation: 92200 Neuilly-sur-Seine
|
| Posté le : Mar Nov 27, 2007 13:39 Sujet du message: [CSS] Je haie Firefox... |
|
|
| cedric_g a écrit: |
Merci pour ta réponse
Je suppose que c'est cela que tu veux ?
| Code: |
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="begaud.css" rel="stylesheet" type="text/css"> |
Je n'ai pas de doctype , c'est grave ? |
Ce n'est pas de ça qu'il s'agit : il s'agit d'une ligne de code commençant par "<!DOCTYPE".
Ce doctype varie selon la version de HTML ou de XHTML que tu utilises.
HTML 4.01 Strict
| Code: |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
HTML 4.01 Transitionnel
| Code: |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
HTML 4.01 Frameset
| Code: |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
XHTML 1.0 Strict
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
XHTML 1.0 Transitionnel
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
XHTML 1.0 Frameset
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Il est important de déclarer ce code, puisqu'il permet au navigateur de savoir comment interpréter le document. Et pour les CSS, une doctype correctement déclarée est un gage d'une bonne interprétation des standards.
Le mode "Quirks" se déclenche sous Internet Explorer dans les cas suivants :
- doctype incomplet ou incorrect,
- absence de doctype,
- doctype correspondant à HTML 2 ou 3.2,
- utilisation d'un prologue XML (sauf avec IE 7).
Et, pour tous les cas nommés ci-avant (sauf pour le dernier), Firefox, dans la bulle "informations sur la page", indique pour le mode de rendu "mode de compatibilité" au lieu de "mode de respect strict des standards".
Et quand tu as le mode "Quirks" déclenché, le modèle de boîte change et fait chambouler les dimensions des blocs lorsque tu définis une largeur, une bordure et des marges internes (padding) en même temps.
Quelques lectures utiles : choix de la DTD, doctype switching, pourquoi un doctype. |
|
| |
|
|
bproductiv
WRInaute accro
Inscrit le: 27 Déc 2004
Messages: 2127
Localisation: La roche s/ yon
|
| Posté le : Mar Nov 27, 2007 13:40 Sujet du message: [CSS] Je haie Firefox... |
|
|
| metropoway a écrit: |
Moi, je hais I.E
Très peu de soucis avec FF alors qu'avec I.E... |
IDEM quand ca marche pas avec FF c'est que le codehest mauvais 
Commence par le doctype comme dit plus haut car en mode quirk c'est sûr que tu n'aura ce résultat QUE sous IE.
Tu as testé avec opéra ? |
|
| |
|
|
Marie-Aude
WRInaute accro
Inscrit le: 05 Juin 2006
Messages: 3195
Localisation: More than a plastic girl
|
| Posté le : Mar Nov 27, 2007 14:38 Sujet du message: [CSS] Je haie Firefox... |
|
|
Ton code est chargé.
Metre un div dans un blocquote dans un div c'est beaucoup...
Tu peux en gérant correctement tes paddings et tes margins avoiruniquement ton div central, avec ton h1, tes p, ton blockquote et ton image sur la droite, comme élément de page au lieu d'élément de background. Ca permet aussi de réserver la part de ton image normalement avec un simple float et des propriété de marge et de padding sur l'img, au lieu de faire ce que tu fais. |
|
| |
|
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1430
Localisation: Aube
|
| Posté le : Mar Nov 27, 2007 15:45 Sujet du message: [CSS] Je haie Firefox... |
|
|
Pfiiiouu ça c'est de la réponse  
Bon, je crois qu'il est temps que j'apprenne à quoi servent les doctypes 
Je vais mettre en application tous vos conseils, MERCI ! |
|
| |
|
|
Vap
WRInaute passionné
Inscrit le: 17 Juin 2007
Messages: 851
Localisation: Carry-le-Rouet (13)
|
| Posté le : Mar Nov 27, 2007 18:10 Sujet du message: [CSS] Je haie Firefox... |
|
|
Je crois que le probléme d'alignement vertical vient des images. Dans ton en tete tu as une image is-single_pixel.gif En IE6, une div a au moins les dimensions des éléments qu'elle contient.
Ceci n'est pas le cas dans le standard du W3C.
Donc il faut que tu vire ton image gif et que tu utilise height à la place, comme dit plus haut.
Vap |
|
| |
|
|
Olivier Duval
WRInaute impliqué
Inscrit le: 19 Fév 2007
Messages: 497
|
| Posté le : Mar Nov 27, 2007 18:17 Sujet du message: [CSS] Je haie Firefox... |
|
|
--> http://www.c@l0rifuge-beg@ud.fr <--
Si ça, ce n'est pas de la paranoia qu'est ce que c'est... |
|
| |
|
|
zeb
WRInaute passionné
Inscrit le: 05 Déc 2004
Messages: 865
|
| Posté le : Mar Nov 27, 2007 18:29 Sujet du message: [CSS] Je haie Firefox... |
|
|
quelques erreurs de syntaxe dans le CSS:
.begaud-box {
width:750px;
margin:0;
}
met une <br/> avant ta h1 et après ton paragraphe pour 'encadrer' le contenu de la div begaud-contenu le problème de 'déconnection' des fond va disparaître
| Code: |
<!-- HAUT DE ZONE DE CONTENU -->
<div class="begaud-content">
<div class="begaud-contenu">
<br/>
<h1>Optimisez votre énergie !... </h1>
<p>
Spécialisée dans la conception de solutions industrielles <b>calorifuges</b> et d'<b>isolation</b>, la société BEGAUD et ses techniciens offrent depuis 1991 tout leur savoir-faire en la matière : installation, réparation, rénovation, partout en France et en Europe. <br />
</p>
<table>
<tr>
<td>
<div style="margin-left:-35px;">
<blockquote>
<div>
Calorifuges - Isolations thermique et phonique industrielles - Plafonds suspendus - Tôlerie fine - Conduit de cheminée
</div>
</blockquote>
</div>
</td>
<td>
<img src="http://www.calorifuge-begaud.fr/images/realisation-calorifuge.jpg">
</td>
</tr>
</table>
<p>
<a href="entreprise-installation-calorifuge.php">Présentation de notre société</a> -
<a href="materiel-construction-calorifuge.php">Nos équipements pour la construction calorifuge</a> -
<a href="realisation-calorifuge-isolation-thermique.php">Nos dernières réalisations calorifuges</a>
</p>
<br/>
</div><!-- fin div begaud-contenu -->
</div><!-- fin div begaud-content -->
<!-- BAS DE ZONE DE CONTENU --> |
pour le décalage du contenu (en fait le centrage) je voie pas pour l'instant |
|
| |
|
|
| |
|
|
