28173 sujets

CSS et mise en forme, CSS3

[Mise en page] probleme avec div

bonjour à tous et à toute,

voila en faite j'aimerais faire 3 colonne de div.
j'arrive à faire cela avec les float, le problème c'est dans la taille des div.

en fait mon div de gauche contient une image qui se repete en y (elle à un dégradé sur la droite.
le div du milieu est le contenu du site, la ou il va avoir la banniere etc etc et pour finir le calque de droite est exactement identique à celui de gauche, mais avec une image qui à un dégradé vers la gauche.
l'idée c'est que la taille des div extérieur au contenu (gauche et droite) s'adapte avec la taille du div du milieu.
le hic c'est que si je met width:100% dans le calque du milieu ca fait n'inporte quoi lol les calque extérieur passe au dessus et en dessous du calque du milieu, et si je met pas de taille pour les calque extérieur et bien on les vois pas ... et si je leur met une taille et bien il s'adapte pas ...
enfin je sais pas si vous voyez le dilemme, j'arrive pas a reproduire ce qui est simple de faire avec des tableau.

je vous met mon code Smiley smile 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="ttas.css" />
	<title>Untitled</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="global">
	<div class="col_ext_left"></div>
	<div class="content"></div>
	<div class="col_ext_right"></div>
</div>
</body>
</html>


css :

.global
{
	margin:0px;
	width:100%;
	height:100%;
}

.col_ext_left
{
	border-right:1px solid black;
	background-image: url('./images/bg1222.jpg');
	background-repeat: repeat-y;
	background-position:right top;
	height: 100%;
	float: left;
	padding:0px;
}

.content
{
	background-color: #eeeeee;
	height:100%;
	width:541px;
	float:left;
}

.col_ext_right
{
	border-left:1px solid black;
	background-image: url('./images/bg1223.jpg');
	background-repeat: repeat-y;
	background-position:left top;
	height: 100%;
	float: right;
}


rendu attendu :
upload/1946-rendu.jpg
Modifié par FaBouneY (30 Sep 2006 - 19:18)
En gros ma question, car j'ai peut-être pas était clair c'est :

pourquoi si je met width:100% dans div extérieur droit ou gauche, il s'arrete pas à la bordure du calque du milieu, et veut absolument prendre toute la page :s donc, le résultat devient délirant, forcement.
Bonjour,

Pour faire 3 colonnes de même hauteur ce n'est pas trop possible, le plus simple c'est de positionner ta page dans un bloc conteneur et d'y appliquer en background en repeat-y la totalité en largeur de ton background... et de positionner tes différents blocs (gauche-centre-droit) en background transparent (par défaut, ils le sont).

Je sais pas si je suis très clair ! j'ai un doute
Désolé, j'ai répondu sur le mauvais forum ...
Faut que j'arrête ce que je bois!!

Sinon, j'ai jeté l'oeil sur ton code, le problème vient du fait que tu ne donnes pas de width à tes blocs flottants (sauf un)...

Tu peux donner par exemple 100% à ton global, ton left 20%, centre 60%, right 20% par exemple (attention à tes border qui risquent de te faire passer un bloc en dessous).

L'idéal si tu utilises des borders, des paddings, c'est de travailler en largeur fixe, ça évite les surprises.

<edit> par contre tu auras là des problèmes de hauteur ... voir post précédent </edit>
Modifié par ghost (30 Sep 2006 - 21:57)
FaBouneY a écrit :
pourquoi si je met width:100% dans div extérieur droit ou gauche, il s'arrete pas à la bordure du calque du milieu, et veut absolument prendre toute la page :s


Je te propose de relire ta phrase.

1 - tu demande à un de tes trois blocs de prendre 100% de la largeur de son élément parent (ici : div#global) ;
2 - surprise : le bloc en question obtempère, et prend 100% de la largeur de son élément parent... ;
3 - de plus, tu t'étonnes de ce que ce bloc ne sache pas tout seul qu'il doit s'arrêter au début du bloc suivant, alors qu'il n'existe aucun lien logique entre les deux bloc en question.

Je crois qu'il y a un petit problème de méthode, et surtout pas mal de confusion dans les notions.

Créer trois div dans un même conteneur ne signifie pas que l'on crée trois colonnes. On croit trois éléments de type bloc, mais qui ne sont pas liés entre eux d'aucune manière. On pourra probablement travailler le positionnement et le rendu de ces blocs afin d'obtenir cet effet « trois colonnes », mais il n'est pas naturel. Si on veut des éléments qui soient liés logiquement entre eux, et qui s'afficheront côte à côte horizontalement tout en prenant la hauteur du plus grand d'entre eux verticalement... on peut utiliser un tableau.

Disons que ton premier bloc est flottant à gauche. Si tu veux que d'autres blocs puissent venir se loger à droite, il faudra limiter la largeur de la « colonne » de gauche (soit en fixant la largeur en pixels, soit avec une valeur en pourcentage).
Attention, il faut également noter que l'ordre des éléments dans le flux (code HTML) est important pour leur positionnement. Un bloc flottant ne pourra jamais « remonter » par rapport à ce qui aurait été sa position sans positionnement flottant.
Si on veut trois blocs côte à côte en utilisant les flottants, il faut qu'au moins les deux premiers éléments soient flottants.
Une exemple sur trois colonnes :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html


Par contre, je m'interroge : tes deux « colonnes » extérieures ont-elles un contenu ? Parce que s'il ne s'agit que de mise en forme, il y a beaucoup plus simple pour faire ce que tu souhaites. Comme le fait d'utiliser (comme le suggérait ghost) une image de fond pour le conteneur global, quitte à utiliser ensuite des padding pour que le contenu de ce bloc ne se superpose pas aux « bordures dégradées » ainsi créées.
Modifié par mpop (01 Oct 2006 - 00:31)
Sujet clos
Aller à