18073 sujets

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

Problème de colonnes ne s'étirant pas

Bonjour.

Je prépare actuellement mon site internet (sur ma passion, la photo), et j'avais dans l'idée d'utiliser le css pour cela.
Malheureusement, j'ai un petit problème concernant la mise en page du site en lui même.
Le design est terminé (sous photoshop) mais la maquette en html/css, me pose quelques problèmes.

Surtout un en fait : l'étirement de deux colonnes sur les côtés d'un bloc qui aura du texte.
Je me suis inspiré des tutoriaux a disposition sur le site mais cela ne marche pas bien et j'ai beau faire de nombreux tests en tatonnant... Je n'arrive pas au résultat voulu Smiley bawling .

Voilà mon css : (index2.css)

body {
	margin: 0; /* pour éviter les marges */
	padding: 0;
	text-align: center; /* pour corriger le bug de centrage IE */
	background: #000000;
}
	  
#conteneur-centre {
	width: 900px;
	margin-left: auto;
   margin-right: auto;
	background-color: #DC143C;
	text-align: left; /* on rétablit l'alignement normal du texte */
}

#banniere {
	background-color: Gray;
	width: 900px;
	height: 150px;
}

#menu {
	background-color: Aqua;
	width: 900px;
}

#menu1 {
	float: left;
	background-color: Green;
	width: 250px;
}

#menu2 {
	float: left;
	background-color: Lime;
	width: 300px;
}

#menu3 {
	float: left;
	background-color: Teal;
	width: 350px;
}

#centre {
	background-color: Yellow;
	margin-left: 15px;
	margin-right: 15px;
}

#colonne-gauche {
	float: left;
	width: 15px;
	background-color: Purple;
}

#colonne-droite {
	float: right;
	background-color: Purple;
	width: 15px;
}

#basdepage {
clear: both;
width: 900px;
height: 30px;
background-color: #99CC99;
}

/*
p {
font-size : 10px;
font-family : Verdana;
color : #999999;
}*/


Et voilà mon code html : (maquette.html)

<html>
<head>
<title>Maquette | Voxera</title>
<link rel="stylesheet" type="text/css" href="index2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<div id="conteneur-centre">conteneur
	<div id="banniere">banniere</div>
	<div id="menu">
		<div id="menu1">menu1</div>
		<div id="menu2">menu2</div>
		<div id="menu3">menu3</div>
	</div>
	<div id="conteneur2">
	<div id="colonne-gauche">
		<p>colonne de gauche</p>
	  	<p>largeur fixe : 15px</p>
	</div>
	<div id="colonne-droite"><p>colonne de droite</p>
	  <p>largeur fixe : 15px</p>
	</div>
	<div id="centre">
  	  <p>partie centrale qui &quot;pousse&quot; les colones vers le bas. partie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant partie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupantpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant le reste de la largeurpartie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant</p>
	  <div id="basdepage">Bas de page</div>
	  </div>
  </div>
</div>
</body>
</html>


J'aimerai en fait que mes deux colonnes violettes, se redimensionnent en fonction du bloc jaune du milieu.
Sachant que ces colonnes seront plus tard remplies par une image qui se répètera verticalement (une bordure).

Autre souci, le "Bas de page" qui se décale de 15px en bas alors qu'il devrait faire comme "Banniere" et ne pas dépasser... Smiley ohwell

Pour "Banniere", "Menu1", "Menu2", etc... tous ces "blocs" de couleurs seront remplaçés par des images.
Seul le bloc jaune sera là pour du texte.

J'espère que je n'ai pas trop mal expliqué mon problème et que quelqu'un aura le temps mais surtout la gentilesse de pouvoir m'aider Smiley smile !
Je suis ouvert à toute critique ! Quitte à faire plein de changements.
Smiley smile
Tout d'abord, merci de m'avoir répondu Smiley smile , c'est sympa Smiley lol .

Changer les hauteurs et largeurs en % au lieu de px, pourquoi pas, mais les blocs contiendront des images par la suite (mis à par le jaune) donc je ne suis pas sur que de les mettre en % arrange la chose...?
A moins que je n'ai pas saisi lesquels changer en % ?

Désolé si je n'ai pas bien compris Smiley sweatdrop me sens un peu perdu Smiley confused

EDIT :
Hum... j'ai résolu mon problème de "bas de page" qui était décalé... J'ai honte, c'était une balise </div> mal placée Smiley confused Smiley confused Smiley lol
Modifié par Voxera (06 Nov 2005 - 11:57)
Bon j'avance un peu tout seul... mais le résultat est déjà plus sympa...
J'ai mis en ligne la page pour plus de facilités :
http://sylphire.free.fr/test/maquette.html

Sous IE le résultat est correct (du moins c'est ce que je cherche à obtenir).
Mais pas sous Firefox... où la page est bien trop grande (en hauteur)...!
Quelqu'un ne voit vraiment pas comment je pourrais faire ?
Je désespères Smiley bawling ! Please Smiley confused
Bonjour Voxera.

En premier lieu, il faudrait voir à équiper ta page d'un DOCTYPE, sinon le rendu est laissé au hasard.

Lire : Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

Ensuite, pour ton problème, peut-être une piste de solution dans la FAQ :
Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ?

Question : dans quel but tu fais des colonnes gauches et droites de 15px ?
Si c'est dans un but décoratif, les images en arrière-plan font très bien le travail, ou bien la propriété border peut également être utile.

N'hésite pas à faire remonter ton sujet quand tu auras fait les ajustements nécessaires. Smiley cligne
Modifié par Stephan (27 Nov 2005 - 19:17)
Je pense qu'en fait il ne faut pas créer de colonne droite et gauche mais plutot utiliser une seul zone centrée (ta colonne "centre"). Et surtout utiliser le style margin:0 auto; sur ce div "centre". Si tu ne spécifies pas de width pour le div "centre" les largeurs de tes pseudo-colonnes gauche et droite seront dépendantes du contenu du div "centre" puisque la largeur de "centre" dépendra de la largeur des images qui seront dedans.
Grace à margin:0 auto; le div "centre" se positionnera au centre de ta page. (attention sous IE il faut specifier au prealable align:center dans le body)
Modifié par Gaoul (31 Mar 2006 - 09:39)
Sujet clos
Aller à