18041 sujets

Questions générales et questions de débutants

Tuto 2 colonnes-probleme affichage en 1024 sous IE 6

Bonjour,

J'ai cherché, j'ai essayé et j'ai parcouru ce site, j'ai recherché, j'ai re-essayé.... je suis désolée mais là je craque Smiley bawling

voici l'adresse de ma page test page tuto 2 colonnes test.

Tout est ok sous FF, MAIS sous IE 6 à partir d'une résolution 1024, ma colonne (menu) de droite vient se placer en bas à gauche du contenu du site.

Aidez moi svp

mon style css 

html, body {
	height: 100%;
	margin: 0;
	}
	
div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url("Img/global.png") repeat-y center; 
	margin: 0 auto; 
	}
	
div#footer {
	position: absolute;
	bottom: 0;
	color: #fff; 
	background: #7fcf2e url("Img/footer.png") repeat-x; 
	width: 750px;
	}
	
div#content {
	float: left;
	width: 530px;
	margin-left: 10px;
	}
	
div#sidebar {
	float: left;
	width: 200px;
	margin-left: 10px;
	}
	
div#center {
	padding-bottom: 50px;
	overflow: auto;
	}
	
html { 
	background: #ddd url("Img/html.png") 
}

div#header    {
	 color: #fff; 
	 background: #7fcf2e url("Img/header.jpg") no-repeat; 
	 height: 200px ;
	 position: relative
}
 
ul#menu {
	margin-left: 2px;
	padding: 0;
	list-style: none;
}
	
ul#menu li a   { 
	line-height: 30px; 
	background: url("Img/fond_lien.png") no-repeat left top; 
	display: block; 
	margin: 2px 0; 
	padding-left: 35px; 
	height: 30px; 
	border-bottom: 1px solid #7fcf2e
}

ul#menu li a:hover {
	background-position: left bottom;
	margin left: 2px;
}

ul#menu li a {
	color: #390;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}

ul#menu li a:hover {
	color: #c30;
}
div#header h1 {
    margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}
	
div#sidebar h3, div#sidebar p  {
	padding: 0 10px;
}
	
body {
	font: 90% "Trebuchet MS", sans-serif;
}

div#content h2    { 
	color: #6c0; 
	background: #fff url("Img/titre.png") no-repeat left center; 
	padding-left: 35px 
}

div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
	
div#footer p {
	padding: 0 10px ;
	margin: 2px 0;
	font-size: 0.9em;
}

a {
	color: #6c0;
	font-weight: bold;
}
	
a:hover {
	color: #c00;
}


mon css ie
#global {
	height: 100%;
	background: none;
	position: relative;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");
	}
	
body {
	position: relative;
	}	
	
#content {
	display: inline;
	}
	
#center {
	overflow: visible;
	height: 75%;
	}
	
#content, #sidebar {
	margin-top: 15px;
	padding: 0;
	}

a, pre {
	position: relative;
	}
	

ul#menu {
	margin-left: 2px;
	padding: 0;
	list-style: none;
	line-height: 30px;
	}


le début de ma page xhtml

Je suis présente si il vous manque qqchose 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lte IE 6]>
			<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
		<![endif]-->
	</head>

Modifié par maiffret (07 Feb 2007 - 15:54)
Salut.

Il faudrait avant tout nettoyer ta feuille de style. Elle est bourrée de répétitions et de déclarations inutiles. Tu ne saurais pas travailler convenablement dans un tel fouillis Smiley decu
Thomas D. a écrit :
Salut.

Il faudrait avant tout nettoyer ta feuille de style. Elle est bourrée de répétitions et de déclarations inutiles. Tu ne saurais pas travailler convenablement dans un tel fouillis Smiley decu


Zut c'est l'ancien que j'ai donné
je redonne le bon de suite
Voici le dernier
D'un autre côté sous FF ça marche, c'est avec IE6 en résolution 1024 que ça coince 



html, body {
	height: 100%;
	margin: 0;
	}
	
div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url("Img/global.png") repeat-y center; 
	margin: 0 auto; 
	}
	
div#footer {
	position: absolute;
	bottom: 0;
	color: #fff; 
	background: #7fcf2e url("Img/footer.png") repeat-x; 
	width: 750px;
	}
	
div#content {
	float: left;
	width: 530px;
	margin-left: 10px;
	}
	
div#sidebar {
	float: left;
	width: 200px;
	margin-left: 10px;
	}
	
div#center {
	padding-bottom: 50px;
	overflow: auto;
	}
	
html { 
	background: #ddd url("Img/html.png") 
}

div#header    {
	 color: #fff; 
	 background: #7fcf2e url("Img/header.jpg") no-repeat; 
	 height: 200px ;
	 position: relative
}
 
ul#menu {
	margin-left: 2px;
	padding: 0;
	list-style: none;
}
	
ul#menu li a   { 
	line-height: 30px; 
	background: url("Img/fond_lien.png") no-repeat left top; 
	display: block; 
	margin: 2px 0; 
	padding-left: 35px; 
	height: 30px; 
	border-bottom: 1px solid #7fcf2e
}

ul#menu li a:hover {
	background-position: left bottom;
	margin left: 2px;
}

ul#menu li a {
	color: #390;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}

ul#menu li a:hover {
	color: #c30;
}
div#header h1 {
        margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}
	
div#sidebar h3, div#sidebar p  {
	padding: 0 10px;
}
	
body {
	font: 90% "Trebuchet MS", sans-serif;
}

div#content h2    { 
	color: #6c0; 
	background: #fff url("Img/titre.png") no-repeat left center; 
	padding-left: 35px 
}

div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
	
div#footer p {
	padding: 0 10px ;
	margin: 2px 0;
	font-size: 0.9em;
}

a {
	color: #6c0;
	font-weight: bold;
}
	
a:hover {
	color: #c00;
}

Modifié par maiffret (07 Feb 2007 - 14:56)
Sujet clos
Aller à