28220 sujets

CSS et mise en forme, CSS3

Mise en page css avec 2 colonnes + 1 header, à l'aide !

Amis css du jour bonjour ^^

Alors je vous explique mon problème : je suis en train d'essayer de faire une mise en page css sans table avec un header en haut de la page qui occupe 100% de largeur et en dessous une colonne avec une largeur fixe mais qui prend tout le reste de la hauteur et la 2ème colonne qui prend le reste de la place sur les 2 axes ( voir images en fin de post parce que ça doit etre un peu désordonné comme ça ).

Et en plus, par pas simplifier l'affaire sinon ça serai pas marrant le css, je voudrai que chaque colonne puisse avoir un scroll indépendant en auto.
Et bien sûr le tout compatible sur firefox ainsi qu'IE Smiley eek .

Voila, ça fait presque 3 semaines que je suis dessus, alors je demande de l'aide avant de sauter par la fenêtre Smiley biggol (bon je suis au rez de chaussez, me ferai pas trop mal.... ^^).

J'ai tout essayé, positionnement absolu, relatif, float left ou right sans compter tout les changement des les div je sais même plus ou j'en suis !

Un des problèmes que j'ai rencontré particulièrement c'est que le scroll ne s'affiche pas entièrement, il est décalé de la hauteur du head !! et quand j'avai reussi a avoir un resultat correct ça marchai pas sur l'autre explorateur...

Enfin voila vous savez tout, j'espère ne pas vous avoir découragé d'avance avec la taille du post, je n'ai moi même pas le courage de relire ce que j'ai écris Smiley lol .

Si vous trouvez une solution avec un scroll general qui fait bouger le menu et le body en même temps ça sera déjà pas mal, mais y faut pas que le head soit inclus dans le scroll.

Place aux images :

upload/2919-cassetete.jpg

Conclusion, 3 div + 2 scroll = casse tête chinois.

Merci d'avance si vous trouvez quelque chose Smiley smile a bientôt.
Salut slyfog,

D'après ce que j'ai compris, tu voudrais pouvoir faire descendre le contenu de ton body s'il est plus long que ton cadre et idem avec le menu.

Si c'est ca, il existe la propriété overflow.

Il suffit que tu mettes :

#menu {
 overflow: auto;
}

#body {
  overflow: auto;
}


La scrollbar apparaitra seulement si le contenu de ton bloc est trop long. Par contre, tu auras une scrollbar horizontale et verticale.

En esperant que ca t aide et que ca soit ca que tu cherche.
Modifié par ymhotepa (12 Aug 2005 - 10:01)
C'est bien ça que je veux faire mais quand j'utilise le overflow la barre de défilement est coupée en bas, je comprend pas pourquoi :s.

Ca la coupe de la hauteur du header, en haut elle s'affiche bien mais en bas coupée...
Est ce que tu pourrais mettre la partie html et la partie css pour voir à quoi ressemble ta page en terme de structure.

Peut etre que certaines propriétés css se chauvauchent.

Peut etre qu avec le code, on y verra plus clair.
Je vous met le code html et css de ma page :


<html>
    <head>
		<link rel="stylesheet" media="screen" type="text/css" title="normal" href="style.css" />
    </head>
    <body>
	
	<div id="head"><p>Header</p></div>

	<div id="main">
		<div id="menu"><p>menu</p></div>
		<div id="page"><p>Body<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br /></p></div>
	</div>

	
	</body>
</html>


et du coté du css :


html, body
{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#main
{
height: 100%;
width: 100%;
overflow: auto;
}

#head
{
	width: 100%;
	background: #99c;
	height: 20px;
}

#main #menu
{
float: left;
width: 200px;
height: 100%;
background-color: #99f;
}

#main #page
{
margin-left: 200px;
height: 100%;
background-color:#F4F1F8;
}

p{margin: 0;}


Là par exemple on a (en plus du scroll qui s'affiche mal) :
-sur firefox quand on defile vers le bas, la partie des divs non affiché sont blancs
-sur IE, seule la partie du div qui a été étendu par le texte se paye le luxe de rester dans sa couleur d'origine

bon y'a aussi un p'tit décalage entre les 2 colonnes sur ie mais ça un petit hack resoudra le pb.

Voila, vous pouvez essayer de copier le code pour voir ce que ça donne, sinon je vais essayer de mettre ça sur un serveur pour que vous ayez pas besoin de copier le code, bon d'ailleur je le fait dessuite ^^

1 minute.......
cuteftp...


http://membres.lycos.fr/slyfog/


voila ^^ désolé pour la pub sur le coté mais ça change rien à ce que donne le site.

Donc la j'ai mis qu'un scroll, un sur chaque div pourra peut etre resoudre qq problèmes mais je sais plus ou j'en suis la ^^ je vais ressayer de mettre les 2 mais y'a d'autres problèmes quand on en met 2.

A bientot !!

ps: l'exemple 12 ne correspond ne correspond pas car les div ont une hauteur fixe Smiley decu
Sujet clos
Aller à