28173 sujets

CSS et mise en forme, CSS3

Un bloc ne voulant pas se positionner sous IE

Bonjour,

alors voila, je suis en train de faire une page avec un bloc fixé à 800px, une bordure de 2px et dont les angles sont arrondis par des petits gifs.

je traduis en captures d'écrans.

Le résultat voulu vu par Firefox :

http://www.bamboule.org/exemple_firefox3.gif

Le même code vu par ie7

http://www.bamboule.org/exemple_ie3.gif


et voila le code en question :


index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

(...)

<body bgcolor="#28C264">
			
<div class="bg_l"	></div>
<div class="bg_r"	></div>	
		
			<center>
			<div class="content">
					 
					 <div class="header_up_left">
					 </div>
					 
					  <div class="header_up_right">
					 </div>

					 	<div class="header_down_left">
					 </div>
					 
					  <div class="header_down_right">
					 </div>
					 
					  <div class="header_line_h_t">
						</div>			

	
					  <div class="header_line_v_l">
						</div>			
					  <div class="header_line_v_r">
						</div>	
						
										  
						<div class="header_line_h_b">
						</div>	
							
			</div>
			</center>
			
</body>


le css


.bg_l {
			 	position: absolute;
				top: 0px;
				left:0px;
				width:237px;
				height: 100%;
				background-image: url("/pics/bg_l.gif");
				background-repeat: repeat-x;
				background-repeat: repeat-y;
				z-index:300;
				}
.bg_r {
			 	position: absolute;
				top: 0px;
				right:0px;
				width:237px;
				height: 100%;
				background-image: url("/pics/bg_r.gif");
				background-repeat: repeat-x;
				background-repeat: repeat-y;
				z-index:300;
				}
				
.content {
				width: 800px;
				height: 100%;
				position: relative;
				left : 0px;
				top : 0px;
				z-index: 400;
				background: #B1F5D4;
				}
				
.header_up_left {
				position: absolute;
				left : 0px;
				top : 0px;
				height: 12px;
				width: 12px;
				z-index: 500;
				background-image: url("pics/up_left.gif");
				background-repeat: repeat-x;
				}
				
.header_up_right {
				position: absolute;
				right : 0px;
				top : 0px;
				z-index: 500;
				height: 12px;
				width: 12px;
				background-image: url("pics/up_right.gif");
				background-repeat: repeat-x;
				}
				
.header_down_left {
				position: absolute;
				left: 0px;
				bottom: 0px;
				height: 12px;
				width: 12px;
				z-index: 450;
				background-image: url("pics/down_left.gif");
				background-repeat: repeat-x;
				margin-top: 0px;
				padding-top: 0px;
				}
				
.header_down_right {
				position: absolute;
				right: 0px;
				bottom: 0px;
				z-index: 450;
				height: 12px;
				width: 12px;
				background-image: url("pics/down_right.gif");
				background-repeat: repeat-x;
				margin-top: 0px;
				padding-top: 0px;
				}
				
.header_line_h_t {
    position: absolute;
    height: 2px;
    width: 100%;
    top : 0px;
    left : 0px;
    background-image : url("pics/black_h.gif");
		background-repeat: repeat-x;
		z-index: 400;
    }
		
.header_line_h_b {
    position: absolute;
    height: 2px;
    width: 100%;
    bottom : 0px;
    left : 0px;
    background-image : url("pics/black_h.gif");
		background-repeat: repeat-x;
		z-index: 400;
		margin-bottom: 0px;
		padding-bottom: 0px;
    }
				
		
.header_line_v_l {
    position: absolute;
    height: 100%;
    width: 2px;
    top : 0px;
    left : 0px;
    background-image : url("pics/black_v.gif");
		background-repeat: repeat-y;
		z-index: 400;
		margin: 0px;
		padding: 0px;
    }
		
.header_line_v_r {
    position: absolute;
    height: 100%;
    width: 2px;
    top : 0px;
    right : 0px;
    background-image : url("pics/black_v.gif");
		background-repeat: repeat-y;
		z-index: 400;
		margin-top: 0px;
		padding-top: 0px;
    }


Le bloc en question qui ne se positionne pas est header_line_h_b

Savez vous comment harmoniser ceci svp ?

Merci d'avance

Kalber
Bonjour,

Ca me parait un peu alambiqué pour faire des coins arrondis sur un bloc fixé en largeur, là où à peu près 2 éléments blocs auraient suffit (à vue de nez). Mais souat' admettons ta logique. En fait le .content fait une hauteur de 100%, certes mais 100% de quoi ? Et bien ça, IE le sait pas, d'où le petit soucis. Un petit html d'une hauteur de 100% devrait remettre cela d'aplomb.
Bonjour zzzazzz,

en effet, je comprend ce que tu veux dire pour les deux blocs, ma première idée était d'alléger au maximun, mais quand je vois le résultat, je me demande si l'effet n'est pas inverse.

pour ton censeil, je suis pas sur de saisir, j'ai donc rajouté ceci au css 



html {
	height: 100%;
	}


le résultat rest visuellement pareil. J'ai encore essayé de voir le résultat en ajoutant cela 


body {
	margin: 0px;
	padding: 0px;
	}


et là excepté les marges suppérieures et inférieures qui disparaissent le visuel du bloc content reste pareil.

Etait-ce bien cela que tu me conseillais de changer ?
hmm oui, essaye déjà en enlevant tout le code qui ne t'intéresse pas <center> y compris. Je reste assez dubitatif sur le tout position:absolute et surtout ce height:100% un peu partout. Es-tu allé faire un tour sur les colonnes factices de pompage ?
Modifié par zzzazzz (10 Jan 2007 - 14:44)
Ok, j'ai donc simplifié au maximum, en ne gardant plus qu'un bloc pour le coté haut et pareil pour le bas. J'ai également enlevé le center.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>as</title>
<link rel="stylesheet" href="as_vert2.css" type="text/css">
</head>

<body bgcolor="#28C264">
			
<div class="bg_l"	></div>
<div class="bg_r"	></div>	
		

			<div class="content">
					 
				   	<div class="content_top">
						</div>			
					  <div class="content_bottom">
						</div>	
	
					  <div class="header_line_v_l">
						</div>			
					  <div class="header_line_v_r">
						</div>	
						
						Lorem ipsum etc...					  
			</div>

			
</body>
</html>

et le css

html {
		 		height: 100%;
		 }

.bg_l {
			 	position: absolute;
				top: 0px;
				left:0px;
				width:237px;
				height: 100%;
				background-image: url("/pics/bg_l.gif");
				background-repeat: repeat-x;
				background-repeat: repeat-y;
				z-index:300;
				}
.bg_r {
			 	position: absolute;
				top: 0px;
				right:0px;
				width:237px;
				height: 100%;
				background-image: url("/pics/bg_r.gif");
				background-repeat: repeat-x;
				background-repeat: repeat-y;
				z-index:300;
				}
				
.content {
				position: relative;
				width: 800px;
				left : 0px;
				top : 0px;
				z-index: 400;
				background: #B1F5D4;
				}
				

.content_top {
    position: absolute;
    height: 12px;
    width: 800px;
    top : 0px;
    left : 0px;
    background-image : url("pics/full_line_top.gif");
		z-index: 500;
		margin: 0px;
		padding: 0px;
    }

.content_bottom {
    position: absolute;
    height: 12px;
    width: 800px;
    bottom : 0px;
    left : 0px;
		background-image : url("pics/full_line_bottom.gif");
		background-repeat: repeat-y;
		background-repeat: repeat-x;
		z-index: 500;
		margin: 0px;
		padding: 0px;
    }

.header_line_v_l {
    position: absolute;
    height: 100%;
    width: 2px;
    top : 0px;
    left : 0px;
    background-image : url("pics/black_v.gif");
		background-repeat: repeat-y;
		z-index: 400;
		margin: 0px;
		padding: 0px;
    }
		
.header_line_v_r {
    position: absolute;
    height: 100%;
    width: 2px;
    top : 0px;
    right : 0px;
    background-image : url("pics/black_v.gif");
    background-repeat: repeat-y;
z-index: 400;
		margin-top: 0px;
		padding-top: 0px;
    }


le tout est visible sur www.bamboule.org/index2.php

Je vais aller lire la page en question sur pompage.
Modifié par Kalber (10 Jan 2007 - 17:00)
Sujet clos
Aller à