28173 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page pourtant simple...

Bonjour à tous,
concernant un site css qui s'adapte à la largeur de la fenêtre (largeur non fixe),
comment réussir à créer deux colonnes avec celle de droite width:350px et celle de gauche width:100% de l'espace restant ? Pour l'instant soit la colonne de gauche est à 100% de la largeur du conteneur malheurseusement, soit je ne peux la contraindre qu'à un width:auto pour que ce soit à peu près acceptable Smiley decu mais ce n'est pas très joli.
Merci pour votre aide !

Mon conteneur :
position:relative; overflow:auto;


Ma colonne de gauche :
float:left; min-height:100%; margin:0px; width:100%;


Ma colonne de droite :
float:right; width:350px; margin:0px; text-align:center;


Le XHTML :

<div id="conteneur">
	<div class="forumline" id="uneGauche">
	     <ul>
		<li>...</li>
	     </ul>			
	</div>
 			
        <div class="forumline" id="uneDroite">
		<img src="../images/temp/accueil.png" width="300px" alt="photo d'accueil" />
  	</div>
</div>


upload/7525-exemple.png
Modifié par Syl (17 Apr 2007 - 12:07)
Yep Smiley smile

Essaye tout simplement ça,

Page HTML :


<div id="conteneur">

     <div id="gauche">
     </div>

     <div id="droite">
     </div>

</div>

CSS :


#gauche {
/* ben rien du tout hihi */ }

#droite {
width:360px; 
float:right; }
Eh ben ça marche pas Smiley cligne ! C'est bien ça qui m'embête ...
Je pense que c'est du à un conteneur sans largeur fixe. Si je ne mets rien à gauche, la largeur s'adapte au contenu de cette colonne uniquement et pas à la place restante laissée par la colonne de droite. Snif. En tous cas merci à toi de m'avoir répondu c'est très sympa ! Smiley biggrin
J'ai testé avec largeur fixe pour le conteneur.

Mais j'y arrive pas non plus. Smiley sweatdrop
Quelqu'un a-t-il la solution ?

Mais simple question : 

position : relative;


est-ce bien indispensable ?
C'est vrai qu'il est superflu ce paramètre Dargoan. Certains éléments à l'intérieur du conteneur étaient précédemment en absolute... voilà pourquoi. Smiley cligne

Merci BeliG et Gargoan, c'est quand même étonnant que ce soit si compliqué à trouver la solution. Smiley ohwell
Modifié par Syl (16 Apr 2007 - 22:36)
Bonsoir

Je crois que j'ai trouvé une alternative au problème (parce qu'il me semble avoir lu sur le blog d'un spécialiste du css qui cherchait toujours la même chose que toi.

En fait, tu inclues la colonne de droite dans la colonne de gauche : 
<div id="conteneur">

	<div class="forumline" id="uneGauche">

	     <ul>

		<li>...</li>

	     </ul>			
		

             <div class="forumline" id="uneDroite">

		     <img src="../images/temp/accueil.png" width="300px" alt="photo d'accueil" />

  	     </div>

     </div>

</div>


Et ensuite, tu mets un css de ce genre : 
#conteneur
{
	overflow:auto;
	position: relative;
}
#uneDroite
{
	position:absolute;
	width: 135px;
	top: 0px;
	right: 0px;
}
#uneGauche
{	
	margin-right: 150px;
}


Voilà... j'espère que ça pourra t'aider.

Bonne soirée
Je sais pas si ça pourra t'aider, mais j'ai lu quelque chose d'intéressant qui te permettrait de faire ce que tu veux en adaptant.
C'est sur le site d'Openweb, à l'adresse suivante :

http://openweb.eu.org/articles/initiation_float/

Bien sur, il faudrait que tu revois probablement le balisage de ton site, mais je pense que ça pourrait être une solution plus simple finalement.

Tiens nous au courant Smiley lol
Bonjour,

Pour faire simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test4</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#conteneur{
overflow: hidden;
border: 1px solid black;
}

#head{
height: 100px;
background: red;
}

#conteneur_gauche{
float: left;
width: 200px;
background: #8c8c8a;
overflow: hidden;
}

#contenu{
overflow: hidden;
border: 1px solid blue;
}

#droite{
width: 350px;
overflow: hidden;
background: lime;
float: right;

}

#gauche{
background: yellow;
overflow: hidden;
height: 1%;	 /* pour ie6 */
}

p{
margin: 15px;
}

</style>
</head>
<body>	
<div id="conteneur">
	<div id="head">
	</div>
	<div id="conteneur_gauche">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pharetra sem sed purus. Aenean eu ante. Curabitur interdum. Fusce dapibus, urna a porta condimentum, felis dolor adipiscing tortor, non venenatis dolor elit a tortor. Vestibulum ligula. Aliquam aliquet tortor a metus. Suspendisse potenti. Phasellus hendrerit pede. Nulla vulputate vulputate purus. In tempus tincidunt arcu. Cras nunc lacus, dictum sed, blandit quis, accumsan vitae, est. Quisque cursus accumsan risus. Etiam interdum adipiscing est. 
	</p>
	</div>
	<div id="contenu">
		<div id="droite">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pharetra sem sed purus. Aenean eu ante. Curabitur interdum. Fusce dapibus, urna a porta condimentum, felis dolor adipiscing tortor, non venenatis dolor elit a tortor. Vestibulum ligula. Aliquam aliquet tortor a metus. Suspendisse potenti. Phasellus hendrerit pede. Nulla vulputate vulputate purus. In tempus tincidunt arcu. Cras nunc lacus, dictum sed, blandit quis, accumsan vitae, est. Quisque cursus accumsan risus. Etiam interdum adipiscing est.
		</p>
		</div>
		<div id="gauche">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pharetra sem sed purus. Aenean eu ante. Curabitur interdum. Fusce dapibus, urna a porta condimentum, felis dolor adipiscing tortor, non venenatis dolor elit a tortor. Vestibulum ligula. Aliquam aliquet tortor a metus. Suspendisse potenti. Phasellus hendrerit pede. Nulla vulputate vulputate purus. In tempus tincidunt arcu. Cras nunc lacus, dictum sed, blandit quis, accumsan vitae, est. Quisque cursus accumsan risus. Etiam interdum adipiscing est.
			</p>
		</div>	
	</div>	
</div>
</body>
</html>


Juste surveiller de près ie6 et poser un min-width pour le conteneur à 800px, sinon la mise en page ne veut plus rien dire...

Bon courage
C'est impeccable ! Ainsi utiliser overflow:hidden et placer le contenu de droite avant le contenu de gauche permet d'obtenir le rendu que je voulais.
Remarque : apparemment, ie6 gèrerait les overflow:hidden d'une autre façon à première vue.

Merci pour votre aide !
Sujet clos
Aller à