28173 sujets

CSS et mise en forme, CSS3

[Résolu] Contenu ajusté automatiquement avec une page à 100%

Bonjour à tous,

J'ai une petite mise en forme qui s'étend jusqu'au bas de la page.


* {
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: lem;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}
html, body {
	position:relative;
		margin:0 auto;
		padding:0;
		height:100%;
}
#header {
	height: 102px;
	background-color: #000000;
	border-bottom: 1px solid #FF0000;
}
#img_logo {
	width: 400px;
	height: 100px;
	float: left;
	margin-left: 25px;
	background-color: #FFFF99;
}
#content {
	position:relative;
	width:100%;
	margin:0 auto;
	min-height:100%;
	background-color: #666666;
}
#menu_left {
	position:absolute;
	top:0;left:0;
	width:200px;
	min-height:100%;
	background-color:#000000;
}	
#pied_de_page {
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:30px;
	background-color:#000000;
	border-top:2px solid #FF0000;
}
.blog_box {
	border:1px solid #FF0000;
	position:absolute;
	left:260px;
	top:50px;
	bottom:13px;
	width:550px;
	height:1000px;
	background-color:#0000FF;
} 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style type="text/css"> 
#content {
		height: 100%;
}
#menu_left {
		height: 100%
}		
</style>
<![endif]-->
</head>

<body>

<div id="header">
	<img id="img_logo" src="pictures/Logo.gif" alt="Logo" />	
</div>

<div id="content">
	<div id="menu_left"></div>
	<div class="blog_box"></div>
<div id="pied_de_page"</div>
</div>

</body>
</html>


Le probléme : Ma DIV "blog_box" dépasse le "pied_de_page" et donc mon
"content" ne s'agrandit pas automatiquement en hauteur.

J'ai beau me retourner la tête je trouve pas
Si vous avez une idée? parce que là je sêche! Smiley lol
Modifié par ockonor (13 Nov 2006 - 15:21)
regarde sur le ste il y a des exemples tout fait je ne sais plus le lien mais je suis sur que ça pourra t'aider
Avec tout le respect que je te dois,

J'ai déjà farfouillé dans le site, sinon je n'aurais pas poster!

Si tu veux parler des gabarits, il n'y en à aucun avec avec du 100% en heigth --> min-height. Donc si vraiment j'ai ratés quelque chose, donne moi juste le lien, je veux pas vous faisiez le travail à ma place! Smiley cligne
je crois que j'ai eu le meme probleme que toi
voilà mon css

#header {
height: 100px;
background-color: #FFFFFF;
}
#conteneur {
position: absolute;
width: 80%;
background-color:#FFFFFF;
}
#centre {
background-color:#FFFFFF;
margin-left: 180px;
min-height: 600px;
height: auto !important;
height: 600px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #FFFFFF;
}
Merci Jiojio et Raphael,

Je me penche sur ton css et aussi je vais repasser en revue le dernier tuto sur la mise en page.Je vous tiens au courant.

PS: Il à l'air pas mal le nouveau tuto Smiley cligne
Bonjour,

Et bien comme je disais, le tutoriel est trés bien fait et ma permis de résoudre mon problème.

Cependant, pour éviter le double postage, j'ai encore un petit problème ( si on peu dire) :Voilà donc, mon site de test est accessible ici.

Je voudrais que mes 
div.bloc_blog
s'agrandissent seulement en hauteur quand j'ajoute du contenu et non en largeur.

J'ai essayé avec overflow:hidden, mais évidement il le restreint bien en largeur mais aussi en hauteur!

Encore une fois à court d'idées Smiley confus
Un petit indice?
Merci
Modifié par ockonor (12 Nov 2006 - 14:32)
Lol j'ai du dire un bêtise Smiley confus ,

J'ai bien tout lu sur les positions et les attribus.

Désolé, mais si je poste ce message c'est que j'ai essayé.

UP et désolé encore
Modifié par ockonor (12 Nov 2006 - 18:59)
Bonjour,

Jette un oeil pour une idée, je ne sais pas si c'est cela que tu recherches !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
		
		<title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">
* {

	border: 0;

	font-family: Arial, Helvetica, sans-serif;

	font-size: lem;

	font-weight: normal;

	font-style: normal;

	text-decoration: none;

}

html, body {
	position:relative;
		margin:0 auto;
		padding:0;
		height:100%;
}

#header {
	height: 20%;
	background-color: #000000;
}

#img_logo {
	width: 400px;
	height: 100px;
	float: left;
	margin-left: 25px;
	background-color: #FFFF99;
}

#content {
	width:100%;
	margin:0 auto;
	height:100%;
	background-color: #666666;
}

#menu_left {
	position:absolute;
	top:0;left:0;
	width:200px;
	min-height:100%;
	background-color:#000000;
}	

#pied_de_page {
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:30px;
	background-color:#000000;
}

.blog_box {
	width:550px;
	min-height: 80%;
	margin-left: 350px;
	background-color:#0000FF;

}
		</style></head>
	<body>


<!--[if lte IE 6]>
<style type="text/css"> 
#menu_left {
		height: 100%
}		

.blog_box {
		height: 80%
}
</style>
<! endif -->

</head>

<body>

<div id="content">
<div id="header">
	<img id="img_logo" src="pictures/Logo.gif" alt="Logo" />	
</div>

	<div id="menu_left"></div>
	<div class="blog_box"></div>

</div>
<div id="pied_de_page"</div>

</body>

</html>

	</body></html>
Re,


Et oui j'y avais pensé et c'est d'ailleur pour ça que je suis dans la misére.
Car je dois faire plusieurs div.bloc_blog les unes en dessous des autres et la
ca ne marche pas.

Biensûr, en jouant avec les position c'est comme d'hab, c'est bon sur un navigateur et pas sur l'autre.

En bref, chiant de chiant! lol je perd pas le moral.

Merci de ta reponse Smiley smile ça fait plaisir que quelqu'un se soucis de moi, en plus quand tu regarde c'est un prob de débutants mais c'est récurant!
Re,

Je n'ai pas tout compris !
Le but du jeu, c'est d'avoir une page en height: 100%, avec un header, une colonne gauche, une colonne droite et un pied en bas de page, jusqu'à la ça va. Ensuite si le contenu de la colonne droite augmente , la page s'agrandit ou il y a un scroll vertical avec toujours la page en 100% ?
Re ghost,

Si tu as bien compris lol, mais enfait c'est moi qui me suis mal fais comprendre.

Colonne gauche, colonne droite et footer impecable!

Le problème c'est mes div dans ma colonne droite (tu suis?) Smiley langue

Je voudrais en mettre plusieurs les unes en dessous des autres (div.bloc_blog), mais je veux qu'elles ont une largeur fixe et un hauteur auto(c'est la que je bloque!!??)

Dsl de te prendre ton temps lol, mais c'etait pas facile de me faire comprendre Smiley smile
Désolé, il y a encore un truc ou deux qui m'échappent !!
1er La page doit elle rester à height 100% ou doit elle s'allonger en fonction du contenu ???
2eme Connais tu ton nombre de div ou sont ils inclus dynamiquement (en php par exemple) ???
Re ghost et bonjour,

La page doit rester à height 100%, Div inclus dynamiquements (max. 5 par page.

Merci Smiley confused
Donc voilà j'ai resolu mon problème, je m'explique,

Comme je l'avais dit, j'avais un problème sous firefox avec le:

overflow:auto;


Genres de problèmes : Avec des videos dans mon 
div.bloc_blog
me demandez pas pourquoi mais le contenu s'ajusté très mal!


Donc j'ai pris la decision de le laisser en auto pour IE et d'apliquer un:
overflow-x:auto;
pour firefox et IE !
Ce qui règle en partie mon problème, car je metterais un control sur le nombre de caracteres entrés comme ça le contenu ne depassera pas sur FF.

Donc voili voilou, [Résolu]

Merci à tous ceux qui mon aidés, en particulié à Ghost Smiley cligne
Sujet clos
Aller à