28172 sujets

CSS et mise en forme, CSS3

5 colonnes dont deux variables

Je souhaite faire un site constitué sur une base de 5 colonnes dont les deux aux extrémité seront variable pour prendre toute la largeur restante, le problème c'est que je suis un debutant en css, je viens juste de quitter les tableaux lol !!!
Je veux deux colonnes variables pour pouvoir bien gerer les "background" de" ces colonnes.

Je n'arrive pas a rendre variable ces deux colonnes sur la même ligne !
Salut !

As-tu jeté un coup d'oeil au tuto qui sont sur le site ?
Il y a des exemples intéressants.
Je veux juste faire 3 colonnes centrales fixes et les 2 externes etirables juska la page entiere
Modifié par Shepard34 (04 Apr 2008 - 11:57)
Donc ci j'ai bien compris, tu as une structure de site en 3 colonne (c'est à l'intérieur que tu mets ton contenu + menu etc.) et les deux autres colonnes une à gauche et l'autre à droite qui sont en fait le background.
Ma question est pourquoi veut tu faire deux colonnes pour ce fameux background ?

Parce que finalement si on y réfléchis bien, tu as une structure de site basique (3 colonnes) et derrière un background (qui peut etre défnie dans ta balise body.
Modifié par ingrid04 (04 Apr 2008 - 12:14)
En fait je veux deux colonnes externes pour gérer leurs backgrouds respectif, cest deux backgrouds diferents ! cest pour ca
ah ok !

Mhhh là je te peux pas t'aider moi même j'ai des difficultés avec ça.
Quoique j'ai une idée. Si tu connais la largeur de ton bloc principal.
Tu peux donc appliquer une image de fond à ton body.

Je m'explique :
Tu sais que ton site fait 500pixels de largeur donc à partir de là, tu crées une image dans photoshop, d'une largeur de 1200px par exemple. Au centre du mets un blanc de 500px (site), et sur les cotés tu mets la couleur que tu veux.
Enfin dans ta Css tu fais répéter cette image en hauteur.

voila
oui mais je veux absolument avoir 5 colonnes dont les deux aux extremites varibale ki prenne le reste de la largeur a part egal :!
Salut,

On pourrait voir le design. J'ai déjà vu passer beaucoup de layout et rare sont ceux qui ont vraiment besoin de 5 colonnes réelles.

Ps : Aussi, essaye de faire un effort dans la rédaction de tes messages, certains sont un peu kikooo lol Smiley cligne
jai un site sous forme de tableau au http://www.prison-break-center.fr , comme tu pourras le constater il y a une partie centrale, les ombres sur le cote et les parties blanches, cest ces parties que je ve mettre sous forme de div variable ki prend la taille sur le reste de l espace restant pour pouvoir bien gere les background ki seront a l interieur
A vue de nez, je te fais ton design en deux div principale Smiley cligne

L'idée est d'avoir une image qui représente l'ombre de gauche, et une autre l'image de droite. En imbriquant les deux div de la sorte suivante : 
<div class="wrapper"><div class="content"></div></div>

Tu peux facilement dessiner tes deux ombres et centrer ton design. Par exemple avec un code similaire à ceci 
.wrapper { 
background: black url("mon_ombre_gauche") repeat-y 0 0; 
}
.content {
padding: 0 25px;
background: url("mon_ombre_droite") repeat-y 100% 0; 
}


As-tu l'intention de placer des background plus complexe dans le fond (les deux bords actuellement blanc) et dans le fond du contenu (actuellement noir) ?
Si oui, je suis presque sur que tu peux te passer de toute <div> superflues Smiley cligne
Modifié par Antoine Cailliau (04 Apr 2008 - 15:50)
Je n'ai pas dis que c'était la solution, d'ailleur ce n'est pas la solution. Je ne donne jamais des solutions complètes.

À toi d'apprendre et de comprendre ce que tu fais.
jai un code theoriquemùent ca devrai marchai selon moi , mais non ! alors je nai sait que faire
html :
[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=utf-8" />
<title>Prison Break Center</title>
<link href="v2/pages/style_principal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="global">
  <div id="espace_gauche">Espace</div>
  <div id="ombre_gauche"></div>
  <div id="contenu">Contenu</div>
  <div id="ombre_droite"></div>
  <div id="espace_droit">Espace</div>
</div>
</body>
</html>


CSS :
[/code]
@charset "utf-8";
#global {
	height: 100%;
	width: 100%;
}
#espace_gauche {
	float: left;
	background-color: #9999FF;
	width: auto;
}
#ombre_gauche {
	width: 20px;
	float: left;
	background-color: #99CCCC;
}
#contenu {
	width: 946px;
	float: left;
	background-color: #CCCCFF;
}
#ombre_droite {
	width: 20px;
	float: left;
	background-color: #99CCCC;
}
#espace_droit {
	float: left;
	background-color: #9999FF;
	width: auto;
}
Sujet clos
Aller à