Superposer 3 images dans design.css

Superposer 3 images dans design.css [Réglé]

Jin Membre non connecté

Booster Fronde

Le 24/12/2009 à 17h49

Booster Fronde
Voir le profil du membre Jin
Inscrit le : 21/12/2009

Bonjour,

J'ai effectué une petite modification dans le fichier design.css mais je ne vois plus apparaître l'image header.png.

Voici le code:

Code CSS :

div#header_container,div#header_admin_container {
    background: url(images/header.png) no-repeat;
    background-position:20px 0px;
    margin-bottom:8px;
    border:1px solid #FFF;
}
 
/* ##### Entéte de la page ###### */
div#header,div#header_admin {
    height:89px;
    background: url(images/mon_image.png) no-repeat;
}
 
/* #####  Conteneur en dessous de l'entéte ###### */
div#sub_header,div#sub_header_admin {
    height:27px;
    padding:0;
    padding-top:10px;
    padding-left:5px;
    background: url(images/sub_header.png) no-repeat;
}

Merci pour votre aide !

Édité par ReidLos Le 24/12/2009 à 19h23

ReidLos Membre non connecté

Equipe Développement Modérateur

Le 24/12/2009 à 18h39

#79496

Modérateur
Voir le profil du membre ReidLos
Inscrit le : 27/02/2009
Site internet
Groupes :
Equipe Développement

Salut Gin

As tu une adresse de ton site ?

Tu veux faire quoi au juste ?

Jin Membre non connecté

Booster Fronde

Le 24/12/2009 à 18h52

#79497

Booster Fronde
Voir le profil du membre Jin
Inscrit le : 21/12/2009

Je suis actuellement en local donc je ne peux pas donner d'url cependant je voudrais pouvoir afficher le header.png sur le sub_header.png. Actuellement j'ai mon_image.png sur le sub_header.png sans avoir à mettre de z-index mais le header.png ne s'affiche pas et je ne comprends pourquoi.

Merci !

J'avais modifié aussi ceci qui se trouve dans design.css

Code CSS :

body {
    background:#000000 url(images/background.png) repeat-x; /*url(images/global.png)  repeat-x;*/
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif;
    color:#B9121B;
    margin:0;
    padding:0;
}

Édité par ReidLos Le 24/12/2009 à 19h23

ReidLos Membre non connecté

Equipe Développement Modérateur

Le 24/12/2009 à 19h22

#79498

Modérateur
Voir le profil du membre ReidLos
Inscrit le : 27/02/2009
Site internet
Groupes :
Equipe Développement

Enfaite il ne faut pas que regarder niveau css mais aussi au niveau du header.tpl... et peut etre changer les divs...

Code TPL :

<div id="header_container">
<div id="header">
<h1 style="display:none;font-size:9px;">{SITE_NAME}</h1>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub_header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>

Superposer pour faire quoi ?

Il faut que tu nous dise précisément, car il y as des éléments qui ne doivent pas être touché pour les menus de liens par exemple

Bon je file manger ^^

Joyeux noel a toi !

Édité par ReidLos Le 24/12/2009 à 19h23

Jin Membre non connecté

Booster Fronde

Le 24/12/2009 à 19h33

#79499

Booster Fronde
Voir le profil du membre Jin
Inscrit le : 21/12/2009

En fait l'image header.png ne s'affiche pas car il se trouve sous mon_image.png.

Code CSS :

div#header_container,div#header_admin_container {
    background: url(images/[b]header.png[/b]) no-repeat;
    background-position:20px 0px;
    margin-bottom:8px;
    border:1px solid #FFF;
}
 
div#header,div#header_admin {
    height:89px;
    background: url(images/[b]mon_image.png[/b]) no-repeat;
}

Le header.png correspond à mon logo et donc ce n'est pas intéressant de ne pas voir afficher son logo sur son site.

En fait ce que j'aimerai pouvoir faire, c'est afficher un background pour l'entête dans lequel je pourrai afficher une image relatif aux occasions et évènements et aussi mon logo.

Bon appétit et joyeux noel et merci de vouloir m'aider.

Édité par Visiteur Le 25/12/2009 à 13h22

dark Membre non connecté

Booster Bazooka

Le 25/12/2009 à 09h39

#79510

Booster Bazooka
Voir le profil du membre dark
Inscrit le : 14/12/2009
Site internet
Groupes :

et si tu faisais une image de fond avec une partie transparente ? tu aurais une image avec un trou dedans et ton autre image derrière qui remplirai ce trou.

Si tu ne comprends pas je te ferai un dessin pour mieux t'expliquer.

Joyeuses fêtes

Je lis et respecte ce que vous écrivez, faites de même pour moi

Visiteur

Boosteur Inactif

Le 25/12/2009 à 13h28

#79523

Boosteur Inactif
Voir le profil du membre
Inscrit le : 02/06/2026

Bonjour,

A moins d'appliquer la proprièté css : en float ... Les solutions sont multiples et au choix

Bien que par le css se soit bien plus complexe que la solution proposé par Dark.

J'ai récemment fait un thème perso ou il a fallu que je code des nouveaux "div" pour implanter le système du logo transparent, pour justement pouvoir arriver à changer le logo (logo.png) sans difficulter en css pour les événementiels...

Je te conseil donc de suivre le conseil de Dark, car la mienne c'est du gros travail

Créations de Modules

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie