28172 sujets

CSS et mise en forme, CSS3

[résolu] Problème d'alignement de DIV

Bonjour,

J'ai un gros souci avec des div que j'aimerais aligner en float de manière symétrique sur ma page. Le souci c'est que c'est niquel sous Firefox mais que le div #center se met en dessous des div #leftbar et #rightbar dès qu'ils sont collés sous Internet Explorer.

Je me casse la tête dessus depuis un petit moment, toute aide serait énormément appréciée ! (Je n'ai pas réussi à trouver de réponse à mon problème ailleurs sur le forum)

Voici mon CSS et mon code :


.conteneur1 {
text-align: center;
}

body {
    	margin:0;
    	padding:0;
}

div#global {
	height:680px;
    	width:1000px;
    	margin: 0 auto;
    	text-align:center;
	font-family: Verdana, Arial;
	font-size:8pt;
} 

div#center {
	height:680px;
	width:968px;
    	margin: 0 auto;
    	text-align:center;
	font-family: Verdana, Arial;
	font-size:8pt;
} 


div#leftbar { 
    	float:left;
    	width:16px;
    	height:680px;
	background-color:#000000;
	margin: 0;
} 
 
div#rightbar { 
    	float:right;
    	width:16px;
    	height:680px;
	background-color:#000000;
    	margin: 0;
}

div#header {
    	height:80px;
	width:100%;
    	margin: 0 auto;
    	background-color:#bfca87;
}

div#barnav { 
    	height:20px;
	width:100%;
	border-top:solid 2px black;
	border-bottom:solid 2px black;
    	margin: 0 auto;
    	background-color:#667035;
}

div#content { 
	width:100%;
    	height:500px;
    	margin: 0 auto;
	background-color:#e6e6b8;
} 

div#pied_page { 
    	height:80;
	width:100%;
    	text-align:center;
    	margin: 0 auto;
    	background-color:#bfca87;
}




<head>
<link rel="stylesheet" type="text/css" href="div.css">
</head>

<body>
<div class="conteneur1">
<div id="global">
<div id="leftbar"></div>
<div id="rightbar"></div>
<div id="center">
	<div id="header"></div>
	<div id="barnav"></div>
	<div id="content">content</div>
	<div id="pied_page">footer</div>
</div>
</div>
</body>


Merci beaucoup.
Modifié par Mastah (30 Dec 2010 - 10:41)
Bonjour,

Pourrais tu envoyer une capture du résultat sous ta version de IE qui pose problème ? Je n'ai pas de IE inférieur à 8 pour tester et voir le problème. Ta structure n'est pas forcément adaptée à ce que tu souhaites faire. Tes div des deux côtés contiendront un visuel ? Une ombre ? Ou le rendu que tu as envoyé est final ? La méthode des colonnes factices est peut être préférable : Colonnes factices
Modifié par Spacedementia (29 Dec 2010 - 19:11)
Bonjour,

Pourrais tu envoyer une capture du résultat sous ta version de IE qui pose problème ? Je n'ai pas de IE inférieur à 8 pour tester et voir le problème. Ta structure n'est pas forcément adaptée à ce que tu souhaites faire. Tes div des deux côtés contiendront un visuel ? Une ombre ? Ou le rendu que tu as envoyé est final ? La méthode des colonnes factices est peut être préférable : Colonnes factices
Bonjour et merci pour ta réponse.

En fait ma version finale contiendra une image (ma barre de navigation débordant de chaque côté : http://i51.tinypic.com/cjfjp.jpg)

Malheureusement sous IE 8 ça ne donne pas du tout l'effet escompté : http://i56.tinypic.com/5lrtx4.jpg

Peut-être que la solution serait d'utiliser une seule image de fond pour l'ensemble du bloc... même si cette solution ne me plait pas des masses.
Modifié par Mastah (29 Dec 2010 - 19:41)
Je n'ai pas analysé le problème sous IE8 (chez moi sur IE8 aucun problème d'affichage...). Mais une chose est sûre c'est que tu te complique la vie. Ton design ne requiert pas trois colonnes car elles n'ont aucun intérêt.

Il suffit que tu mette tes divs "header", "menu", "content" et "footer" dans un même div parent (le div rouge sur la capture ci-dessous) qui lui aura une largeur fixe et des margins g/d à "auto" ainsi que des borders gauche et droite pour faire tes lignes verticales noires. Ensuite ton menu (bloc bleu) tu lui donne sa taille totale avec le débordement, tu le décale avec un margin-left négatif vers la gauche (égal à la largeur de ton débordement de gauche) pour qu'il se décale de son div parent.

Voila, moi j'aurais procéder comme ça au plus simple. Bien sûr d'autres méthode peuvent êtres employés. Smiley cligne

upload/5129-shot.png
Merci, tu as raison je me suis compliqué la vie pour rien. En fait j'ai fait un seul div parent et j'ai découpé ma maquette en images pour que tout soit aligné (les borders se calent mal entre IE et FF)

Ca rend parfaitement, merci encore !
Sujet clos
Aller à