28173 sujets

CSS et mise en forme, CSS3

[RESOLU merci!]Site 3 colonnes. 1 seule fixe

bonjour tout le monde,
voila, je suis en train de faire un site, et un probleme se dresse devant moi.
je voudrais faire 3 colonnes (rubrique1, rubrique2, rubrique3)
la rubrique3 aurait une largeur fixe (350px ennviron)
les deux autres auraient des largeurs variables.
voici un dessin tout bete pour expliquer

http://tontonyoyo84.free.fr/exemple.png

etvoila ce que j'arrive a faire pour le moment:
http://tontonyoyo84.free.fr/

es ce que quelqu'une aurait une idée pour me sauver ??

merci d'avance!
Modifié par Tye (25 Oct 2007 - 00:53)
Bonsoir,

Pas d'idée personnellement, mais je crois que ton URL pointe sur ton serveur local, on ne peut pas accéder à ta page.

Bonne soirée.
hi,

inclus ta rubrique 3 dans ta div page.
Mets cette propriété css :


.page div{
    display:inline;
    float:left;
}

#rubrique1, #rubrique2{
    width:350px;
}

#rubrique3{
    width:100%;  //si tu veux que la rubrique 3 occupe tout le reste de la page
}
ca ne marche pas..
en mettant ca, mes blocs 1 et 2 ont une largeur fixe (de 350px) et je ne veux pas.
je voudrais que lorsque je retrécie la page les deux blocs 1 et 2 diminue en meme temps.. mais je commence a douter que ce soit faisable :s

sinon a quoi sert la propriété < display: inline; > ??
olala j'ai fait l'inverse de ce que tu voulais.. désolé, j'aurais du relire ton premier post...


.page div{

    display:inline;
    float:left;

}



#rubrique1, #rubrique2{

    width:50%;

}



#rubrique3{

    width:350px;

}


bon, j'ai pas essayé, mais ca devrait être qqch dans ce goût là....

display:inline sert à ce que deux div soient sur la même ligne (deux div, ou deux balises qui d'habitude font un retour à la ligne)
par default, le display d'une div est à "block", block force le retour à la ligne...
tiens, lis ca :
http://www.w3schools.com/css/pr_class_display.asp
ok Merci pour le renseignement.

Alors j'ai essayer ce que tu m'a dit: j'y suis presque, mais les blocks ne sont pas sur la meme ligne ....

http://tontonyoyo84.free.fr/

merci de ton aide en tout cas Smiley cligne

ha oui et pkoi le 
.page div{}

au lieux de 
#page{}
??
Modifié par Tye (25 Oct 2007 - 00:24)
pour les mettre sur la meme ligne as tu essayé la commande "clear" ? peut etre que ...

et le 


.page div{}


au lieux de

#page{}

??


tout simplement une boite plutot qu'une classe ca me parait aussi plus adapté
Modifié par Ankart (25 Oct 2007 - 00:26)
#page == boite
et
.page == class
c'est bien ca ??
j'ai essayé display:clear; rien y fait..
le truc c'est: es ce que je dois rajouter ces propriétés en plus des miennes ou alors je remplace?
bon en bidouillant un peu j'ai réussi a faire ce que je voulais:
http://tontonyoyo84.free.fr/

mais y'a un truc qui m'échappe c'est que normalement il y'a un conteneur de couleur grise qui englobe rubrique1 et rubrique2. et la il n'y ai pas du tout ....
Bonjour,

Si aucun pied de page ou autre contenu n'est prévu en dessous de la troisième colonne, on peut faire ceci:
[b]HTML:[/b]
<div id="rubriques1-2">
	<div id="rubrique1">...</div>
	<div id="rubrique2">...</div>
</div>
<div id="rubrique3">...</div>

[b]CSS:[/b]
div#rubriques1-2 {
	overflow: hidden; /* évite le dépassement des descendants flottants */
	height: 1%; /* idem pour IE6, via le HasLayout */
	margin-right: 300px;
}
div#rubrique3 {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
}
div#rubrique1 {
	float: left;
	width: 50%;
}
div#rubrique2 {
	margin-left: 50%;
}

Et on y est.

Si on veut pouvoir placer des contenus sous toutes les colonnes quelle que soit leur hauteur, il faudra utiliser uniquement les flottants. On devra un peu bouleverser l'ordre du code HTML:
[b]HTML:[/b]
<div id="rubrique3">...</div>
<div id="rubriques1-2">
	<div id="rubrique1">...</div>
	<div id="rubrique2">...</div>
</div>

[b]CSS:[/b]
div#rubrique3 {
	float: right;
	width: 300px;
}
div#rubriques1-2 {
	overflow: hidden; /* évite le dépassement des descendants flottants */
	height: 1%; /* idem pour IE6, via le HasLayout */
	/* Pas besoin de marge, grâce au contexte de formatage et au HasLayout */
}
div#rubrique1 {
	float: left;
	width: 50%;
}
div#rubrique2 {
	margin-left: 50%;
}
Tye a écrit :
mais y'a un truc qui m'échappe c'est que normalement il y'a un conteneur de couleur grise qui englobe rubrique1 et rubrique2. et la il n'y ai pas du tout ....

Faire une recherche sur le dépassement des flottants. Smiley cligne
yahouu Florent tu viens de résoudre mon dernier petit soucis !!
j'ai pas tres bien saisis le pourquoi du 
height: 1%


pour le reste, je sais pas pourquoi j'y avais pas pensé. haha
merci a tout le monde pour votre aide aussi rapide!!!
pour nous remercier met un petit Smiley resolu en plus, dans le sujet de ton premier post en modifiant le titre.

A bientot Smiley smile
Sujet clos
Aller à