28173 sujets

CSS et mise en forme, CSS3

Min-width foncionne sou ie impossible !!!aide

Il me manque quelque chose dans mon code ????
Aider moi afin que min-width foncionne sou ie.
quand je commence par diminuer la taille de ma fenêtre tous se deforme au niveau de l'entete de la page.
Merci d'avance


css
css style estilo3

body{
	background:#C0C0C0;
	font: 12px sans-serif;
	border:solid 1px black;
	border-top:0;
	border-left:0;
	border-right:0;
	margin: 10px;
	padding:0 20 px;	
}
div#cabecera, div#menu,div#contenedor, div#pie, div#navegador{
	min-width:800px;
	width: 100%;
	border : 1px solid black;
	background: rgb(104, 138, 184);
}

/*ariba, derecha, abajo, izquierda*/

div#cabecera {
	height : 100px;
	margin: 10px auto -1px auto; 
}

div#menu {
	height : 30px;
	margin: 0px auto -1px auto; 
}

div#navegador {
	 height: 15px;
	 margin: 0px auto -1px auto; 
}

div#cabecera h2 {
	margin: 5px;
}

div#logo {
	float:left;
	border : 1px solid black;
	border-top:0;
	border-left:0;
	border-bottom: -1px;
	width: 200px;
	height : 100px;
	background: rgb (168, 202, 248);
}
div#carrito{
	float:right;
	margin-top:0px;
	border : 1px solid black;
	border-top:0;
	border-right:0;
	width: 200px;
	height : 100px;
	background: rgb (168, 202, 248);
}
div#contenedor {
	position: relative;
	margin-top:0px;
	border-bottom : 0;
	background: rgb(217, 217, 209);
}

div#pie {

	border-bottom : 0;
	margin: 0px auto 10px auto;
	
	
}
div#pie h2 {
	margin-bottom: -10px;
}

div#columna_izq {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width : 200px ;
	background : rgb (217, 217, 209); 
	border : 1px solid black;
	border-top:0;
	border-left:0;
	border-bottom: 1px;

}
div#buscador{
	position:relative;
	float:left;
	display:inline;
	border: 1px solid black;
	height : 20px;
	background : RED; 
	width:24%;
}

div#contenido {

	margin-left: 205px;
	margin-right: 205px;
	border : 1px solid black;
	padding-left : 40px ;
	padding-right : 10px ;
	border-top: 0;
	border-bottom: 0;
}


div#columna_der {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width : 200px ;
	background : rgb (217, 217, 209); 
	border : 1px solid black;
	border-top:0;
	border-right:0;
	border-bottom: 1px;
}
div#publicidad_iz, div#publicidad_der{

	background : blue;
	border : 1px solid black;
	border-left:0;
	border-right: 0;
}


css style estilo4

div#cabecera, div#menu,div#contenedor, div#pie, div#navegador{
	width:expression(document.body.clientWidth <= 800 ? "800px" : "100%" );
	height : 1px;
	}
	div#columna_izq, div#columna_der {
	height: expression (document.getElementById('IDcontenedor').offsetHeight - 12);
	
}

[b]code html[/b]
[code]
<!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="en" lang="en">

<head> 
    <title>Pagina inico HPCMEDIACENTER</title>
    <link rel='stylesheet' type='text/css' href='stilo3.css' />
	<!--[if IE]>
		<link rel='stylesheet' type='text/css' href='stilo4.css' />
	<![endif]-->
</head>

<body>
	<div id='cabecera'>
		<div id='logo'>
			<h2>logo</h2>
		</div>
		<div id='carrito'>
			<h2>carrito</h2>
		</div>

	</div>
	
	<div id='menu'>
			menu	
			
			<div id = 'producto'>
				producto
			</div>
	</div>
	
	<div id = 'navegador'>
			navegador
	</div>
		
   <div id= 'contenedor'>
		<div id= 'columna_izq'>
			menu 1<br>
			menu 2<br>
			menu 3<br>
			menu 4<br>
			menu 5<br>
			menu 6<br>
			menu 7<br>
			menu 8<br>
			menu 9<br>
			menu10<br>
		
			<div id='publicidad_iz'>
				publicidad<br>
				publicidad<br>
				publicidad<br>
				publicidad<br>
			</div>
			
		</div>
	
		<div id= 'contenido'>
	
			<div id= 'buscador'>
				buscador
			</div>
			
			<div id= 'buscador'>
				usuario
			</div>
			
			<div id= 'buscador'>
				buscador
			</div>
			
			<div id= 'buscador'>
				buscador
			</div>
		

		
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			holaaaaaaaaaaaaaaaaaaaaaa<br>
			
		</div>
		<div id= 'columna_der'>
			menu 4<br>
			menu 5<br>
			menu 6<br>
			menu 7<br>
			menu 8<br>
			menu 9<br>
			
				<div id='publicidad_der'>
					publicidad
					
				</div>
		</div>
   </div>
   
   <div id= 'pie'>
		<h2>yo soy el pie de la puta pagina</h2>
		
	</div>
	

</body>
</html>

Modifié par hnonossi (16 Jan 2008 - 16:40)
Administrateur
Bonjour,

ce problème de min-width pour IE (IE6 car IE7 n'a plus ce souci) est évoqué dans un article de la FAQ: "Min-width, max-width, min-height et max-height sur Internet Explorer".

Et pour cacher aux autres navigateurs ce que tu vas devoir rajouter pour IE6, il est fortement conseillé d'utiliser les commentaires conditionnels: toujours dans la FAQ, "Qu'est-ce que les commentaires conditionnels ?"

Note: je te conseille de ne jamais utiliser comme texte fictif (faux-texte) des mots comme "holaaaaaaaaaaaaaaaaaaaaaa" répété 20 fois mais plutôt "lorem ipsum" (je te laisse chercher sur Wikipedia la suite du texte), car sur des colonnes courtes le texte dépasserait, pas à cause d'un bug comme on le croit de suite mais parce que le mot est trop long tout simplement! Lorem ipsum "imite" un texte plus réaliste.
Modifié par Felipe (17 Jan 2008 - 11:59)
Sujet clos
Aller à