18041 sujets

Questions générales et questions de débutants

Taille Div trop petite a l'aide

Bonjour Smiley bawling

Je code actuellement un design et j'ai certains div qui ne prennent pas assez de place

Petit shema pour illustrer :

Voila ce que j'obtiens : (le bloc blanc represente l'espace vide)
http://img158.imageshack.us/img158/4622/capq7.th.gif

et ce que je veux :
http://img158.imageshack.us/img158/6136/veuxcaud6.th.gif

Je trouve pas l'erreur ou ce qui manque donc si vous pouviez m'aidez ca serait cool Smiley lol

Voila le code de mon fichier html : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
<title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>
	    <link href="grids.css" rel="stylesheet" type="text/css" />
        <!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
</head>
<body>
	<div id="global">
		<div id="header">
			<h1><img src="images/logo.gif" alt="logo" width="246" height="85" /></h1>
		</div>
		<div id="center">
			<div id="content">
			  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting  industry. Lorem Ipsum has been the industry's standard dummy text ever  since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only  five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularised in the 1960s with  the release of Letraset sheets containing Lorem Ipsum passages, and  more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.</p>
			</div>
			<div id="sidebar">
			  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting  industry. Lorem Ipsum has been the industry's standard dummy text ever  since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only  five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularised in the 1960s with  the release of Letraset sheets containing Lorem Ipsum passages, and  more recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.</p>
		  </div>
		</div>
		<div id="footer"><p align="center">footer</p>
		</div>
	</div>
</body>
</html>


le code de ma feuille de style :
html, body {
	height: 100%;
	margin: 0;
	}
	
body{

	background-color:#fff;
	background-image:url(images/html.png);
	background-repeat:repeat-x;
	margin:0px;
}
div#header {
	background:url(images/fondheader.gif) repeat-x;
	height: 175px;
	}
	
div#header h1 {
	margin: 0;
	}
	
div#header img {
    margin: 0;
	position: absolute;
	top: 15px;
	left: 30px;
	}
	
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}

div#global {
	min-height: 100%;
	width: 900px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	background: url(images/global.png) center repeat-y;
	}
	
div#center {
	padding-bottom: 50px;
	overflow: auto;
	height:100%;
}

div#footer {
	position: absolute;
	width: 900px;
	bottom: 0;
	background: url(images/footer.png) repeat-x;
	}
	
div#content {
	float: left;
	width: 450px;
	height:100%;
	background:url(images/fondgar.gif);
	}
div#sidebar {
	float: right;
	width: 450px;
	height:100%;
	background:url(images/fondfille.gif);
	}


merci d'avance pour toute l'aide que vous pourriez me donner Smiley smile
Modifié par Florent V. (26 Jul 2007 - 15:49)
Bonjour,

Une petite question : tes images de content et sidebar sont assez grandes ? pas besoin de repeat-y ?
bonjour,

Je crois que c'est par ce que tu n'as pas de contenu. Et que tu utilises 100% de 100% donc il ne doit pas comprendre Smiley lol
Arf mais comment faire en sorte que le div prennent autant de place disponible meme si il n'y a pas de contenu dedans Smiley bawling
Perso je vois ça:

div#footer {
position: absolute;
.
.
.
}


et je demande: pourquoi une position absolue?
Pareil pour le div#global (pour lequel tu as mis deux padding d'ailleurs Smiley ohwell )

Ensuite, comme le dit Halindel, la hauteur du body est mise à 100%. Par contre je ne suis pas d'accord avec lui quand il dit que c'est parce qu'il n'y a pas de contenu... Je dirais plutôt : mais 100% de quoi? C'est comme si tu disais : "On connait la taille de l'univers! Il fait 100%!".
Le body est une référence pour tout ce qu'il contient. Il faut donc lui donner une valeur précise en pixels. Et le plus bizarre étant que tu mets des tailles de valeur précise à des div...

Perso je pense que c'est un peu brouillon et que tu devrais enlever dans ton css tout ce qui n'est pas en rapport avec ton prroblème (n'hésites pas à mettre des commentaires ==> /* */)

Bon courage à toi
FireMax a écrit :
Arf mais comment faire en sorte que le div prennent autant de place disponible meme si il n'y a pas de contenu dedans Smiley bawling

Pas vraiment de moyen pour faire ça correctement et facilement. Il faudra donc ruser.

Dans ton cas, tu devrais pouvoir utiliser la technique des colonnes factices pour obtenir deux colonnes (visuelles) sur toute la hauteur, et un pied de page positionné en absolu par rapport à son parent en min-height: 100%;.

Pour une page sur minimum toute la hauteur et un pied de page tout en bas (non fixé sur l'écran):
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
J'utilise un repeat-y oui

Florent V j'ai fini par trouver comment faire en sorte que ca prennent toute la pages merci
Sujet clos
Aller à