Une image séparant deux balises en css
Résolu
Rico_Nord
Messages postés
22
Date d'inscription
Statut
Membre
Dernière intervention
-
Rico_Nord Messages postés 22 Date d'inscription Statut Membre Dernière intervention -
Rico_Nord Messages postés 22 Date d'inscription Statut Membre Dernière intervention -
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 <div> 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 ?
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 <div> 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 ?
A voir également:
- Une image séparant deux balises en css
- Légender une image - Guide
- Image iso - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Transformer une image en icone - Guide
12 réponses
salut,
il existe la technique des fausses colonnes.
tu ajoutes un <div> 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 !
il existe la technique des fausses colonnes.
tu ajoutes un <div> 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 !
re,
salut, bg, les vœux…
pour notre ami, une solution encore plus simple.
regarde cet exemple, suffit d'ajouter une image au
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;
}
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.
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.
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 !
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 !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 !
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 !
Oui, là j'ai déjà mieux compris ! Surtout après avoir eu l'idée d'afficher le code source... ;)
Ça va un peu mieux, déjà le pied ne se balade plus n'importe où grâce au clear. Par contre la barre continue de s'arrêter en bas du contenu principal, alors qu'elle est bien déclarée dans le <div> qui englobe ceux du menu et du contenu
De plus elle ne s'affiche plus directement sous le bloc d'en-tête, il y a un petit blanc au-dessus.
Ça va un peu mieux, déjà le pied ne se balade plus n'importe où grâce au clear. Par contre la barre continue de s'arrêter en bas du contenu principal, alors qu'elle est bien déclarée dans le <div> qui englobe ceux du menu et du contenu
De plus elle ne s'affiche plus directement sous le bloc d'en-tête, il y a un petit blanc au-dessus.
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.
Parfois suffit juste de mettre un margin:0px; pour enlever des espaces en trop autour d'un bloc.
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;
}
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;
}
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 :
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 :
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;
}
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 ! :)
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 ! :)
@+ b g