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 -
A voir également:
- Une image séparant deux balises en css
- Image iso - Guide
- Légender une image - Guide
- Deux ecran pc - Guide
- Transformer une image en icone - Guide
- Comment faire deux colonnes sur word - 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