Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1519 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Images background en bas de page

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Images background en bas de page

n°1259053
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 14:26:01  profilanswer
 

Bonjour
 
 
--------- (résolu ici - probleme de background plus bas) ---------
J'ai une page, qui contient des titres. Jusque là, rien d'anormal.
Ce sont donc des titres h2, et je voudrais leur mettre une tite puce devant, pour faire joli.
 
Alors j'ai essayé plusieurs techniques, mais la puce que je veux utiliser est assez haute, et tous mes essais me donnent ceci :
 
http://img209.imageshack.us/img209/8307/pasbien5dv.th.jpg
 
Ce qui est particulièrement moche.
 
Alors que je voudrais avoir plutôt ça :
 
http://img209.imageshack.us/img209/8977/bien4ox.th.jpg
 
voire ça :
 
http://img461.imageshack.us/img461/7156/tresbien8gs.th.jpg
 
Ce qui n'est pas beaucoup plus joli, mais un peu quand-même.
 
J'ai essayé plusieurs possibilités après mes recherches (mettre la puce en background avec un padding-left, mettre le titre en display:list-item avec list-style-image) mais aucune ne me donne la possibilité de centrer verticalement le texte par rapport à la puce (ou alors je suis un peu con, ce qui est fort probable également).
 
 
---------------------------------------
 
Second problème :
 
J'ai une image de fond que je voudrais placer en bas de page.
Mon HTML est, plus ou moins, comme suit :

Code :
  1. <div id="conteneur">
  2.   <div id="header">...</div>
  3.   <div id="navigation">...</div>
  4.   <div id="contenus">...</div>
  5. </div>


Et mon CSS comme ceci :

Code :
  1. html, body {
  2.   height: 100%;
  3. }
  4. #conteneur {
  5. width: 760px;
  6. margin: 0 auto;
  7. text-align: left;
  8. position: relative;
  9. height: 100%;
  10.     background: #fff url(../images/interface/makoa/arbre-fondblanc.jpg) no-repeat bottom left;
  11. }
  12. #header {
  13. width: 100%;
  14. position: static;
  15. clear: both;
  16. }
  17. #navigation {
  18. width: 200px;
  19. float: left;
  20. }
  21. #contenus {
  22. width: 530px;
  23. float: left;
  24. }


 
Problème : sur FF, mon image de fond apparaît en bas de la fenêtre, alors qu'elle devrait apparaître en bas du contenu (ce qu'elle fait sur IE). Du coup quand on scrolle, on a une image de fond au milieu de la fenêtre, c'est plutôt super moche.
 
J'ai essayé de mettre un hr avec clear: both avant la fermeture du div conteneur, mais rien n'y fait.
Comment mettre cette image de fond en bas du contenu et non pas de la fenêtre sous FF ?
 
 
 
Avez-vous une solution (en fait deux, du coup) pour mon esprit tourmenté ?
 
Merci !


Message édité par cosmoschtroumpf le 08-12-2005 à 10:00:31

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
mood
Publicité
Posté le 05-12-2005 à 14:26:01  profilanswer
 

n°1259086
FlorentG
Unité de Masse
Posté le 05-12-2005 à 14:46:23  profilanswer
 

En background et position centrée ?


---------------
last.fmflickr
n°1259090
masklinn
í dag viðrar vel til loftárása
Posté le 05-12-2005 à 14:49:32  profilanswer
 

FlorentG a écrit :

En background et position centrée ?


 [:benou_+1]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1259096
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 14:54:11  profilanswer
 

en background, le problème, c'est que non seulement ça met le soulignement (border-bottom), mais en plus c'est coupé en haut et en bas. Je peux jouer avec les padding, mais le soulignement reste. Et le top, ça serait que le papillon déborde un peu en-dessous, que son bas soit au niveau de l'accroche en dessous, sinon ça fait trop d'espace autour du titre. Si jamais j'arrive à me faire comprendre...
 
 
Ah oui, et j'ai mis à jour mon post, j'ai un autre problème d'images de fond.

Message cité 1 fois
Message édité par cosmoschtroumpf le 05-12-2005 à 14:54:38

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1259098
FlorentG
Unité de Masse
Posté le 05-12-2005 à 14:55:14  profilanswer
 

Fout un span dans ton h1, et met le soulignement sur le span [:dawa]


---------------
last.fmflickr
n°1259099
masklinn
í dag viðrar vel til loftárása
Posté le 05-12-2005 à 14:55:55  profilanswer
 

cosmoschtroumpf a écrit :

mais en plus c'est coupé en haut et en bas


T'as qu'à rêgler la hauteur de ton bloc [:pingouino]

Message cité 1 fois
Message édité par masklinn le 05-12-2005 à 14:56:21

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1259106
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 14:58:39  profilanswer
 

FlorentG a écrit :

Fout un span dans ton h1, et met le soulignement sur le span [:dawa]


heu... [:pingouino]
ouais c'est une idée.

masklinn a écrit :

T'as qu'à rêgler la hauteur de ton block [:pingouino]


Oui, c'était con comme précision, parce que en fait c'était pas un problème.
 
N'empêche que j'aimerais bien qu'il n'y aie pas autant d'espace autour du titre, et j'aimerais bien aussi que le papillon déborde en-dessous.
Je suis en train de me demander, un tit span vide en position absolue par rapport au titre en position relative, avec des positions négatives, ça pourrait le faire, non ?
 
 
 
Et j'ai toujours mon problème de background :o
 
vous voulez des images ? [:dawa]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1259115
omega2
Posté le 05-12-2005 à 15:03:20  profilanswer
 

Je résume : En gros, tu veux une puce spéciale pour le titre qui déborde sur le paragraphe en dessous en faisant se décaler latéralement le début des premiéres lignes du texte du paragraphe qui le suit.
 
 
En métant une image sous forme de bloc aligné à gauche suivit par le titre et l'autre paragraphe, ca marchera. Je sais pas s'il y a une solution en tout css.

n°1259126
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 15:16:50  profilanswer
 

omega2 a écrit :

Je résume : En gros, tu veux une puce spéciale pour le titre qui déborde sur le paragraphe en dessous en faisant se décaler latéralement le début des premiéres lignes du texte du paragraphe qui le suit.
En métant une image sous forme de bloc aligné à gauche suivit par le titre et l'autre paragraphe, ca marchera. Je sais pas s'il y a une solution en tout css.


Non, ça ne décale rien du tout latéralement.
Regarde les screens que j'ai posté : la première image (ce que j'obtient), c'est un screen, et on voit qu'il y a largement la place, en-dessous de l'image, qu'elle descende sans rien toucher.


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1259130
omega2
Posté le 05-12-2005 à 15:19:09  profilanswer
 

Quand t'as dit qu'il y avait trop d'espace autour de ton titre, je pensais que tu voulais que l'image dépasse sous le début du paragraphe qui suit le titre. C'est pas le cas?

mood
Publicité
Posté le 05-12-2005 à 15:19:09  profilanswer
 

n°1259136
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 15:21:03  profilanswer
 

sisi, mais elle ne décale rien latéralement, puisqu'elle a largement la place de descendre sans rien toucher, étant donné que rien n'est en-dessous d'elle.


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1259138
cosmoschtr​oumpf
dawa powered
Posté le 05-12-2005 à 15:23:02  profilanswer
 

tiens, ce que je voudrais : http://img461.imageshack.us/img461/7156/tresbien8gs.th.jpg


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1261092
cosmoschtr​oumpf
dawa powered
Posté le 07-12-2005 à 15:56:27  profilanswer
 

up, surtout pour mon probleme de background :o (la puce je vais me démerder mais le background j'en chie)


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux
n°1261280
gatsu35
Blablaté par Harko
Posté le 07-12-2005 à 21:54:12  profilanswer
 

http://gatsu.ftp.free.fr/Modele/puce/page.html
 
j'ai gardé un code très propre.
 
je pense que ton bloc avec la puce va se répéter non ?
 
donc un simple empilement d'éléments :  
<div>
<h2></h2>
<h3></h3>
<p></p>
</div>
 
ensuite j'ai juste colé la puce en background du div
puis stylé les autres éléments avec des border, margin et padding
 
et pour l'arbre je l'ai mis en background de l'élément HTML qui reste toujours constant sur tout l'écran normalement.
 
à moins que je me trompe un peu.
voili voilou

n°1261511
cosmoschtr​oumpf
dawa powered
Posté le 08-12-2005 à 09:59:23  profilanswer
 

Merci, mais le problème de puce est résolu :o
 
j'ai fait ça :
<h2><span></span>label du titre</h2>
 
et j'ai mis le h2 en position relative, et le span en absolu, avec un top et un left négatifs, ainsi qu'une hauteur et une largeur.
 
Quoi que ta solution n'était pas mal non plus.
 
 
Non, maintenant c'est mon problème de background qui m'énerve :/


Message édité par cosmoschtroumpf le 08-12-2005 à 09:59:42

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/ACH jeux

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Images background en bas de page

 

Sujets relatifs
background en plusieurs partiesAffichage d'une page xhtml
pb pour faire un zip avec une page php[html] problème avec background image d'une cellule
Page qui ne s'affiche pasbalise head sur page web faite avec dream
Lire un son dans une page web (avancé)[CSS] Problème float IE Mac
Ou apprendre le CSSHTML dans une page free
Plus de sujets relatifs à : [CSS] Images background en bas de page


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR