28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page 2 colonnes

Bonjour,

J'ai tester ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Maitriser-le-positionnement-CSS-dans-toutes-les-situations

et ça bug .... (je parle le code brute du tuto)

j'ai rajouter le display:inline pour regler un pb sous IE 7 mais ya toujours des petites saloperies qui se glisses ... Smiley fache

en fait je veux faire un design simple header + 2 colonnes
sidebar a gauche + contenu a droite
le tout en 100%
le probleme c'est qu'en utilisant par exemple 20% pour ma sidebar et 80% pour mon contenu je retrouve avec mon contenu qui dépasse un peu de ma div global (déjà je trouve ça chelou) donc si quelqu'un a une idée qui ne soit pas trop de la bidouille je veux bien ?

voici mon code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<style type="text/css">
		<!--
		div {
			border: 1px solid; 
			}
		#conteneur {
			width:100%;
			}

		#sidebar {
			position:absolute;
			display:inline;
			width:20%;
			background-color: blue;
			}
		#contenu {
			position:absolute;
			width:80%;
			margin-left:20%;
			background-color: yellow;
			}
		-->
	</style>
</head>
<body>	
	<div id="conteneur">
		<div id="header">
			header
		</div>
		<div id="sidebar">
			sidebar
		</div>
		<div id="contenu">
			contenu
		</div>
		<div id="footer">
			footer
		</div>
	</div>


 
</body>
</html>


rien de bien compliquer quoi ....

sinon je pensais utilisait les flottants mais je sais pas trop ce qui est le mieux en fait ? donc je suis ouvert a tous conseil suggestion ....
Modifié par garthos (13 Nov 2008 - 12:10)
Bonjour,

Je m'y connais pas trop, je demande de l'aide en général ici, mais comme ça à vue de nez moi je mettrai le sidebar en px et pas de pourcentage pour le contenu.

Sinon pour répondre plus personnellement à ton problème, si tu ne veux pas changer les pourcentages, remplace le margin-left par un padding-left dans ton contenu, le margin met des marges extérieures, donc en +, donc forcément comme t'es déjà à 100% ça dépasse. Le padding c'est des marges intérieures, compris dans ton 80%.

Enfin c'est comme ça que je l'ai compris. Smiley cligne

Lou
merci !
ça marche mais finalement j'ai décider d'utiliser un float:left pour ma sidebar et j'ai plus de souci ....

autre petit détail que j'ai remarquer c'est que les padding et margin par défaut ne sont pas toujours a 0 suivant les navigateurs, ce qui peut foutre la merde ....
Modifié par garthos (13 Nov 2008 - 14:04)
Finalement après observation de quelques site (Zimbra , le webmail de free en l'occurrence...) je suis revenu sur le positionnement absolu, ceux qui me permettra par la suite d'avoir une fonction Javascript permettant de redimensionner la largeur de mes 2 colonnes via une poignée.

voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wel'Com</title>
	<style type="text/css">
		<!--
		html, body {
			margin:0;
			padding:0;
		}		
		p {
			margin:0 0 1em 0;
		}		
		
		h1 {
			margin: 0;
		}		
		#global {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			background-color: #666600;
		}		
		#header {
			position: absolute;
			top: 0px;
			width: 100%;
			height: 50px;
		}		
		#warp {
			position: absolute;
			top: 50px;
			bottom: 0px;
			width: 100%;
		}		
		#sidebar {
			position: absolute;
			width: 150px;
			background-color: red;
			color: white;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}		
		#sidebar p {
			margin-left: 1em;
		}		
		#sidebar ul {
			margin: 0 0 1em 0;
		}		
		#sidebar li {
			list-style-type: none;
			margin: 0 0 0 1em;
		}		
		#sidebar li a{
			color: white;
			text-decoration: none;
		}		
		#sidebar li a:hover {
			text-decoration: underline;
		}		
		#contenu {
			position: absolute;
			top: 50px;
			bottom: 0px;
			right: 0px;
			left: 0px;
			margin-left: 150px;
			background-color: #eaeae9;
		}		
		#contenu p{
			margin: 0 0 0 1em;
		}		
		-->
	</style>
</head>
<body>
	
	<div id="global">
		<div id="header">
			<h1>en-tête de page</h1>
		</div>
		<div id="wrap">		
			<div id="sidebar">
				<p>Ma sidebar</p>
				<ul id="menu">
					<li><a href="#">lien1</a></li>
					<li><a href="#">lien2</a></li>
					<li><a href="#">lien3</a></li>
					<li><a href="#">lien4</a></li>
				</ul>
			</div>
			<div id="contenu">
				<p>Bloc contenu</p>
				<p>on y affichera les fiches</p>
				<p>ksdjcfljsqdlkjfnlkdnfqsdljnknnfknf;qdkqnfjqfndjkdisdknsiufhidhfosduhdifhiufhsdufhisdhf</p>
		</div>
		</div>
		
	</div>


 
</body>
</html>


si vous avez des avis sur ma méthode je suis preneur , en tout cas ça marche dans IE et FF ....
Modifié par garthos (13 Nov 2008 - 18:49)
Sujet clos
Aller à