Site web et hauteur

Résolu

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention -
DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention - 5 sept. 2011 à 14:52

Bonjour, je cherche a dimensionner la hauteur d'une div pour qu'elle prenne automatiquement la taille de mes pages web. Jusqu'ici j'utiliser la position:absolute mais je suis limité puisque la div prend la taille de l'écran et non celle de ma page ce qui me donne pour l'exemple quelque chose d'immonde :)

http://img268.imageshack.us/img268/5241/pprr.png

oui c'est bien mon pied de page en plein milieu :)

merci d'maider je galère...

Afficher la suite

A voir également:

Site web et hauteur
Site comme coco - Accueil - Réseaux sociaux
Création site web - Guide
Site de telechargement - Accueil - Outils
Web office - Guide
Quel site remplace coco - Accueil - Réseaux sociaux

10 réponses

Réponse 1 / 10

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

je ne sais pas à quoi sert t1 t2 t3, avec trop de position absolue. j'ai essayé de faire une structure général:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #CECECE;
	margin: 0;
	padding: 0;
	color: #000;
	}
#container {
	position:relative;
	background: #264564;
	width: 56%;
	margin: 0px auto;
}
#header {
	width: 100%;
	height: 100px;
	background:url(../Images/header.jpg) no-repeat right top;
}
#header img {
	vertical-align:-35%;
	padding: 0 35px;
}
#header i{
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 22px; /* hauteur du texte : 12 pixels */
}

#nav {
	float: left;
	background: #264564;
	width: 20%;
	height: 40px;
	background:url(../Images/menu.jpg) no-repeat right top;
}

#content {
	float: left;	
	width: 36%;	
	background: #264564;
	border-top: 1px solid black;
}

#Diapo{
	margin: 10px 3px 0 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 870px;
	height: 280px;
}

#Tableau {
	position: absolute;
	top: 305px;
	left: 0;
	width: 100%;
	height: 290px;
}

#T1 {
	position: absolute;
	top: 5px;
	left: 10px;
	width: 428px;
	height: 135px;
	
	background: #fff;
	border-radius: 10px;
}

#T2 {
	position: absolute;
	top: 5px;
	left: 448px;
	width: 428px;
	height: 135px;
	border: 1px solid black;
	background: #fff;
}

#T3 {
	position: absolute;
	top: 150px;
	left: 10px;
	width: 428px;
	height: 135px;
	border: 1px solid black;
	background: #fff;
}

/* ~~ Pied de page ~~ */
#footer {
	clear: both;
	height: 43px;
	padding: 10px 0;
	background: #6F7D94;
	font-size: small; 
	text-align: center;
}
</style>
</head>

<body>
<div id="container">
		<div id="header">			
			<img src="../Images/logoradioservice.jpg" width="180px" height="99px"> </a> 
			<i>Votre expert en Radio-Communication.</i>
		</div>
	
		<div id="nav">
			<ul class="menu">
				<li>
					<a href="../Accueil.html"><b>Accueil</b></a>
				</li><li>
					<a href="#"><b>Amplificateur GSM</b></a>
				</li><li class="current">
					<a href="Pages/Produits.html"><b>Radio-Communication</b></a>
				</li><li>
					<a href="#"><b>Services</b></a>
				</li><li>
					<a href="#"><b>Contact</b></a>
				</li><li>
					<a href="#"><b>Recrutement</b></a>
				</li>
			</ul>	
		</div>
  
		<div id="content">
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a>
				<br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a>
				<br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
.
		</div>
	
		<div id="footer">
			©2011 Radio Service Plus [radio-service.fr] <br>
			SARL Radio Service Plus au capital de 80.000&#8364; - Z.I. d'Outreville - 2 Rue Louyot - 60540 BORNEL <br>
			Tél.: 03 44 08 52 99 - Fax : 03 44 08 56 53.
		</div>
	</div>
	
</body>
</html>

Réponse 2 / 10

Zhp Messages postés 198 Date d'inscription Statut Membre Dernière intervention 37

bonjour,

Quel est l'effet visuelle recherché ? Il y a surement un moyen de contourner ce problème.

Réponse 3 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

Désoler de ma réponse tardive...
en fait je souhaite que dans n'importe quel cas ma 'div' content prenne la hauteur complète de la page et que ma 'div' footer soit toujours à 'bottom : 0;'

si tu regarde le screen plus haut ma div content est celle qui contient le fond bleu et blanc (plusieurs div dans celle ci d'ou les couleurs différentes)
et mon footer est en gris. comme tu peux le constater ils sont ajuster à la taille de mon écran mais si j'ai un contenu plus grand que cette taille ça dépasse en dessous de mon footer ce qui est dégueulasse :)

donc voila si tu as une astuce merci de m'aider.

Réponse 4 / 10

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

un peu de code serait plus facile pour essayer de te répondre.
un exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Largeur fixe 750, header/menu gauche/menu droite/contenu/footer.</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style></head><body>

<div id="conteneur">

	  <div id="header">header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><p>menu</p>
	  	<p>largeur fixe : 150px</p>
	  
			<ul class="menugauche">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>

			<li><a href="">Menu 4</a></li>
			</ul>
		
	  </div>
	  
	  <div id="droite"><p>droite</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menudroit">
			<li><a href="">Menu 1</a></li>

			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
		

	  </div>
	  
  	<div id="centre">
  	  partie centrale qui "pousse" les colones vers le bas.<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	</div>
	  
	  <div id="pied">pied de page</div>
</div>
	  


</body></html>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

code de ma page produit en photo plus haut^^

<body>
	<div id="container">
		<div id="header">			
			<img src="../Images/logoradioservice.jpg" width="180px" height="99px"> </a> 
			<i>Votre expert en Radio-Communication.</i>
		</div>
	
		<div id="nav">
			<ul class="menu">
				<li>
					<a href="../Accueil.html"><b>Accueil</b></a>
				</li><li>
					<a href="#"><b>Amplificateur GSM</b></a>
				</li><li class="current">
					<a href="Pages/Produits.html"><b>Radio-Communication</b></a>
				</li><li>
					<a href="#"><b>Services</b></a>
				</li><li>
					<a href="#"><b>Contact</b></a>
				</li><li>
					<a href="#"><b>Recrutement</b></a>
				</li>
			</ul>	
		</div>
  
		<div id="content">
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a>
				<br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a>
				<br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
				<a id="example2" href="example/2_b.jpg"><img alt="example2" src="example/2_s.jpg" /></a><br><br>
...
...
...
...
...
...
		</div>
	
		<div id="footer">
			©2011 Radio Service Plus [radio-service.fr] <br>
			SARL Radio Service Plus au capital de 80.000&#8364; - Z.I. d'Outreville - 2 Rue Louyot - 60540 BORNEL <br>
			Tél.: 03 44 08 52 99 - Fax : 03 44 08 56 53.
		</div>
	</div>
	
</body>

code de mon css principal

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #CECECE;
	margin: 0;
	padding: 0;
	color: #000;
}


#container {
	position:absolute;
	top: 0;
	left: 22%;
	width: 56%;
	height: 100%;
	background: #FBFCFA;
}

#header {
	position: absolute;
	width: 100%;
	height: 100px;
	background:url(../Images/header.jpg) no-repeat right top;
}

#header img {
	vertical-align:-35%;
	padding: 0 35px;
}

#header i{
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 22px; /* hauteur du texte : 12 pixels */
}

#nav {
	position: absolute;
	top: 100px;
	width: 100%;
	height: 40px;
	background:url(../Images/menu.jpg) no-repeat right top;
}



#content {
	position: absolute;
	top: 140px;
	width: 100%;
	bottom:43px;
	background: #264564;
	border-top: 1px solid black;
}

#Diapo{
	margin: 10px 3px 0 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 870px;
	height: 280px;
}

#Tableau {
	position: absolute;
	top: 305px;
	left: 0;
	width: 100%;
	height: 290px;
}

#T1 {
	position: absolute;
	top: 5px;
	left: 10px;
	width: 428px;
	height: 135px;
	
	background: #fff;
	border-radius: 10px;
}

#T2 {
	position: absolute;
	top: 5px;
	left: 448px;
	width: 428px;
	height: 135px;
	border: 1px solid black;
	background: #fff;
}

#T3 {
	position: absolute;
	top: 150px;
	left: 10px;
	width: 428px;
	height: 135px;
	border: 1px solid black;
	background: #fff;
}

/* ~~ Pied de page ~~ */
#footer {
	position: absolute;
	bottom : 0;
	width : 90%;
	height: 43px;
	padding: 10px 0;
	background: #6F7D94;
	font-size: small; 
	text-align: center;
}

Réponse 6 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

le T1..T3 sont des div qui permettent d'afficher des éléments spéciales sur mon Index il me sont inutile pour cette page jte remercie je vais étudié ça

Réponse 7 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

heu par contre passer mon container en relative me fait perdre l'ensemble de ma mise en page :( et derrière je suis quand même obliger de laisser la distance par rapport au top du menu et du contenu sinon il disparaît aussi :(

Réponse 8 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

par contre tu m'a mits sur la bonne voie en passant toute mes positions absolute en float :left je vois une amélioration je vais continuer de travailler la dessus merci

Réponse 9 / 10

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

ok à+

Réponse 10 / 10

DarkAurora Messages postés 417 Date d'inscription Statut Membre Dernière intervention 27

code css qui fonctionne dans mon cas


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #CECECE;
	margin: 0;
	padding: 0;
	color: #000;
}


#container {
	position:absolute;
	top: 0;
	left: 22%;
	width: 56%;
	height: 100%;
	background: #FBFCFA;
}

#header {
	float: left;
	width: 100%;
	height: 100px;
	background: #fff;
}

#header img {
	vertical-align:-35%;
	padding: 0 35px;
}

#header i{
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 22px; /* hauteur du texte : 12 pixels */
}

#nav {
	float: left;
	top: 100px;
	width: 100%;
	height: 40px;
	background: #fff;
}



#content {
	float: left;
	top: 140px;
	width: 100%;
	min-height: 594px;
	background: #264564;
	border-top: 1px solid black;
}

#Diapo{
	margin: 10px 3px 0 10px;
	float: left;
	top: 0;
	left: 0;
	width: 870px;
	height: 280px;
}

#T1, #T2 {
	margin: 17px 0 0 10px;
	float: left;
	top : 350px;
	width: 428px;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
}

#T3{
	margin: 10px 0 7px 10px;
	float: left;
	top : 350px;
	width: 428px;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
}

/* ~~ Pied de page ~~ */
#footer {
	float: left;
	width : 100%;
	height: 43px;
	padding: 10px 0;
	background: #6F7D94;
	font-size: small; 
	text-align: center;
}

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?

C'est quoi le site qui remplace coco chat

Votre réponse

Discussions similaires