18073 sujets

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

Tuto "Construire site sans tableaux" : probleme de mise en p

Bonjour à tous,

Depuis toujours, je consulte vos tutos, vraiment bien faits et super pour s'autoformer à ces technologies.
Dernierement, dans le but de parfaire mes thèmes, je me suis pas mal documenté sur vos tutos CSS.
J'ai suivi le tutoriel Construire un site sans tableaux et je suis tombé sur un Hic :

Lorsque l'on met en place tout ce qu'il faut comme dans le tuto, si le contenu de la page central est vide, la liste du menu de gauche dépasse du site (en gros, si l'on met une ligne noire horizontale en bas du conteneur principal, on voit la liste dépasser de cette ligne).

Je voulais savoir si c'etait normal ou si c'etait moi qui avait fait une erreur ?

Dans la logique, normalement, le div contenant la liste devrait prendre la hauteur de la liste non ?

ps : j'ai essayé de mettre un height: 200px; sur le div .gauche mais cela ne change rien du tout... Smiley eek

Merci d'avance,

@ bientot
Re !

En fait, j'ai un petit indice je pense...
Je suis en train de faire un cas particulier... c'est pour ça que ca ne marche pas vraiment comme dans le tuto. Je m'explique :

En fait, j'ai un dernier div "pied" qui me sert de footer de page, c'est simplement une ligne avec écrit un copyright et c'est tout. En fait c'est cette ligne qui est mal placée. Je voulais donc savoir comment je devais faire pour que cette fameuse ligne soit placée juste en dessous du menu ou juste en dessous du centre selon la hauteur du contenu du centre (par exemple, s'il est vide, la ligne se met juste sous le menu, sinon si la hauteur du centre dépasse celle du menu, bah la ligne est collée sous le centre.)

Merci d'avance
++
Salut zax-tfh

Essaye le code ci-dessous (il fonctionne sous FF et IE).


La feuille de style :


<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #CCCCCC;
}
#centre {
float: right;
width: 84%;
}
#gauche {
float: left;
width: 15%;
background-color: #DDDDDD;
}
#pied {
float: left;
width: 100%;
height: 30px;
background-color: #999999;
}
.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;
}
</style>


et le html :


          <div id="header">header</div>
	  <div id="gauche">
	  	<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="centre">
  	  	contenu <br />
	  	contenu <br />
  	  </div>
	  <div id="pied">pied de page</div>


@ bientôt.
Salut,

Merci pour la méthode. Personnellement j'utilise quasiment la meme tactique et je cherchais à m'en débarrasser car elle me pose probleme. Je t'explique :

J'essaye de faire un site tableless compatible Ie FF et safari. Dans ce site, j'ai beaucoup de choses qui doivent etre mises cote à cote nécessitant ce genre de méthode du float:left (je n'utilise que du left). Or pour éviter que ce qui suit le float left ne se retrouve à coté ou que les marges débloquent (car le float left joue sur les marges apparement) je suis obligé de mettre un div vide juste apres mes divs en left avec un propriété clear: both pour repartir clean. Si je ne fais pas ça, ça devient vraiment bordelique à souhait !

Je n'ai pas testé une mise en page complexe avec ta méthode left + right et je voulais savoir si tu avais des bizarreries avec les marges, ou bien des éléments qui finissent par etre placés au mauvais endroit ?

En fait, ce que j'aimerai, c'est pouvoir placer des divs cote à cote par n'importe quelle méthode mais ne pas avoir à compenser derriere avec une bidouille perso... et là, pour le moment, c'est la galere Smiley decu

Merci d'avance
@++
Salut !

Combien de colonnes comporte ta mise en page ? Si tu cherches à réaliser une mise en page à 2 colonnes, le plus simple est AMHA de placer ta liste de menu en float: left; et de donner une marge adéquate à ton conteneur central. En appliquant ensuite la propriété clear: both; au footer, tu l'oblige à se placer en-dessous du bloc flottant, et donc de ton menu.

Le seul autre moyen de placer les blocs l'un à côté de l'autre, c'est de passer en positionnement absolu, mais tu perds une grande part de "flexibilité" de la mise en page Smiley ohwell
Sujet clos
Aller à