28173 sujets

CSS et mise en forme, CSS3

Positionner un div en bas de colonne

bonjour,

Je n'arrive pas à positionner un div tout en bas de la colonne gauche qui sert au menu. Ce div doit contenir une image qui completera le design. J'ai essayé de la mettre dans un autre div => 0; j'ai essayé de la mettre en image de fond du div du menu, avec des parametres tels que :
background-position: bottom; background-repeat: no-repeat; background-position: 300px 0px; => 0

malgré mes recherches, nulle piste encore Smiley decu

pouvez-vous m'aider ? merci
c'est une "colonne" en div, tout le site ne comporte que des divs
j'ai un div conteneur, qui contient un div top, puis un div principal, puis un div bottom. Le div principal contient un div gauche (float left) pour le menu *et* cette fameuse image qui doit aller en bas Smiley decu et un div contenu pour le texte.
Ben voilà, si c'est pas une colonne, c'est pas une colonne Smiley lol

Bon, si c'est juste pour une image de fond, ça serait dommage de rajouter un élément rien que pour ça. Avec une vraie colonne de tableau, ou avec une div en display: table-cell (ce qui ne passera que sous certains navigateurs modernes), la div ou la cellule de tableau prendront bien toute la hauteur. Sinon, niet : un élément de type bloc comme une div ou un paragraphe ou une liste (etc.) prend la hauteur dont il a besoin, et pas plus. Sauf si on lui donne une hauteur fixe, ou une hauteur minimale. Mais ça ne permet pas d'avoir quelque chose qui viendra se placer tout en bas, si tout en bas est une position qui dépendra de la hauteur de ta zone de contenu.

Bon, ensuite on peut toujours tricher un peu. Il y a un un tutoriel CSS sur alsacreations qui parle de ce problème. Je pourrais te donner le lien en 7 secondes chrono, mais c'est mieux si tu vas chercher toi même (pédagogiquement parlant bien sûr, parce que je suis pas à 7 secondes près non plus).
merci mpop, j'avais deja trouvé et lu Smiley cligne
sauf que ça n'arrange que partiellement mon probleme, ou plutot, ça le deplace....
j'arrive maintenant à positionner l'image en bas de page, mais avec IE 6 seulement ! avec Opera 8.5 et Firefox 1.0, l'image reste en haut et le div ne prend pas la hauteur totale Smiley decu
cerise sur le gateau, ça crée un espace de 1 px blanc à droite de mon image, ce qui fait moche.
voilà la partie du code (gauche, pour le menu) et de la CSS, si ça peut aider à m'aider Smiley smile

<div id="mainG"><div id="DivGaucheTop">
<div id="menuGauche1"><h3>Rubrique</h3><ul>
<li><a href="/page.php?id=1">Lien N°1</a></li>
<li><a href="/page.php?id=2">Lien N°2</a></li>
<li><a href="/page.php?id=3">Lien N°3</a></li>
<li><a href="/page.php?id=4">Lien N°4</a></li>
<li><a href="/page.php?id=5">Lien N°5</a></li>
</ul></div>
</div>
<div id="DivGaucheMiddle"></div>
<div id="DivGaucheBottom"><span></span><img src="/images/fondBas.jpg" alt="" /></div></div>

#mainG {
border: 0; padding: 0; float: left; margin-left: 0; margin-top: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: right;

color: #000000; background-color: #a7302a; border-right: 1px solid #a7302a;
display: table-cell;
vertical-align: bottom;
width: 130px;
height: 100%;
}
#mainG * {
vertical-align: bottom;
}
/*\*//*/
#mainG {
display: block;
}
#mainG span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/

#DivGaucheTop { width: 130px; background-color: #a7302a; border: 0; padding: 0; margin-top: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: center; color: #000; font-weight: normal; }

#DivGaucheMiddle { position: relative; top: 0; background-color: #a7302a; width: 130px; height: 125px; border: 0; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: center; color: #000; font-weight: normal; }

#DivGaucheBottom { position: relative; margin-bottom: 0; background-color: #a7302a; width: 129px; height: 162px; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: right; color: #000; font-weight: normal; } /* ici, noter la largeur de 129 alors que les autres sont à 130, sinon, l'image "remonte" et ne se trouve plus alignée en bas */
Modérateur
bonjour,

si il s'agit de placé l'image seulement en bas d'un conteneur, je fait usage du position:relative; pour le conteneur et du position:absolute pour le contenu avec un bottom:0; (et un left:0;pour IE, car si le conteneur a un text-align:center; le contenu se decalle vers le centre).
Ensuite pour empeché l'image de recouvrir les autres elements restés dans le flux, .. au choix un padding-bottom de la hauteur de l'image ou un simple div vide et transparent toujours de la hauteur de l'image.
Cela est compatible avec les navigateurs recents ...

a plus
J'ai une question bête :

pourquoi tu ne mets pas dans ta css pour la balise MainG, une image de fond ?

#mainG
{background-image : url(tonimage.jpg);
background-position : bottom;
background-repeat : no-repeat;}


Excuse si je dis une bétise...
je le fais dans mon dernier site...peut-etre que ca colle pas à ton projet ?
Modérateur
(re) bonjour,
Utilise tu un doctype compatible avec les regles css que tu veut appliqué ?
En particuliier pour IE Smiley smile (4.01 ou plus) ..
le lien ou le code de la page permettrait effectivement de mieux cerné ton probleme et eventuellemnt de t'aider.
a plus
bonsoir Smiley cligne

Donc, à la demande generale, voici le code de la page 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title></title><meta name="description" content=""><meta name="keywords" content=""><link rel="stylesheet" type="text/css" href="/includes/styles.css"><link rel="stylesheet" type="text/css" href="/includes/menu.css"><script type="text/javascript" src="/includes/menu.inc.js"></script><!--[if IE]><style>
#mainG span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->
</head><body>

<div align="center"><div id="corps">
<div id="top"><a href="/accueil.php" title=""><img src="/images/01.jpg" alt="" /></a></div>
<div id="main"><div id="mainG"><div id="DivGaucheTop">
<div id="menuGauche1"><h3>xxxxx</h3><ul>
<li><a href="/page.php?id=1">lien N°1</a></li>
<li><a href="/page.php?id=2">lien N°2</a></li>
<li><a href="/page.php?id=3">lien N°3</a></li>
<li><a href="/page.php?id=4">lien N°4</a></li>
<li><a href="/page.php?id=5">lien N°5</a></li>
</ul></div>
</div>
<div id="DivGaucheMiddle"></div>
<div id="DivGaucheBottom"><span></span><img src="/images/05.jpg" alt="" /></div></div><div id="menu"><div id="navcontainer"><ul><li><a href="/accueil.php" class="lienMenu" title="">xxxxx</a></li><li><a href="/accueil.php" class="lienMenu" title="">xxxxx</a></li><li><a href="/accueil.php" class="lienMenu" title="">xxxxx</a></li><li><a href="/accueil.php" class="lienMenu" title="">xxxxx</a></li><li><a href="/accueil.php" class="lienMenu" title="">xxxxx</a></li></ul></div></div><div id="mainContenu"><br /><div class="boxNews">
<b class="boxNewsTop"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b>
<div class="boxNewsContent"><p><span class="titreUne">Bienvenue sur le site</span></p></div>
<b class="boxNewsBottom"><b class="b4"></b><b class="b2"></b><b class="b5"></b><b class="b2"></b><b class="b1"></b></b>
</div><h1>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempor, leo fermentum ultricies porta, massa nulla molestie justo, non aliquet felis leo eu ligula. Pellentesque nec urna. Aliquam pharetra sapien. Duis felis augue, rhoncus id, ultrices vel, malesuada non, dolor. Phasellus justo nisi, venenatis ac, venenatis cursus, luctus euismod, diam. Sed nec odio a sapien bibendum cursus. In hac habitasse platea dictumst. Maecenas ut mauris. Nullam a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et velit. In sem.<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempor, leo fermentum ultricies porta, massa nulla molestie justo, non aliquet felis leo eu ligula. Pellentesque nec urna. Aliquam pharetra sapien. Duis felis augue, rhoncus id, ultrices vel, malesuada non, dolor. Phasellus justo nisi, venenatis ac, venenatis cursus, luctus euismod, diam. Sed nec odio a sapien bibendum cursus. In hac habitasse platea dictumst. Maecenas ut mauris. Nullam a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et velit. In sem.<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempor, leo fermentum ultricies porta, massa nulla molestie justo, non aliquet felis leo eu ligula. Pellentesque nec urna. Aliquam pharetra sapien. Duis felis augue, rhoncus id, ultrices vel, malesuada non, dolor. Phasellus justo nisi, venenatis ac, venenatis cursus, luctus euismod, diam. Sed nec odio a sapien bibendum cursus. In hac habitasse platea dictumst. Maecenas ut mauris. Nullam a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et velit. In sem.</div><div class="spacer"></div></div><div id="bottom">© Mon site</div></div></div></body></html>


et la CSS : 
body { margin-top: 0; background-color: #bc7171; }

.spacer { clear: both; }
IMG { border: 0; }
.alerte { color: #f03; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; }
.alignCentre { text-align: center; }

/* STRUCTURE */

#corps { width: 760px; border: 1px solid #a7302a; padding: 0; text-align: center; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; color: #000; background-color: #fff; }

#top { width: 760px; padding: 0; }

#main { border: 0; width: 760px; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: justify; color: #000; background-color: #fff; }
div[class] #main { border: 0; width: 760px; background-color: #fff; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: justify; color: #000; }

#mainG { position: relative; 
border: 0; padding: 0; float: left; margin-left: 0; margin-top: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: right; color: #000000; background-color: #a7302a; border-right: 1px solid #a7302a;
    display: table-cell;
    vertical-align: bottom;
    width: 130px;
    height: 100%;
}
#mainG * {
    vertical-align: bottom;
}
/*\*//*/
#mainG {
    display: block;
}
#mainG span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/

#DivGaucheTop { width: 130px; background-color: #a7302a; border: 0; padding: 0; margin-top: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: center; color: #000; font-weight: normal; }

#DivGaucheMiddle { position: relative; top: 0; background-color: #a7302a; width: 130px; height: 125px; border: 0; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: center; color: #000; font-weight: normal; }

#DivGaucheBottom { position: relative margin-bottom: 0; bottom: 0; left: 0; background-color: #a7302a; width: 129px; height: 162px; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; text-align: right; color: #000; font-weight: normal; }

#DivGaucheTop h1 {
	font: medium "Georgia", Verdana, Arial, "Times New Roman", serif; font-weight: bold;
	color: #b96;
	background-color: inherit;
}

#mainContenu { position: relative; float: left; left: 1px; top: 0; border: 0; width: 608px; padding: 5px 10px; text-align: justify; background-color: #fff; }
div[class] #mainContenu { position: relative; float: left; left: 1px; top: 0; border: 0; width: 609px; padding: 5px 10px; text-align: justify; background-color: #fff; }

#mainContenu h1  {
	font: medium "Georgia", Verdana, Arial, "Times New Roman", serif; font-weight: bold;
	color: #c00000;
	background-color: inherit;
}

#mainContenu h2  {
	font: small "Georgia", Verdana, Arial, "Times New Roman", serif; font-weight: bold;
	color: #000;
	background-color: inherit;
}

.h3  {
	font: small "Georgia", Verdana, Arial, "Times New Roman", serif; font-weight: bold;
	color: #000;
	background-color: inherit; text-align: justify;
}

#bottom { border: 0; background-image: url('/images/07.jpg'); background-repeat: no-repeat; width: 760px; padding: 5px 0; font-family: Arial, Verdana; font-size: 9pt; text-align: center; color: #fff; }

/* MENU TOP */

#menu { float: right; left: 0; top: 0; border: 0; background-image: url('/images/03.jpg'); background-repeat: no-repeat; width: 625px; height: 22px; }

div[class] #menu { position: relative; float: right; left: 0; top: 0; border: 0; background-image: url('/images/03.jpg'); background-repeat: no-repeat; width: 625px; height: 22px; }

#navcontainer
{
margin-top: 0;
padding: 0;
}

#navcontainer UL
{
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
border: none;
}

#navcontainer LI
{
display: block;
list-style-position:inside;
margin: 0;
padding: 2px;
float: left;
width: 110px;
}

#navcontainer A
{
font: small "Georgia", Verdana, Arial, "Times New Roman", serif;
color: #fff;
display: block;
width: auto;
text-decoration: none;
background: #f90;
margin-left: 10px;
padding: 2px 10px;
text-align: center;
}

#navcontainer A:hover { color: #ffc; background: #a7302a; }

#navcontainer A:link, #navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #f90;
font-weight: bold;
color: #fff;
}

/* MENU GAUCHE */

#menuGauche1, #menuGauche2, #menuGauche3 { color: #ffecce; font: small "Georgia", Verdana, Arial, "Times New Roman", serif; font-weight: bold; }

#menuGauche1 h3, #menuGauche2 h3, #menuGauche3 h3 {
border-color: #f90;
border-style: solid;
border-width: 0 0 2px 0;
font-size: medium;
font-weight: 600;
margin: 5px 0 5px -45px;
padding-left: 0em;
}

#menuGauche1 h3:first-letter, #menuGauche2 h3:first-letter, #menuGauche3 h3:first-letter { color:#f90; background-color: transparent; }

#menuGauche1 ul, #menuGauche2 ul, #menuGauche3 ul { margin-left: 5px; margin-bottom: 1.5em; margin-top: 0.5em; }

#menuGauche1 li, #menuGauche2 li, #menuGauche3 li { display: inline; list-style: none; }

#menuGauche1 a, #menuGauche2 a, #menuGauche3 a {
color: #fff;
background-color: transparent;
display: block;
font-weight: 500;
margin-left: -3em;
padding-left: 1em;
text-decoration: none;
}

#menuGauche1 a:hover, #menuGauche2 a:hover, #menuGauche3 a:hover { background-color: #ffecce; color:#a7302a; }
Sujet clos
Aller à