Une image séparant deux balises en cssRésolu/Fermé

Question

Bonjour, Je n'arrive pas à créer un élément qui devrait être tout simple. Ma page web contient 4 balises div : - un en-tête pleine largeur, - le menu flottant à gauche, - le contenu à sa droite sur le reste de la largeur - un pied de page pleine largeur Et je voudrais avoir une barre noir séparant mon menu du contenu. Au début j'avais mis une petite image en fond à droite du menu avec répétition verticale. Problème : dès que la page est plus longue, la barre noire s'arrête en bas du menu. A l'inverse, elle devient trop courte si c'est en fond de page principale que je l'incruste à gauche et que le contenu est moins long que le menu. J'ai essayé de contourner en insérant un autre

entre le menu et la page, faisant 10 px de largeur, 100% de la hauteur et avec fond noir. J'ai cru au début que ça marchait, mais le bloc semble s'arrêter en bas du menu. De plus mon pied de page vient se coller sous le menu au lieu de rester en bas de l'ensemble comme il le faisait auparavant. Évidemment mon but est d'avoir cette barre noire qui s'adapte à toutes les configurations menu/page pour entièrement les séparer en hauteur, et que le pied de page reste en dessous. Quelqu'un aurait-il une suggestion ?

Dalida · Answer

salut, il existe la technique des fausses colonnes. tu ajoutes un

qui comprend ton menu et ton contenu, tu lui met un arrière plan répété en hauteur et que tu positionnes à 0 en Y et au nombre de pixels voulus pour la position en X. comme ça ta barre apparait toujours à la bonne taille puisque ce container s'adapte en hauteur à la taille de son contenu… à plus !

Dalida · Answer

re,

salut, bg, les vœux…

pour notre ami, une solution encore plus simple.

regarde cet exemple,  suffit d'ajouter une image au contenu.
div#contenu {
padding-left:210px;
background-image:url(ligne.png);
background-repeat:repeat-y;
background-position:200px 0;
}

Rico_Nord · Answer

Cool, merci ! :)
Je ne suis pas certain de bien comprendre ton 2ème exemple, mais je pense que ça revient à ce que j'ai essayé de faire auparavant. Le problème de mettre la barre dans le contenu, c'est qu'il est plus court que la hauteur du menu elle s'arrête avant le pied de page au niveau du bas du contenu.

J'ai donc testé ta 1ère idée, mais ça ne m'affiche rien et le pied de page se retrouve collé sous l'en-tête.
Je suppose que je m'y prends mal avec le css de la barre (je précise que je n'y connais pas grand-chose ^^), donc le voilà :

#barre {
	background-image: url(barre2.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	left: 256px;
	top: 0px;
	}

(le menu fait 255 px de large)

Mais c'est vrai, où sont passées mes manières ! Bonne année et meilleurs vœux à tout le monde.

Dalida · Answer

re,

en relisant mon code, je comprends que tu n'aies pas compris !

d'où donc un bel exemple tout frais rien que pour toi…

…reste plus qu'à espérer que j'ai bien compris ce que tu essaies de faire !
c'est pas gagné !
-:oD

la CSS est un peu commenter mais si tu veux des explications n'hésite pas.
je ne l'ai testé que sous FF mais ça ne devrait pas bouger ailleurs, à confirmer.

à plus !

Dalida · Answer

re,

en relisant mon code, je comprends que tu n'aies pas compris !

d'où donc un bel exemple tout frais rien que pour toi…

…reste plus qu'à espérer que j'ai bien compris ce que tu essaies de faire !
c'est pas gagné !
-:oD

la CSS est un peu commenter mais si tu veux des explications n'hésite pas.
je ne l'ai testé que sous FF mais ça ne devrait pas bouger ailleurs, à confirmer.

à plus !

Dalida · Answer

salut,

peux-tu nous montrer ton code source stp ?

arthezius · Answer

Le problème des colonnes est souvent un casse tête pour les débutants mais quand on maitrise bien le principe ça vas tout seuls.
Parfois suffit juste de mettre un margin:0px; pour enlever des espaces en trop autour d'un bloc.

Rico_Nord · Answer

Oui, je me doute que c'est une histoire de pas grand-chose !
Quand je vais voir des sites sur le css ça semble très simple, mais la mise en pratique est plus complexe.:)

Finalement le blanc en haut et en bas ne me gêne pas, ça aère un peu (mais je ne comprends pas son origine).
Le seul problème maintenant, c'est pourquoi l'image s'arrête au niveau du bas du contenu principal. Si celui-ci est plus court que le menu, ça pose problème.

Voilà le code actuel :

#header {
	height:150px;
	witdh:100%;
	background-color:#51160c;
	background-image:url(flamme.gif);
	background-repeat:no-repeat;
	background-position:left;
	text-align: center;
}

#menu {
	width:255px;
	float:left;
}

#barre {
	background-image: url(barre.gif);
	background-repeat: repeat-y;
	background-position: 255px 0;
	}

#page {
	padding-left:275px;
}


#footer {
	clear:left;
	text-align:center;
	padding-top:5px;
	width:100%;
	height:35px;
	background-color:#51160c;
	color:#FFFFFF;
}

Dalida · Answer

salut,

Le seul problème maintenant, c'est pourquoi l'image s'arrête au niveau du bas du contenu principal. Si celui-ci est plus court que le menu, ça pose problème. 

pourtant je t'ai donner la réponse dans mon source…
regarde mon code :
div#corps {
float:left; /* pour englober div#menu si il est plus haut que div#contenu */
background-image:url(ressources/fausse_colonne_bg.png); /* le faux trait gris entre menu et contenu */
background-position:180px 0; /* juste a l'exterieur du menu */
background-repeat:repeat-y;
}
div#menu {
width:180px;
float:left;
}
div#contenu {
padding-left:222px; /* pour ne pas que le contenu repasse sous le menu quand celui-ci est moins haut. +42px pour espacer du menu et compenser l'epaisseur de la fausse colonne */
}
div#pied{
clear:left;/* l'oblige a rester en dessous */
}

les espaces en trop sont dans 95% des cas dus au marges ou espacements par défaut.
sur la balise concernée il faut essayer :
balise{
margin:0;
padding:0;
}

Rico_Nord · Answer

Oh oui, c'est ça en effet ! J'avais bien mis un float:left avant, mais je m'étais planté de balise et l'avais mis dans le contenu, et là forcément ça ne marchait plus du tout. J'ai honte, je vais me cacher.
La hauteur semble désormais correcte quel que soit mon contenu, et il n'y a plus d'espace non plus en haut et en bas.

En tout cas mille mercis, je ne sais pas comment j'aurais fait sans toi ! :)

Dalida · Answer

je ne sais pas comment j'aurais fait sans toi !
tu y aurais juste mis un peu plus de temps !
-:oD

bon courage pour la suite, je coche "résolu" !

Rico_Nord · Answer

Super, merci encore.

Une image séparant deux balises en css

12 réponses

Discussions similaires

Newsletters