28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je développe actuellement un site dont le squelette est celui-ci :
upload/6643-css.png
Tous les divs sont censé être fixe, sauf le content, qui lui est dynamique (utilisation du DOM HTML avec javascript), et j'aimerais que le left et le right, s'allonge au même rythme, tout en gardant la même idée de structure que l'image ci-dessus.
Je suis débutant dans la manipulation du CSS, et apres moults essais avec toutes les astuces que j'ai pu trouver à droite et à gauche, il y a toujours un div qui n'arrive jamais à se positionner correctement.

Si quelqu'un peut me guider dans cette tâche, merci d'avance.
Merci pour le lien, mais je me sens un peu perdu quand même.
Voila mon dernier essai, avec des float...
J'ai court-circuité pour le moment le bottom et le right.
html {
background-color:orange;
}

body{
background-color:blue;
color:black;
font-family:Verdana, Sans-serif;
font-size:small;

margin:0;
padding:0;
}

#i_top{
background-color:#69c;
height:60px;
width:100%;
}

#i_content{
float:right;
background-color:#eee;
width:88%;
}

#i_left{
float:left;
background-color:#28b;
height:100%;
width:12%;
}

#i_right{
display:none;
}

#i_bottom{
display:none;
}


Le body s'adapte bien à mon content grâce à un <div style="clear:both"><div> à la fin de celui-ci, mais mon left refuse catégoriquement de s'adapter verticalement, il reste inexorablement écraser...
Re . Laisse tomber les float.
Ton div left est en height 100% alors que son div parent est lui aussi en 100%. J'insiste pour te dire que le lien donné lu jusqu'au bout te permettra de résoudre ton probleme qui restera sans cela insoluble en css.

tes colonnes droites et gauches ne doivent former qu'un seul et même div dont l'arriere plan simulera deux colonnes. le div central sera positionné au milieu avec des marges et lorsqu'il s'agrandira, il entrainera avec lui les deux colonnes.
un exemple ici

Il suffit de faire une recherche dans alsa sur le mot colonnes et tu aura au moins 30 sujets qui traitent de la même chose.
Modifié par Ralfman68 (17 May 2006 - 13:32)
Arf, en effet je viens de comprendre l'astuce, mais le problême c'est que je me dois de garder tel quel mes deux divs (left et right) dans mon application (une sorte de CMS), qui se doit de pouvoir gérer tous les cadres séparément. Merci quand même pour ta réactivité.
Edit - Ahah, encore une fois, pris de vitesse : je laisse ma réponse quand même. Smiley cligne

Pour t'aider à comprendre Samy, quelques petites images (encombrantes, mais légères).
Ce qu'on appelle colonnes factices, c'est une image de fond qui va simuler les colonnes. On la place généralement sur un div#conteneur (celui qui contient le design). (Ici, ça correspond à l'image "fond".)

http://univers-fusco.com/tests/squelette.png

http://univers-fusco.com/tests/fond.png

http://univers-fusco.com/tests/fond_squelette.png

http://univers-fusco.com/tests/entete_bdp.png

http://univers-fusco.com/tests/contenu.png

http://univers-fusco.com/tests/final.png
Modifié par Smiley neko (17 May 2006 - 14:05)
Ok tout s'éclaircit peu à peu...
J'aime bien l'explication avec les images.

Je vais essayer tout ca et je vous tiens au courant. Merci encore...