28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai réalisé une page en css avec un haut de page, deux colonnes et un bas de page.

voici mon code CSS:


body, html {
	margin:		0px;
	background-color:#d9d9d9
	}

#content { 
	position: relative;
	margin: 10px auto 0px auto;
	width: 786px;
    color:#000;
	font-family: Georgia, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

#haut { 
	position: relative; 
	width: 100%; 
	height: 21px;
	margin: 0px;
}
#droite {
		position:		absolute;
		top:            21px;
		left:           264px;
		width:          522px;
		text-align:     justify;
		background-image:url(img/right.gif);
		}
		
#gauche {
	vertical-align:top;
	top:        21px;
	width:		264px;
	overflow:	hidden;
	background-image:url(img/leftrepeat.gif);
	padding:0;
	}


et mon code html :


<div id="content">

	<div id="haut"><img src="img/up.gif" /></div>

  <div id="gauche"><img src="img/mm.gif" width="264" height="45" align="top"><img src="img/left.gif"></div>

	<div id="droite"><p>blabla</p></div>
	<div id="base"><img src="img/down.gif" width="786" height="45"></div>

</div>


Tout fonctionne, mais lorsque la colonne de droite est plus grande que la colonne de gauche, elle passe au dessus du bas de page. Et lorsque c'est l'inverse, le fond de la colonne de droite s'arrete a la fin du texte qu'elle contient.

J'ai essayé des millions de choses, avec des floats, qui me donnent des résultats differents entres browsers. Je suis tout pres avec cette méthode, mais il me manque un truc... Je suis pas loin de tout refaire en tableau, ça va me prendre 1h au lieu de passer 4 jours sur un css... c'est tres frustrant.

Merci de vos réponses
Modifié par malko (24 Apr 2006 - 13:56)
Salut ! as tu lu l'article du site pompage.net (malgré son nom, ce n'est pas un site X) intitulé les colonnes factices?

Pour créér des colonnes de taille toujours égales il faut recourir à cette astuce
Smiley smile
Modifié par Ralfman68 (24 Apr 2006 - 14:57)
D'accord, je comprends donc qu'il n'y a aucune autre solution que d'utiliser un fond général...

Ca marche donc, mais dans le cas ou mon contenu est tres pauvre qu'il n'occupe pas l'ensemble, mon bas de page est trop haut et l'on voit le fond plus bas.

ok, j'ai donc essayé de coller ce bas de page tout en bas :


#base {
position: absolute;
bottom: 0;
}


Magique, ça marche pas.

Ok j'essaye une autre méthode sur pompage et j'ai rajouté ceci :


body {
    height: 100%;
}
#content {
    position: relative;
    min-height: 100%
}


Magnifique, ça marche sous firefox, mais pas du tout sous IE.. et je ne trouve pas d'alternative.
bon vous prenez pas la tête, je trouve plein de cas particulier ou ça marche pas, donc de plus en plus de problèmes... Je vais tout refaire en tableau, ça ira mille fois plus vite et ça sera plus fiable. On se croyait de retour en 1999. Merci pour vos réponses