begin process at 2012 05 29 00:42:51
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

CSS

 > 

CSS - Alignement de divs horizontalement - différence IE7 & FF

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

CSS - Alignement de divs horizontalement - différence IE7 & FF

mardi 26 janvier 2010 à 15:04:22 | CSS - Alignement de divs horizontalement - différence IE7 & FF

smoke
Salut tout le monde ;)

Je ne parviens pas à aligner horizontalement mes divs sous Firefox.

Voici ce que a donne sous IE7:


et ce que ca donne sous FF:


Mon fichier HTML:
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link type="text/css" href="css-scripts/style.css" rel="stylesheet">
</head>

<body>
<div class="bg1"><div id="txt">
<div id="logo">LOGO</div>
<div id="menu_horizontal">MENU</div>
</div></div>

<div class="bg2"><div id="txt">
<div id="explain">EXPLAIN</div>
<div id="pub">PUB</div>
</div></div>

<div class="bg3"><div id="txt">
<div id="main">MAIN</div>
<div id="submain">SUBMAIN</div>
</div></div>

<div class="bg4"><div id="txt">
<div id="comment">COMMENT</div>
<div id="twitter">TWITTER</div>
<div id="quickcontact">QUICKCONTACT</div>
</div></div>

<div class="bg5"><div id="txt">COPYRIGHT &#169; 2010 Netside V &#178;&#183;&#176; -- all rights reserved</div></div>
</body>

</head>

et ma CSS:
Code css :
html { 
	color:#A6A6A6;
	font-family:"Lucida Grande",Arial,Verdana,sans-serif;
	font-size:75%;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:130%;
	}
body { /* css a conserver */
	height:100%; 
	max-height:100%; 
	margin: 0 auto; /* alignement center FF */
	padding: 0;
	border: 0;
	text-align:center; /* alignement center IE*/
	}

.bg1 .bg2 .bg3 .bg4 .bg5 { /* backgrounds */
	height: auto;	/*hauteur*/
	width: 100%;	/*largeur*/
	margin: 0 auto;
	}
.bg1 {	background:#1D1C18;	} /*background 1*/
.bg2 {	background:#A8A390;	} /*background 2*/
.bg3 {	background:#E2DED3;	} /*background 3*/
.bg4 {	background:#131313 url(../images/top_bg4.gif) repeat-x scroll 0 0;	} /*background 4*/
.bg5 {	background:#131313 url(../images/top_bg5.gif) repeat-x scroll 0 0; text-transform:uppercase; letter-spacing:-1px; } /*background 5*/

#txt {/* divs container */
	width: 950px;
	margin:0 auto;
	padding: 10px 0 10px 0;
	text-align:left;
	}
	
/* bord pour tests */ #logo, #menu_horizontal, #explain, #pub, #comment, #twitter, #quickcontact , #main, #submain {  float:left!important!; border: 1px solid red; }
#logo { 
	height: 50px;
	width: 260px;
	}
#menu_horizontal {
	height: 50px;
	width: 686px;
	}
	
#explain {
	height: 180px;
	width: 340px;
	color: #c0c0c0;
	}
#pub {
	height: 180px;
	width: 606px;
	color: #c0c0c0;
	}

#main {
	height: 350px;
	width: 636px;
	}
#submain {
	height: 350px;
	width: 310px;
	}
	
#comment, #quickcontact { 
	height: 150px;
	width: 310px;
	}
#twitter { 	
	height: 150px; 
	width: 324px;
	}


En général, on utilise un "float: left;" pour les aligner correctement, mais là, ca fonctionne sous IE7, pas sous FF.

Quelqu'un aurait une idée qui me permettrait d'avancer?
mardi 26 janvier 2010 à 19:36:08 | Re : CSS - Alignement de divs horizontalement - différence IE7 & FF

Arto_8000
À priori ce que je verrais comme problème c'est que tu utilises des tailles fixes pour tes divs. Si la fenêtre de Firefox est légèrement plus petite que celle de IE, le 2e div serait affiché sur la 2e ligne et c'est parfaitement normal. Tu devrais utilisé des tailles relatives (en pourcentage) pour tes divs.
mardi 26 janvier 2010 à 19:40:32 | Re : CSS - Alignement de divs horizontalement - différence IE7 & FF

neigedhiver
Salut,

J'ai pas du tout regardé tes CSS, mais ce serait pas un problème de marges ? IE et Firefox n'ont pas la même façon d'interpréter ça des fois.
En fait, pour bien voir le problème, je te recommande d'utiliser l'extension Firebug pour Firefox, qui te permettra de visualiser les marges (margin et padding) interprétées par Firefox.

Pis si j'ai un peu de temps ce soir, je jette un oeil de manière plus approfondie ;)

--
Neige

Souvent la réponse à votre question se trouve dans la doc. Commencez par là ;)
mardi 26 janvier 2010 à 20:10:13 | Re : CSS - Alignement de divs horizontalement - différence IE7 & FF

smoke
Merci pour vos réponses ;)

@Arto_8000: en fait, la taille des divs importe peu dans ce cas:
mon écran à une résolution de 1440px en largeur. De plus, les divs containeur (txt) de 950 px sont imbriquées dans des divs à 100% en largeur.

J'ai testé avec des divs de 10 px et j'obtiens le même résultat.

Si j'applique un float:left, mes divs se placent correctement, mais sortent verticalement des divs container.

Le souci ne vient donc pas de là.

@neigedhiver: j'utilises firebug et ses dépendences depuis sa création, c'est réellement un outil dont je ne pourrais plus me passer pour la réalisation d'un site ;)

J'explore la piste des marges, mais.. entre nous, je suis quasiment sur que ce ne sont pas celles-ci qui posent problème..

Je pourrais mettre une position absolute sur mes divs, mais j'essaye de faire sans, car je tente de créer un site qui sera accessible au plus grand nombre de navigateurs et au plus grand nombre de résolutions.

Si tu as le temps d'y jeter un coup d'oeil, je t'en serais reconnaissant ;)
mercredi 27 janvier 2010 à 01:24:35 | Re : CSS - Alignement de divs horizontalement - différence IE7 & FF

Arto_8000
Bon je viens de regarder ça de plus près et j'ai remarqué que le float: left n'était pas du tout appliqué aux éléments. En creusant un peu j'ai trouvé que tu as une erreur de synthaxe dans ta feuille de style. Il y a un «!» de trop sur ton «float: left».

Code css :
#logo, #menu_horizontal, #explain, #pub, #comment, #twitter, #quickcontact , #main, #submain {
	float:left!important;
	border: 1px solid red;
}
mercredi 27 janvier 2010 à 01:53:42 | Re : CSS - Alignement de divs horizontalement - différence IE7 & FF

smoke
@Arto_8000: ... hum ...
Ce n'est pas du tout une erreur de syntaxe...

La propriété !important! est un hack CSS propre a IE7.

float:left; <-- s'applique à tous les navigateurs,
float:left!important; <-- s'applique uniquement à IE6,
float:left!important!; s'applique uniquement à IE7,
ect...

C'est pour cette raison que mon float left n'est pas appliqué sous FF, c'est voulu (c'est pour ça que je demande un coup de main, car mon float left dézingue tout le reste sous FF)


Cette discussion est classée dans : width, height, size, background, ff

Répondre à ce message

Sujets en rapport avec ce message

[XHTML] Menu deroulant [ par Frenzey ] Bonjour, j'ai récupérer un template gratuit sur internet, je l'ai adapté mais il y a quelques problème avec affichage par rapport à mon menu. voila mo Problème redimension image [ par psyckan ] Bonjour,Voila j'essaie de redimensionner une image au moment de l'upload mais ça marche pas et ça m'affiche plein des caractère spéciaux à l'endroit o faire une bouclze sur un fichier contenant des photo et les redimmensionner [ par hannao ] salut à tous, voilà j'ai un petit code qui redimensionne une photo (contenu dans un dossier) à la fois j'aimerais pouvoir faire une boucle dans le fic taille du site [ par loblobloblob ] Bonjour,Je voudrais changer la taille de mon site qui est en 1024 par du 980 de large, mais lorsque je change l'attribu width de 1024 a 980 de ma page fonction pour redimensionner des images de grande taille [ par oceanrider ] Bonjour à tous, Je me tourne vers vous car malgré mes recherches, je ne trouve pas de solution à mon problème. J'ai recours à une fonction pour redi Contenu de Bdd et affichage avec retour a la ligne [ par DjChat ] Bonjour a tous, je gere un affichage dynamique qui est stoqué dans une Bdd en varchar qui est du texte, pour le positionner je l'ai mi dans des div qu probleme php avec div et include [ par oeann ] bonjour, j'ai besoin de votre aide.. normalement je code en flash mais j'ai decidé d'utiliser le php car je fais un outl de gestion avec spaw2.j'ai un redimension d'une image [ par clement1138 ] voila j'ai ecris ce code..... pour redimensionner mes images...mais est ce que je peux le faire a la taille que je veux au lieu d'utiliser un pourceta Si quelqu'un à l'explication je suis preneur ... [ par Mo11 ] Bonjour à tous,J'ai une étrangité à partager avec la communeauté. Voici deja le code : <br / probleme menu et zone de texte [ par fredoann ] Bonjour à tous,je souhaite faire afficher un texte d'un fichier texte dans une zone de texte et ce sur la même page (self) mais j'ai deux problèmes:-m


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Water in the Beginning of the Grand Canyon
Photo Herbstwald im Gegenlicht 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)