28173 sujets

CSS et mise en forme, CSS3

Alignement de 3 div imbriqué - [non - résolu ou non résolvable]

Jaimerais mettre mes 3 div dans un div container

voici l'ordre désiré dans le container

divleft(width:30px)-divmiddle(width en pourcentage)-divright(width:30px)


un petit visuel pour bien expliquer ce que je veux arriver a faire :


http://www.racinede2.com/forumalsa/divalign1.jpg

et voici ce que ca me donne : cliquer ici
-sur le lien on voir le premier divleft bleu suivit du divmiddle qui en plus de prendre toute la place, fait foutre le camp a mon divright Smiley biggol

*** le div container a un width dynamique donc il est important que le div middle prenne toute la place a l'intérieur du div sans aller par dessu div right et div left
voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test div</title>
<style type="text/css">
<!--
#container {
	width:100%;
	height:30px;
	background:#006600
}

#left {
	position:relative;
	float:left;
	width:30px;
	height:30px;
	background: #0033CC
}
#right {
	position:relative;
	float:right;
	width:30px;
	height:30px;
	background: #0033CC
}
#middle {
	position:relative;
	float:right;
	width:100%;
	height:30px;
	background: #000000 
}

-->
</style>
</head>

<body>
	<div id="container">
	
	<div id="left">
	
	</div>
	<div id="middle">
	
	</div>
	<div id="right">
	
	</div>
	
	</div>
</body>
</html>


Voila tout y est je crois! comme c'est mon premier post sur ce forum j'espère avoir respecter la procédure Smiley lol

merci Smiley smile
Modifié par radicis (30 Jun 2007 - 08:59)
Administrateur
Bonjour et bienvenue,

radicis a écrit :
comme c'est mon premier post sur ce forum j'espère avoir respecté la procédure Smiley lol

merci Smiley smile

Presque Smiley lol
Merci d'éditer ton message pour y rajouter les balises [ code] ... [ /code] (sans les espaces) afin que le code soit bien plus lisible pour tout le monde Smiley cligne

Felipe
Modifié par Felipe (30 Jun 2007 - 08:23)
a écrit :
Presque lol
Merci d'éditer ton message pour y rajouter les balises [ code] ... [ /code] (sans les espaces) afin que le code soit bien plus lisible pour tout le monde cligne


c'est corrigé!

merci de l'info!
Hello,

Vérifies ton code CSS : tu as deux fois le sélecteur #right, alors que la deuxième fois on attendrait plutôt #middle.

Si ça ne corrige pas ton problème, tu aurais intérêt à parcourir le tutoriel suivant :
Un design fluide avec trois «colonnes», grâce au positionnement flottant.

Par contre, je m'interroge sur tes « colonnes » de 30 px de large. Je suppose que ça ne sert pas à caser du contenu, mais des éléments de décoration ?
Auquel cas, cette structure en trois colonnes n'est sans doute pas la plus indiquée.

On peut avoir un aperçu du design à intégrer ?
Il y a au moins une dixaines de solutions différentes pour ton problème, quels sont les comportement pour la hauteur ? Les 3 doivent avoir la même ? Middle regit les deux autres ?
-pour les 2 coté de 30 px c'est des coin de tableau avec une image pgn pour la transparence.

-pour le #right de trop que javais dans mon code ci-haut(que j'ai changer) cest une erreur de frappe dsl mais dans ma version j'ai #middle comme ci-haut a présent

vous voyer, le div middle doit prendre tout le reste de la largeur exepter les deux 30 px des divs right et left, je rapelle que #middle #left # right on une hauteur fixe de 30px et quil sont tout les 3 dans un div #container avec une largeur en pourcentage aussi.

voici une nouvelle photo :
http://www.racinede2.com/forumalsa/divalign1a.jpg

merci

a écrit :


Il y a au moins une dixaines de solutions différentes pour ton problème, quels sont les comportement pour la hauteur ? Les 3 doivent avoir la même ? Middle regit les deux autres ?

*Donne moi en au moins une! Smiley langue
Modifié par radicis (30 Jun 2007 - 09:12)
La solution la plus simple serait de mettre en absolute soit les coins soit le corps.
Par exemple :

#middle {position:absolute; top:0; height:30px; right:30px; left:30px;}
#right {}

Après il y a un truc plus propre qui serait de mettre un conteneur et deux contenenants + ton middle :

#conteneur {height:30px; width:100%;}
#contenant1 {background:url() top left;}
#contenant2 {background:url() top right; padding:0 30px;}
#corps {}
le code serait <div id="conteneur"><div id="contenant1"><div id="contenant2"><div id="corps">mon super texte super comme il faut</div></div></div></div>

Yen a d'autres encore des solutions, t'as la plus rapide (et surement une des plus sales vu que tes div left et right seront vide) et la plus propre à mes yeux Smiley smile
Modifié par noklio (02 Jul 2007 - 09:46)
Salut!

Pour on problème en partant de ton code de départ et sans destructurer ton hmtl, moi j'opterais pour ceci:
<div id="container">
	<div id="left"></div>
	<div id="middle"></div>
	<div id="right"></div>
	</div>


et pour le css 
#container {
	width:100%;
	height:30px;
	background:#006600
}



#left {
	float:left;
	width:30px;
	height:30px;
	background: #00BBBB
}

#right {
	float:right;
	width:30px;
	height:30px;
	background: #0033CC
}

#middle {
	float:left;
	height:30px;
	background: #000000 
}


et voili voilou!
@ zecaraz : ta solution ne marchera pas, car div#middle, que tu passes en float: left sans lui donner de largeur, prendra la largeur de son contenu, et non pas toute la largeur disponible moins les 30px de chaque côté.

Bon, on va faire les choses simplement.
Déjà, il aurait été pas mal d'avoir un aperçu du design à réaliser, mais l'URL indiquée par radicis donne une erreur 404. Impossible donc de savoir si le bloc central aura un fond uni, ou s'il doit avoir pour fond une image qui se répète.

Partons sur l'option la plus compliquée, une image qui se répète.
On pourrait effectivement utiliser le positionnement absolu :
[b]HTML :[/b]
<div id="conteneur">
	<div id="deco-1"></div>
	<div id="deco-2"></div>
	<div id="contenu">...</div>
</div>

[b]CSS :[/b]
div#conteneur {
	height: 30px;
	position: relative;
}
div#deco-1 {
	position: absolute;
	top: 0; left: 0;
	width: 30px; height: 30px;
	background: ...;
}
div#deco-2 {
	position: absolute;
	top: 0; right: 0;
	width: 30px; height: 30px;
	background: ...;
}
div#contenu {
	margin: 0 30px;
	background: ...;
}


Mais on pourrait aussi imbriquer des blocs et jouer sur les images de fond et les margin ou padding.
[b]HTML :[/b]
<div id="conteneur">
	<div id="conteneur-bis">
	...
	</div>
</div>

[b]CSS :[/b]
div#conteneur {
	background: black url(fond-gauche-centre.png) no-repeat left top;
}
div#conteneur-bis {
	height: 30px;
	padding: 0 30px;
	background: url(fond-droite.png) no-repeat right top;
}

Dans ce deuxième exemple, l'image fond-gauche-centre.png a une partie gauche de 30px de large, et une partie de droite qui correspond à l'image du centre, répétée autant que nécessaire en largeur (par exemple sur 2000px).
L'image fond-droite.png fait juste 30px de large (coin de droite).

On peut aussi adapter ce système d'imbrications avec trois blocs :
[b]HTML :[/b]
<div id="conteneur">
	<div id="conteneur-bis">
		<div id="conteneur-ter">
		...
		</div>
	</div>
</div>

[b]CSS :[/b]
div#conteneur {
	padding-left: 30px;
	background: black url(fond-gauche.png) no-repeat left top;
}
div#conteneur-bis {
	padding-right: 30px;
	background: url(fond-droite.png) no-repeat right top;
}
div#conteneur-ter {
	height: 30px;
	background: url(fond-centre.png) repeat-x center top;
}

Et voilà.

Attention toutefois à l'extensibilité en hauteur, notamment si l'un de ces blocs doit accueillir du texte.
@Florent : Il me semblait qu'à la demande de radicis la div middle devait s'exprimer en pourcentage, il suffirait donc de déclarer un width:XX% au bloc conteneur.. Voir aussi à jouer avec les padding si le besoin est de "caler" autrement que sur toute la longueur le bloc middle..
Il est vrai que sans le rendu du design plusieurs solutions sont envisageables, dont la tienne avec le positionnement absoluequi fonctionne très bien Smiley cligne
Sujet clos
Aller à