Jump to content

Aligner "informations client" header + disposition


Recommended Posts

Hello la room,

Je débute (ça c'est dit).

1- Je souhaiterais à l'image de ce site : http://atchworks.free.fr/grunge/ aligner "bienvenue" , "ajouter aux favoris", "contact" etc.

2- Mettre un fond, qui prenne ou pas toute la largeur comme le site, si vous avez les deux solutions c'est top !
(+choix couleur)

3- Placet ce "bandeau" soit tout en haut comme le site cité plus haut, soit en dessous de mon logo/bbanière.
Si vous avez les deux solution c'est tip-top !

J'ai lu par-ci par-la un travail sur le tpl de header, bref je n'y parviens pas pour le moment.

Merci beaucoup de vos retours.

B'

Link to comment
Share on other sites

Hello.

Merci Maury c'est un bon début, mais j'ai un soucis d'affichage (cf la photo en PJ).

J'ai l'impression que dès que je modifie mon header mon logo se deplace, en gros :)

Aurrais-tu une idée pour remettre le header en ligne au dessus du "logo d'entête" ?
Tu noteras que "votre compte + panier" se calent en dessous de "bienvenue"... ?!?

infos :

/* global layout */
#page {
width: 995px;
background-color:white;
margin: 0 auto 2px auto;
text-align: left
}
h1#logo {
float: left;
width: 29%;
margin-top: 0em
}
#header {
float: left;
/*width: 71%;*/
text-align: right;
width: 1000px;
height: 235px;
margin: 0 auto;
padding: 0px;
}

Merci bien.

;)

B'

19729_jJ4HRfan5rfp6F1naHyx_t

Link to comment
Share on other sites

Alors alors…

y’a plusieurs cas de figures, et il existe de nombreuses façon de le faire… je vais vous faire une version assez propre et évolutive
Vosu aurez besoin de modifier 2 fichiers :
/themes/nom_de_ton_theme/header.tpl
et
/themes/nom_de_ton_themes/css/global.css

dans header.tpl, rajoute à la ligne 46 les trois lignes suivantes :

                    



Si tu veux en plus avoir un lien cliquable sur la bannière :

 



C’est tout pour le header.

Pour le css, rajoutez quelque part (juste en dessous de #header et avant #left column, par exemple :

#banniere {
   background: transparent url('cheminverstabanniereàpartirdudossiercss') no-repeat top left;
   float: left;
   height:XXXpx;
   width: 967px;
}
#banniere a {
   text-decoration: none;
   display: block;
   height: 100%;
   width: 100%;
}


ou pour vous donnez une vue global de la modif

/* global layout */
#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}
h1#logo {
   float: left;
   width: 29%;
   margin-top:0.5em;
}
#header {
   float: left;
   width: 71%;
   text-align: right;
}
#banniere {
   background: transparent url('../css/logobanniere.jpg') no-repeat top left;
   float: left;
   height:255px;
   width: 974px;
}
#banniere a {
   text-decoration: none;
   display: block;
   height: 100%;
   width: 100%;
}
#left_column, #center_column, #right_column {
   float:left;
}



où XXX est la hauteur de ta bannière.

Voila tout.
Vous pouvez aussi rajouter des margin-[top, left, right, bottom] : Ypx; dans les premières accolades pour effectuer un décalage avec le reste des élements.

Sinon pourriez vous m'envoyer votre global.css et .txt ou le lien direct de votre site en MP
Afin que je puisse voir cela directement

Cordialement,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...