28173 sujets

CSS et mise en forme, CSS3

Un div qui ne va pas en bas de la page

Bonjour,
j'ai un site web que je désire mettre aux normes car actuellement il est avec des tableaux.
J'ai donc fais ma page sans tableaux, mais avec des <div>.
Mais voilà, il y a un problème: la page principale ne va pas jusqu'au bas de page ou quand elle y vas, elle va trop loin. J'ai essayé différentes solutioins que j'ai vu sur internet mais ça n'a pas marché


Voici l'url de la page html: http://tadkozh.free.fr/web2.html
Et du style: http://tadkozh.free.fr/style.css

Si vous pouviez m'aider, merci
Bonjour,

D'abord en urgence, essayes d'oublier que tu as un jour fait de la mise en page en tableau ... car tu remplaces les autres tr et td en div ... ce n'est pas comme cela qu'il faut entrevoir la chose !!
http://css.alsacreations.com/Bases-et-indispensables/

Puis juste pour te donner une idée d'une solution (qui a des avantages et inconvenients)

<!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">
*{padding: 0; margin: 0;}
html, body{
height: 100%;


}

#conteneur {
position: relative;
width: 100%;
height: 100%;
background: yellow;

}

html>body #conteneur {
height: auto;
min-height: 100%;
}

#header { 
position: absolute;
width: 100%;
height: 10%;
background: blue;

}
 

#colonne_gauche {
width: 20%;
background: green;
position: absolute;
top: 10%;
left: 0;
height: 90%;
}

#colonne_centre {
height: 90%;
width: 60%;
position: absolute;
background: orange;
left: 20%;
top: 10%;
overflow: auto;
}

#colonne_droite {
height: 90%;
background: #ff67fa;
position: absolute;
width: 20%;
top: 10%;		 
right: 0;


}

.menu {
height: 100px;
background: #61ff68;
width: 90%;
margin: auto;
margin-top: 25px;
}	

#colonne_centre p {
margin: 10px;
}
  
</style>
</head>

<body>
<div id="conteneur">
	<div id="header">
	</div>
	
	<div id="colonne_gauche">
		<div class="menu">
		</div>
		<div class="menu">
		</div>
	</div>

	<div id="colonne_droite">
		<div class="menu">
		</div>
		<div class="menu">
		</div>
	</div>
	
	<div id="colonne_centre">

		<p>Voici la version bêta du site en xhtml sans tableaux. Le problème est que normalement bas de ce div devrait toucher le bas de la fenêtre sans quoi ce n'est pas très joli...<br />Si vous pouviez m'aider...Merci
		</p>
		<p>Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses.
Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses. Voici le contenu de ma page, il est formé de plusieurs choses.
		</p>
	</div>

</div>
</body>
</html>
Sujet clos
Aller à