28173 sujets

CSS et mise en forme, CSS3

Re

J'ai un soucis avec ma mise en page

voila mon code css :
body {
	margin: 0;
	padding: 0;
	background-color: #e2e2e2;
}
#global {
	position:absolute;
	left: 50%;
	width: 750px;
	margin-left: -375px;
	background-color: #c0d3df;
	margin-top: 25px;
}
.header {
	height: 125px;
	background-image: url(visuels/blog/ban.png);
}
.menu {
	left: 0px;
	width: 200px;
	position: absolute;
}
.frame {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402d20;
	margin-left: 200px;
}
#footer {
	height: 25px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #ffffff;
	background-image: url(visuels/blog/footer.png);
}


Quand il n'y a quasiment pas de contenu dans frame, et bien le footer remonte carremment ... Smiley eek

Voyez vous une erreur ? ou une solution Smiley eek

Merçi
Modifié par yank (29 Jun 2006 - 11:59)
Salut,

As tu essayé le coup d'insérer un <hr /> avant le footer qui oblige à passer le reste en dessous, d'insérer un clear: both sur ton footer ?
Je viens d'essayer la mais non... je voulais tester une mise en page style "blog" que je n'ai encore jamais fait, genre comme le tien mais apparement ça ne me réussi pas Smiley langue
Je pense que c'est du a ton position:absolute de ton menu.
Vu qu'il n'est plus dans le flux, le footer n'y fait pas attention.
Tente de mettre ton menu et ton frame en float left et un clear:both a ton footer. Ainsi, il restera tjs en bas de ton menu
Oryo a écrit :
Je pense que c'est du a ton position:absolute de ton menu.
Vu qu'il n'est plus dans le flux, le footer n'y fait pas attention.
Tente de mettre ton menu et ton frame en float left et un clear:both a ton footer. Ainsi, il restera tjs en bas de ton menu

non toujours pas ... Smiley sweatdrop
N'ayant pas le temps de voir ton code pour t'aider(chuis en train de bosser normalement lol) je t'envoie ce lienTuto pour 2 colonnes en float

Le site est en anglais mais il est très bien réalisé. Il explique étape par étape la réalisation donc ce n'est pas difficile à comprendre. Libre à toi par la suite de faire tes colonnes moins larges etc...

Regarde après le tutorial numéro 8. Le numéro 9 est réalisé pour créer 3 colonnes.
est ce que ça peut venir du fait que mes div soient des class et non des id ?

a par # global et # footer le reste sont des . class
Modifié par yank (28 Jun 2006 - 19:24)
yank a écrit :
est ce que ça peut venir du fait que mes div soient des class et non des id ?

a par # global et # footer le reste sont des . class


Le fait d'avoir des id et des class n'a ps de répercutions, SAUF si dans ton xHTML tu donnes la même id à plusieurs éléments.
Bon j'ai reussi à "bloquer" mon footer en dessous du menu quand le contenu ne dépasse pas le menu... Smiley biggol

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #e2e2e2;
}
#global {
	position:absolute;
	left: 50%;
	width: 750px;
	margin-left: -375px;
	background-color: #c0d3df;
	margin-top: 25px;
}
.header {
	height: 125px;
	background-image: url(visuels/blog/ban.png);
}
.menu {
	float:left;
	width: 200px;
	background-color: #99FF99;
}
.frame {
	float:left;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402d20;
	width: 550px;
}
#footer {
	float:left;
	height: 25px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #ffffff;
	background-image: url(visuels/blog/footer.png);
}


Bon par contre j'ai un autre soucis maintenant que je vais poster dans un nouveau sujet Smiley ohwell