28172 sujets

CSS et mise en forme, CSS3

Trois colonnes en css

Salut à tous,

je cherche depuis ce matin sur internet une technique pour avoir trois colonnes en css, sans float (incompatible avec mon css :

<div style="background: url(background.png);">
<img src="bordure haut">
 mes colonnes ici
<img src="bordure bas">
</div>
).

background.png étant une longue barre blanche de 2px et de 1010 de largeur
avec deux bout bleu sur les côtés ;p

J'ai trouvé des solutions avec position:absolute, comme ici.

Le seul problème c'est que je voudrai que les trois colonnes soient libres en tailles, et pas dirigées par celles du milieu, comme c'est le cas avec le code.

(si la colonne milieu fait 600px de longueur et que la droite en fait 800, le background va s'arrêter juste après celle du milieu, se fermer, et le reste de la colonne de droite part dessous).

voir la capture d'écran
( ce qui descend dans la couleur de background appartient à la colonne droite).

Que faire :'(

merci

NB : Colonne gauche : 400px
Colonne milieu : 200px
Colonne droite : 400px
Modifié par The_92 (24 Aug 2007 - 20:31)
Bonjour,

Un peu de précisions serait peut-être utile.

a écrit :
sans float (incompatible avec mon css
En quoi est-ce incompatible ?


a écrit :
les trois colonnes soient libres en tailles
C'est-à-dire ?
La taille. Dans quelle direction ?


a écrit :
600px de longueur
Qu'est-ce que c'est la “longueur” ?
En CSS, on parle plutôt de largeur et de hauteur.

Tout semble OK dans la capture.


Tu définis des tailles (width ?)
 
a écrit :
NB : Colonne gauche : 400px
Colonne milieu : 200px
Colonne droite : 400px
et ça ne suffit pas ?
 
Modifié par Gihef (24 Aug 2007 - 21:20)
Bon alors, mes backgrounds m**dent complètement quand je met des float, je vous ai donné le code quasiment exact, le voici :


<div id="conteneur">
<img src="images/backgroundh.png" style="margin-left:-7px;">

<div id="gauche">
<img src="images/last-news.png"><br />
<div id="lastnews"><?php include("last/last_news.php"); ?></div>
<div class="no_padding"><img src="images/smileys-hasard.png"><img src="images/skin-hasard.png"></div>
<div id="smileys_hasard"><?php //include("blocks/smiley-hasard.php"); ?><br />
<img src="images/astuces-hasard.png">
<div id="astuce_hasard">e</div></div>
<div id="skin_hasard"><?php include("blocks/skin-hasard.php"); ?>
<img src="images/scripts-hasard.png">
<div id="script_hasard">e</div></div>
<div class="no_padding"><img src="images/ShoutBox.png"><img src="images/pub.png"></div>
<img src="images/apprendre-skinner.png">
</div>

<div id="droite">
<img src="images/block-compte.png"><img src="images/pub.png"><br />
<div id="block_compte"><?php include("blocks/compte.php"); ?></div>
<div id="pub"><img src="images/pub_adsense.png"></div>
<img src="images/last-posts.png">
<div id="derniers_posts"></div>
<img src="images/last-fichiers.png">
<div id="derniers_fichiers"></div>
<img src="images/SoundPacks.png"><br />
<img src="images/autre-actualite.png">
<div id="autre_actu"><?php include("blocks/autres-news.php"); ?>|<br />||<br />||<br />||<br />||<br />||<br />||<br />| lol
</div><br />
</div>


<div id="centre">
<img src="images/Et.png"><br />
<div id="Et">
<div style="padding-left: 3px;">
<?php include("blocks/et.php"); ?>
</div>
</div>
<img src="images/Menu.png"><br />
<div id="menu_centre"><?php include("blocks/menu_c.php"); ?></div>
<img src="images/avatar-hasard.png"><br />
<div id="avatar_hasard"><img src="http://www.messbox.net/upload/User/1171473905.gif"></div>
<img src="images/coup-de-coeur.png"><br />
<div id="coup_de_coeur"><img src="" width="120"></div>
<img src="images/services.png">
<div id="services"><?php include("blocks/services.php"); ?></div><br />
<img src="images/top-5-membres.png"><br />
</div>

</div> <!-- fermeture du conteneur -->
<img src="images/backgroundb.png">


Du côté du css, c'est :

#conteneur
{
padding-left: 7px;
width: 1010px;
background: url(../images/backgroundc.png) repeat-y top left;
}


les deux images (backgroudh.png et backgroundb.png sont des bordures haut et bas).

Du côté de la taille je parle en hauteur pour mon exemple.

Et dans ma NB, je dis la taille en largeur que je voudrai Smiley cligne

merci

NB : Je veux donc des colonnes qui n'aient aucune taille, que tout dépende du texte qui est mis dans chaque Smiley cligne
Modifié par The_92 (25 Aug 2007 - 09:07)
Sujet clos
Aller à