Crée Un Top Transparent Pour Qu' Il S' Intègre Dans Le Backround

[nico476]

Bonjour à tous je possède le thème d origine presta et je suis en 1.5.3.1 je recherche depuis quelques jours comment crée un top dans ma boutique en dessous du menu pour que mon backround donne l 'impression de traversé la colonne centrale se qui permet de se servir du backround comme fond mais aussi pour une mise en avant d' une promotion en top donc je pensé en gros crée un block dans le top avec le fond transparent pour voir le backround traversé la colonne centrale voici un exemple ci dessous

 

http://www.grosbill.com/

 

sans avoir le slide show sa sera déjà pas mal j 'espère avoir posté au bon endroit et que ceci pourra aidé plus d 'un car j' ai réellement rien trouvé sur le forum à se sujet merci à se qui me lirons

[Romain28]

Plop,

Code à rajouter avant le HOOK TOP :

 

<div id="barre">votre contenu</div>

 

Code à rajouter dans votre global.css :

div#barre {width:auto;height:30px;background:transparent}

 

Au pire, donnez moi un lien, j'essaierai de vous aider si ma solution ne fonctionne pas.

Edited February 22, 2013 by Romain28 (see edit history)

[nico476]

merci romain sa me créré un block de combien en dimession

[Romain28]

en largeur, ca devrai suivre le bandeau du header et en hauteur, 30 pixels.

[nico476]

Voici le lien j aimeré avoir le même espace que la bannière de 980 par 300 rn transparent que tu vois sous le menu

 

Voici le lien oublé désolé et merci pour ton aide

http://www.sexybynight.fr/

[nico476]

en hauteur je voudrais que sa fasse 300 il sufi de remplacer par les 30px

[nico476]

Tout ceci se trouve dans global css

 

Code à rajouter avant le HOOK TOP :

 

 

<div id="barre">votre contenu</div>

 

Code à rajouter dans votre global.css :

 

div#barre {width:auto;height:30px;background:transparent}

[Romain28]

Ah c'est un Espace transparent que vous voulez ?

 

Voilà le code à rajouter :

 

Fichier global.css ligne 46

#index #columns {background:transparent !important}
#index #columns .products_block {background:white;}

 

PS: Ne faites pas les modifications que je vous avez conseillé plus haut

Edited February 22, 2013 by Romain28 (see edit history)

[nico476]

je viens de le copier en css mais je vois pas de différence en front voici le bout de code

 

 

 

.clearfix:before,

.clearfix:after {

content: ".";

display: block;

height: 0;

overflow: hidden

}

.clearfix:after {clear: both}

.clearfix {zoom: 1}

 

me suis trompé désolé

[Romain28]

?

 

Vous collez les deux lignes, vous envoyez sur le serveur. CTRL+F5 et vous verrez que tout fonctionne.

[nico476]

c' est bien ça?

 

 

#page {}

#header {z-index:10}

#index #columns {background:transparent !important}

#index #columns .products_block {background:white;}

#columns {z-index:1; background:white; /*box-shadow: 0px 0px 5px 5px #ffffff;*/}

#index #left_column{

[Romain28]

Oui c'est ca. Seulement, vous avez enlevé l'image ? Je la voit plus sur votre site

[nico476]

oui j ai désactivé juste ct l' éditeur de page d accueil

[Romain28]

Donc ??? La solution fonctionne ?

[nico476]

désolé un contre temps je suis de retour je vérifie

[nico476]

sa marcher mais au dessus du footer

 

au lieu de en dessous du menu

 

Voici le code ligne 46

 

 

struture

************************************************************************************************ */

#page {}

#header {z-index:10}

#index #columns {background:transparent !important}

#index #columns .products_block {background:white;}

#columns {z-index:1; background:white; /*box-shadow: 0px 0px 5px 5px #ffffff;*/}

#index #left_column{

display: none;

}

left_column { width:auto; }

#index #center_column{

width: 980px;

}

#product #center_column{

width: 980px;

}

#center_column {}

#right_column {}

#footer {}

[nico476]

je sais pas si tu voie réellement se que je veut dire c 'est comme sur se site

http://www.grosbill.com/

[nico476]

merci pour ton aide mais je reste bloqué je ne trouve pas de topic la dessus

[Romain28]

Le background de ta colonne doit etre transparent. Et les éléments qui se greffe dessus doit avoir un background determiné. Si ta colonne est blanche, tu peut coller une fenetre par dessus, tu verra pas à travers

 

régler l'opacité avec : opacity:0.x (x étant le pourcentage)

Edited February 26, 2013 by Romain28 (see edit history)

[nico476]

j' ai réussi à faire ceci regarde 2 seconde je te l 'active

[nico476]

clic ici

c'est bon c'est activé

[nico476]

#index #columns {background:transparent !important}

#index #columns .products_block {background:white;}

 

 

et ce code que tu ma donné crer un écart entre mais 2 modules produit phare en dessous du top transparent ainsi que au dessus du footer par contre sa ma plait cet écart j'aimerai l'augmenter mais je ne parvient pas à le faire