[Résolu] Paramètrer un CSS pour superposer 2 images en bandeau

[Emm']

Bonjour,

 

Sur mon site je mets une photo en haut en bandeau (sur chaque page). Selon les navigateurs / configurations d'ordinateur, cette photo apparait plus ou moins large. Je souhaite afficher mon logo par dessus, à gauche & le nom du site à droite en écriture stylisée.

Si je crée une image avec the Gimp, mon logo & le nom du site ne seront pas vu par de nombreux internautes.

Je souhaite jouer avec des transparant.

Ma photo en fond, par dessus 2 images en .gif sur transparant.

Seulement, il me manque quelques connaissance pour que ça marche !

Ma phrase de css d'affichage de la photo bandeau :

#header {background: #eee url('images/img_bre5.jpg') no-repeat center top;}

Les différents essaie que j'ai fais soit font disparaitre la photo, soit n'affiche pas mon logo ...

url logo : images/logo3.4.gif

 

z'avez une idée ?

Modifié le 29 novembre 2006 par Emm'

[KewlCat]

Je ne suis pas certain d'avoir bien compris quels étaient les éléments en présence, leur nature, leur positionnement....

Tu as une image id="header" en haut de chaque page, mais sa taille varie en fonction des navigateurs ? Pourquoi ne précises-tu pas, tout simplement, "width: 500px;" dans ses attributs CSS ? (500 ou la taille que tu veux)

Ensuite, pour tes éléments que tu veux positionner à droite et à gauche par-dessus cette image, si tu veux être absolument certain de les voir, tu devrais préciser "z-index: 0;" pour le header et mettre lesdits éléments en "z-index: 1;". Si ces éléments sont des images, tu devrais les faire en gif avec fond transparent, ou sinon préciser, si ce sont des éléments de type texte, "background-color: transparent;"

Pour ce qui est du positionnement, je verrais bien un conteneur en "position: relative" et des éléments en "position: absolute" dedans, histoire de pouvoir les placer en "top: 0px; left: 0px;" et "top: 0px; right: 0px;" ...

Sinon, tu as le droit de vouloir jouer avec des float mais je n'ai pas la motivation suffisante pour voir si ça fonctionnerait tout navigateurs confondus....

[Dylav]

Jette un oeil sur ce topic, en particulier à partir du post n°16 (haut de la seconde page), avec en plus une remarque judicieuse de KewlCat concernant l'image flottante : il n'est pas nécessaire de l'inclure dans un <span>, elle peut tout simplement bénéficier en direct du comportement id="ordi" :

<div id="entete">
<img src="photo/ordi.jpg" alt="ordinateur" title="ordinateur" id="ordi">
</div>

[Emm']

Merci de vos réponses !

Je vous précise toutefois que je ne suis pas expert en programation. Ma démarche de "facilité" a été d'utiliser un css en open source qui me plaisait & de voir comment le modifier !

 

Kewlcat, en jouant avec width je peux effectivement "bloquer" l'image de mon bandeau. En fait, j'ai plus l'impression que l'aspect du site change fonction des resolutions d'écran que de navigateur !

Mon, width était : 85% il me permettait d'avoir 2 belles colonnes proportionnées de chaque côté. En le rendant fixe, je perds la proportion (pas trop grave) mais je me rends compte surtout que je ne peux pas mettre ma colonne centrale trop large (840px) car de nombreuses config, je suppose, ne verrons plus les colones latérales. Je vais le laisser en 700px.

 

Par contre je suis toujours intéréssé de résoudre ma difficulté : je pourrai à l'avenir changer d'image de bandeau sans avoir à me soucier du logo & de nom du site.

Dylav, j'ai fait quelques ésssaies avec ce que tu me dits #16... Aves les différentes pièces (image de design) en présence ça n'a pas trop marché.

 

Mon site n'est pas en ligne, par contre d'autre site utilisant la base open source identique le sont. Comme :

http://doktergigiku.com/

Mon css (qui a quelque variantes de celui du site présenté, mais qui pour le bandeau et ce qui l'entourre est ok) :

/* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  
  Please email me if you use this, 
  as I would love to see how it is being used, 
  also you can join my linkshare to help you with your google ranking */
body {
font-family: trebuchet ms, verdana, tahoma,arial;
font-size: 90%;
color: #333333;
background-color: white;
line-height: 180%;
margin: 0;
padding: 0;
text-align: center;}
/* Set the page width */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
width: 600px;
margin: 0 auto;
text-align: left;}
#wrapper-menu-top {
background: white url('images/bg02-white-left.png') no-repeat left top;
background-color: #ffffcc;}
#menu-top {
background: transparent url('images/bg02-white-right.png') no-repeat right top;
overflow: hidden; /* no idea why this works, but it fixes a FF problem */	}
#menu-top ul {
margin: 0 20px;
padding: 1em 0 0 0;
list-style: none;
font-size: 85%;
float: left;}
#menu-top li {
display: inline;
float: left;}
#menu-top a {
float: left;
background:url(images/menuleft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
line-height: 1.5em;}
#menu-top a span {
background: transparent url(images/menuright.png) no-repeat right top;
padding:5px 15px 4px 6px;
color:#5b8fbe;
display: block;
float: left;
cursor: pointer;} /* IE doesnt display the hand 
       when you roll over the link for some reason. This fixes it */
#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span {	background-position:100% -42px; }
#wrapper-header {
background: transparent url('images/bg.png') top center repeat-x;}
#header {
background: #eee url('images/banner_mountains3.jpg') no-repeat center top;}
#wrapper-header2 {
background: transparent url('images/bg02-blue-left.png') top left no-repeat;}
#wrapper-header3 {
background: transparent url('images/bg02-blue-right.png') top right no-repeat;}
#header h1 {
margin: 0 20px;
padding: 0;
height: 192px;
line-height: 3em;
color: #c72d96;
font-size: 260%;
text-align: right;}
#wrapper-content {
background: white url('images/barre13left.png') no-repeat left top;
background-color: #ffffcc;}
* html #wrapper-content { height: 1%; }
#content {
background: transparent url('images/barre14right.png') no-repeat right top;
padding: 5px 245px 5px 40px;}
#wrapper-menu-page {
float: right;
width:180px;
margin: 20px 30px 3em 2em;
background: transparent url('images/menu_web.png') no-repeat;
text-align: center;
line-height: 140%;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}
* html #wrapper-menu-page { margin-right: 15px; }
#menu-page { 
padding-top: 5px;}
#menu-page ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;}
#menu-page h3 {
font-size: 75%;
text-transform: uppercase;
margin: 1em 0 0.3em 0;
color: #11a54f;
font-weight: normal;
letter-spacing: 0.15em;}
#menu-page a:link, #menu-page a:visited { color: #c72d96; }
#menu-page a:hover { color: #57db7a; }
#piedpage {
font-size: 85%;
text-align: center;
text-decoration: underline;
color: #5b8fbe;}
#wrapper-footer {
margin-top: 1em;
text-align: center;}
#footer {
margin: 0 20px;
background-color: #e5f0fc;
border: 1px solid #ccc;
border-bottom: 0;
clear: both;}
h2 { 	font-size: 140%;
color: #c72d96;}
h3 { font-size: 110%;
color: #11a54f;
padding-left: 20px;}
h4 { 	font-size: 110%;
color: #000000;
text-align: left;}
h5 {	font-size: 110%;
color: #5b8fbe;}
a:link, a:visited { color: #5b8fbe; text-decoration: none; }
a:hover{ color: #993399; text-decoration: none; }

Je souhaite que sur le bandeau (brosses à dent), apparaissent, à gauche le bandeau, à droite le nom du site en caractère stylisé (une autre image en.gif)..

Mon idée, je ne sais pas si elle est réaliste, de la même façon que h1, dans #header a certaines caractéristiques de positionnement pour placer ce titre sur la photo, avoir un objet à la place de h1.

Peut-être que la proposition de Dylav est plus réaliste, l'inconvenient est que chaque page du site se trouve "chargée" de l'image superposée.

Merci

[Dylav]

Si j'ai bien compris, il semble y avoir, dans ta description, 3 images en cause,

- une 1ère, que tu appelles bandeau, en image de fond centrée dans ta zone header,

- une 2nde, que tu appelles "logo", en image "transparente" (gif), par dessus et à gauche,

- une 3ème, que tu appelles "nom du site", en image transparente par dessus et à droite.

 

Une extension de la méthode développée dans le topic de Lomaster permettait de faire flotter, au-dessus de l'image de fond de ton header, une image à gauche et une image à droite (si besoin est, je peux détailler). Ce qui t'oblige effectivement, si tu veux avoir le même effet sur chaque page de ton site, à décrire à chaque fois le positionnement de ces deux images (pas compliqué, mais fastidieux).

 

La méthode évoquée par KewlCat, bien qu'écrite d'une autre façon, imposera des obligations similaires de description sur chaque page de ton site.

 

J'aurais bien une autre suggestion. C'est une image fixe, composée de tes 3 images sur une largeur convenue (par exemple 1024px, qui est probablement aujourd'hui la plus courante), mais où les bords extrêmes gauche du logo et droit du nom-du-site seraient distants de 800px (compatibilité avec le 800x600). De sorte que ce qui serait bouffé par les petits formats, ce serait quelques "brosses à dents" aux extrémités de l'image. Pour les formats plus larges (1280px et au-delà) au contraire, ton image de fond, centrée, serait complétée de chaque côté par un à-plat dans la couleur de fond choisie dans #header (le gris très clair #EEEEEE dans ton exemple). Mais tu peux même éviter cela en choisissant une très grande largeur, par ex. 1600px, pour le "bandeau", qui sera ainsi systématiquement tronqué (exemple imagé tout-à-l'heure).

 

Pas vraiment satisfaisant, mais tous tes soucis de programmation s'envolent...

[Dylav]

Tu trouveras ici une illustration des deux solutions que j'ai évoquées ci-dessus.

 

Les deux images flottantes

 

Dans la feuille de style

 

#header {background: #eee url('images/fond.jpg') no-repeat center top;}
#logo   {float:left;}
#site   {float:right;}

En tête de <body>

 

<div id="header">
<img id="logo" src="images/logo.gif" alt="monlogo" title="monlogo">
<img id="site" src="images/site.gif" alt="monsite" title="monsite">
</div>

Attention, il faut donner une hauteur au header, soit implicitement celle de la plus haute des deux images, soit explicitement dans l'un des trois formats header, logo ou site (attribut height).

 

L'image composée, fixe et surdimensionnée

 

 

J'ai ici volontairement réduit à 600px une image censée avoir une largeur de 1600 px (dont la partie centrale, comprenant le logo et le nom du site, ne mesure que 800px). Une telle image fixe, tu peux carrément la mettre directement en image de fond du <body> (remplace #header par body dans la feuille de style).

[Emm']

Merci Dylav pour ses superbes précisions !

C'est la première de tes propositions que je retiens, elle est bien plus jolie !

 

Ca fait chouette.... Je souhaite améliorer encore : le logo et le nom se trouvent collés en haut de la photo en bandeau.

Je souhaiterai le centrer verticalement.

J'ai ajouté dans les caractéristiques du css du #logo, vertical-align: middle.

Mais ça ne change rien.

Ca y est j'ai trouvé comment le descendre (même si ce n'est pas centré, c'est joli comme ça), avec la caractèristique : margin-top, je rajoute une marge du haut.

Super, ça roule.... Et j'apprends un peu plus à manier ce superbe langage ! Merci les amis !

[KewlCat]

vertical-align: middle

Ca, ça sert à aligner l'image sur la ligne médiane d"un éventuel texte la précédant ou la suivant (pour une image noyée dans un flot contenant du texte). Ici, ton image n'est non seulement pas entourée de texte mais en plus elle n'est plus dans le "flot".

[Emm']

Encore merci !

C'est bien les tutos & liste de propriétés htmls/ css. Vivre en "live" comment ça prend vie, c'est encore mieux !

[Dylav]

Content de t'avoir mis sur une piste qui t'a plu...

 

@+

 

?;o)