28172 sujets

CSS et mise en forme, CSS3

Problème de mise en page css

Bonjour aux forums,

Je suis un peu novice en matière CSS, surtout dans la mise en page d'un site web. et c'est vraiment dur dur!

J'ai créé mon design, et j'aurai voulu avoir l'avis d'expert:

1/ si j'ai employé la bonne méthode pour construire le squelette de mon site
2/ m'aider pour résoudre mes problèmes sous IE.
3/ savoir pourquoi en ajoutant le DOCTYPE, je n'obtiens plus du tout la meme chose , quel doctype mettre?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


En détails :

- objectif: avoir un design centré, un footer au bas de page si le continue est minime au centre de page, et d'avoir deux colonnes qui sont toujours collé au footer meme si aucun contenu.

- méthode: j'ai employé la {position:absolute} dans mes divs pour les placés.

- problème : sous IE je n'ai pas du tout le meme résultat que sous firefox. Sous firefox, j'atteins mon objectif. Lorsque j'insère mon DOCTYPE, tout est modifié..

- source:


		#html,body{
		border:1px solid #000;
		height:100%;
		
		}

		#global{
		background:green;
		position:relative;
		margin: 0 auto;	
		width: 860px;
		min-height: 100%;
		}

		#header{
		background:blue;
		width: 860px;
		height:140px;
		position:relative;
		}

		#menu{
		background:yellow;
		width: 860px;	
		height:30px;
		position:relative;
		}

		
		#content{
		background:black;
		position:absolute;
		top:170px;
		bottom:40px;
		width:500px;
		}

		#sidebar{
		background: pink;
		position:absolute;
		top:170px;
		left:500px;
		bottom:40px;
		width:360px;
		}

		#footer{
		background:red;
		position:absolute;
		bottom:0px;
		width:860px;
		height:40px;
		}




<div id="global">
	
		<div id="header">
			
		</div>
		<div id="menu">
			
		</div>
		<div id="content">
			
		</div>
		<div id="sidebar">
			
		</div>
		<div id="footer">
			
		</div>
</div>


Merci pour votre aide, et explication
Cdt
Modifié par gu1gui (09 Dec 2008 - 10:47)
La position en absolu est problématique, notamment si tu as des textes dans le header et que l'utilisateur souhaite les agrandir (les textes du header et du contenu se supperposeront).

Je préfère positionner mes éléments avec des floats.

Ce qui donnerais ici quelque chose comme : 

#global{
background:green;
margin: 0 auto;	
width: 860px;
min-height: 100%; /*IE6 n'interprete pas min-height*/
}

#header{
background:blue;
width: 860px;
height:140px;
}

#menu{
background:yellow;
width: 860px;	
height:30px;
}

#content{
background:black;
width:500px;
float: left;
}

#sidebar{
background: pink;
width:360px;
margin-left:500px;
}

#footer{
background:red;
width:860px;
height:40px;
clear:both;
}


Pour ce qui est du doctype, je pense que le problème venait du fait que, sans doctype, IE interprete le code HTML en quirks mode (http://www.quirksmode.org/css/quirksmode.html c'est en anglais) et donc pas comme il le faudrait.
Sujet clos
Aller à