Fond en 2 parties

Visiteur

Boosteur Inactif

Le 03/10/2010 à 15h16

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

Bonjour tout le monde !

Alors je m'explique : Je voudrais créer un fond pour mon site, dans lequel la partie gauche serait noire, et la partie droite rouge. La limite entre les 2 couleurs sera toujours au centre de l'écran, quelle que soit la résolution de l'utilisateur. Je pense qu'il faut un code php, seulement je ne m'y connais pas autant, je ne sais même pas si c'est possible de faire ça !
J'utilise un thème extensible, si ça peut vous aider.
Merci d'avance pour votre réponse !

Visiteur

Boosteur Inactif

Le 06/10/2010 à 14h31

#94141

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

Personne ne pourrait me répondre ... ?

Shadow Membre non connecté

Booster Fusée

Le 06/10/2010 à 21h02

#94158

Booster Fusée
Voir le profil du membre Shadow
Inscrit le : 30/12/2007
Site internet

Je ne sais pas faire ça sur un thème extensible. Sur un thème avec largeur fixe, c'est possible avec une image de fond de deux couleurs, d'une hauteur d'un ou deux pixels que l'on répèterait sur la hauteur du site. Mais sur un thème de largeur extensible, je ne vois pas, désolée.

Shadow
"Quand tu ranges chez toi, ça fout le bordel chez ton voisin". - Règle d'entropie générale adaptée aux usages domestiques.

DaaX Membre non connecté

Booster Mortier

Le 06/10/2010 à 23h39

#94162

Booster Mortier
Voir le profil du membre DaaX
Inscrit le : 08/09/2009
Email
Site internet

Salut,

Tu as un exemple à nous soumettre? Histoire de voir ce que tu souhaites, parce que j'imagine que tu as déjà vu ça quelque part.

Visiteur

Boosteur Inactif

Le 07/10/2010 à 19h44

#94199

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

Non, c'est une idée de moi

C'est pour exprimer le contraste entre plusieurs choses, enfin bref...
Le fond ressemblerait EN GROS à ça :

(la barre où les couleurs changent, c'est là ou il y aura ça : )

Si je fais se répéter cette image en largeur, le rouge et le noir seront alternés, et si je la fais se répéter en hauteur, la barre du haut se répétera tout le temps...
Je voudrais que cette image soit élargie sur toute la fenêtre, quelle que soit sa taille.

Édité par Visiteur Le 07/10/2010 à 19h44

Shadow Membre non connecté

Booster Fusée

Le 07/10/2010 à 20h33

#94201

Booster Fusée
Voir le profil du membre Shadow
Inscrit le : 30/12/2007
Site internet

Il faut la découper, une partie pour le header, une pour le sub_header, les deux en hauteur fixe, puis une partie pour le corps de la page qui se répète sur la hauteur. Mais, encore une fois, ce n'est possible à mon avis qu'avec un site en largeur fixe, pas un site extensible.

Shadow
"Quand tu ranges chez toi, ça fout le bordel chez ton voisin". - Règle d'entropie générale adaptée aux usages domestiques.

Flens Membre non connecté

Booster Minigun

Le 08/10/2010 à 16h37

#94229

Booster Minigun
Voir le profil du membre Flens
Inscrit le : 01/09/2010
Site internet
Groupes :

avec une largeur à 100% je pense que c'est envisageable ^^

il suffit de mettre cela à ton image :

Code CSS :

left:50%;
margin-left:-275px; /* 275 étant la moitié de la largeur de ton image */

Mais pour un optimisation plus efficace, j'envisagerais de faire celà non pas avec une image mais tout simplement avec des couleurs via le css comme par exemple :

Code CSS :

background-color:#000000;

Donc ce qui donnerais cela :

Code CSS :

/* zone rouge */
.red_bg
{
position:absolute;
left:0px;
top:0px;
width:50%;
height:100%;
background-color:#FF0000;
}
/* zone noire */
.black_bg
{
position:absolute;
right:0px;
top:0px;
width:50%;
height:100%;
background-color:#000000;
}

ensuite à toi de mettre des balise <div> avec la classe qui convient au bon endroit dans les templates
par exemple dans le header.tpl :

Code HTML :

...
<div id="main">
<div class="black_bg"></div>
<div class="red_bg"></div>
...

je pense que cela fonctionnerais, mais sous toute réserve car je n'ai pas testé ! j'ai pas trop le temps dans l'immédiat mais si tu t'y connais un minimum en css tu devrais t'en dépatouiller facilement

Créations de Thèmes

Répondre

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