28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de frise en entete d'un site web

Bonjour,
Je cherche à faire une frise en haut de mon site, et tout se passe bien, sauf que...
mon image de droite qui devrait finir cette frise ne se positionne pas bien à droite...

Voici mon code CSS:


#banner {
background-image: url(images/vbanner.png);
background-repeat:repeat-x;
z-index: 1;
height: 70px;
width: 100%;
margin-bottom: 5px;
}

#lbanner > img {
float: left;
z-index: 1;
}

#logo > img {
float: left;
z-index: 1;
}

#rbanner > img {
float: right;
z-index: 1;
}


et le code HTML:

<body>
<div id='banner'>
<img id='lbanner' src='images/lbanner.png'/>
<img id= 'logo' src='images/logo.png'/>
<img id='rbanner' src='images/rbanner.png'/>
</div>


En fait j'ai l'impression que mon image rbanner.png ne s'aligne pas sur la taille de la div banner, mais seulement sur les deux autres images qui la précède...
Comment faire ? Insérer un objet transparent faisant toute la taille ? Et si oui, lequel ?
Merci de vos réponses, je suis un peu perdu !

PS: L'image rbanner.png en question est entourée dans la capture d'écran en rouge !

upload/12536-test.png
Modifié par serialg (28 May 2007 - 23:03)
Bonsoir,

Question bête : que fait cette image dans le HTML ?

S'agissant d'un élément de présentation, elle devrait être en fond de quelque chose dans la feuille de style, non ? Du coup elle pourrait être positionnée à droite de l'élément dont elle est en fond par un background-position tout ce qu'il y a de plus banal. Smiley cligne

Par pitié, oublie l'idée du machin transparent qui fait toute la taille.

Note : tes images n'ont pas de texte alternatif (alt). Le texte alternatif est obligatoire en HTML.
Note 2 : tes z-index ne servent à rien, ça ne marche que sur les éléments positionnés (dont la propriété position est autre que static, qui est la valeur par défaut).
Modifié par Lanza (28 May 2007 - 21:29)
Merci pour ta réponse, et pour cette vision des choses. En fait, c'est beaucoup plus logique ! Smiley smile
(pour ce qui est du 'alt' dans les images, je suis au courant, je n'ai pas encore pris le temps les mettre en place !, ce site n'est pour le moment qu'un protoype, je m'entraine !

J'ai donc modifié en conséquence, mais j'ai l'impression que mes div left et right ont "disparues" ou bien sont cachées par la div centrale...

Voici le code modifié:


#lbanner {
background-image: url(images/lbanner.png);
float: left;
height: 70px;
width: 6px: 
}

#banner {
background-image: url(images/vbanner.png);
background-repeat:repeat-x;
height: 70px;
width: 100%;
margin-left: 7px;
margin-bottom: 5px;
margin-right: 7px;
}

#rbanner {
background-image: url(images/rbanner.png);
float: right;
height: 70px;
width: 6px: 
}


et html:

<div id='lbanner'></div>
<div id='banner'></div>
<div id='rbanner'></div>


Les z-index étaient destiné au menu qui se trouve par dessus (celui-même décrit dans ce site)

as tu une idée de ce que j'aurais pu faire de faux ? Je suis débutant en CSS...
upload/12536-test.png
Oui, ça n'est pas la bonne solution.

Tu essaies de placer tes éléments les uns à côté des autres (un héritage de la mise en page par tableau ?). Il vaut mieux les mettre les uns dans les autres.

Exemple : 

<div id="banner">
<h1><img src="gnagna" alt="Backup" id="logo" /></h1>
</div>


et le css

#banner {
background-image: url(images/vbanner.png);
width: 6px: 
}

#banner h1 {
background-image: url(image/rbanner.png);
background-position: right top;
background-color: transparent;
margin: 0; padding: 0;
}

#logo {
display: block; /* pour éviter un espace idiot en dessous */
padding-left: 10px;
background-color: transparent;
background-image: url(image/lbanner.png);
background-position: left top;
}


Je n'ai pas testé, mais ça ne devrait pas trop mal marcher. Ensuite il faut remettre le menu, mais bon.
Modifié par Lanza (28 May 2007 - 22:07)
En fait, ca ne marche pas vraiment...
Voire pas du tout Smiley smile
Je me suis peut être mal exprimé depuis le début. (et l'image du logo nBackup en gris n'a rien à voir au problème).

En fait ce que je cherche à faire, c'est:
une div avec le bord gauche en float left, une div centrale avec le fond répété autant que possible et une div avec le bord droit en float right.
(un peu comme le montre l'exemple suivant:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant
Faire une mise en page sans tableaux de Alsacréation
[/url]

Voici la solution qui je viens de trouver, mais un peu bancale (car je dois mettre des espaces dans mes div, et celle de droite ne me ressort pas l'image complète:

CSS:

#lbanner {
background-image: url(images/lbanner.png);
background-repeat: none;
float: left;
height: 70px;
width: 6px:
}

#rbanner {
background-image: url(images/rbanner.png);
background-repeat: none;
float: right;
height: 70px;
width: 6px:
}

#banner {
background-image: url(images/vbanner.png);
background-repeat:repeat-x;
height: 70px;
margin-bottom: 1px;
}


HTML:

<div id='lbanner'>&nbsp;</div>
<div id='rbanner'>&nbsp;</div>
<div id='banner'> </div>

Modifié par serialg (28 May 2007 - 22:26)
Correction, j'avais oublié le no-repeat et deux trois détails comme le chemin des fichiers images. J'ai également rassemblé les différentes propriétés background dans une seule :


#banner {
background: blue url(images/vbanner.png) repeat-x;
}

#banner h1 {
background: transparent url(images/rbanner.png) no-repeat right top;
margin: 0; padding: 0;
}



#logo {
display: block; /* pour éviter un espace idiot en dessous */
padding-left: 10px; /* en supposant que l'image de gauche fasse 10px de large */
background: transparent url(images/lbanner.png) no-repeat left top;
}




<div id="banner">
<h1><img src="gnagna" alt="Backup" id="logo" /></h1>
</div>


ça marche très bien à condition que tes images se trouvent dans le dossier "images".

Je maintiens et je soutiens mordicus que vouloir placer des divs vides l'un à côté de l'autre comme dans ton dernier essai est une mauvaise idée. Smiley cligne Il faut perdre cette habitude de vouloir placer les éléments les uns à côtés des autres. Les éléments HTML ne sont pas des cellules de tableaux.

Dans la solution que je te propose, les éléments sont les uns dans les autres donc superposés. Ce sont tous des éléments blocs donc ils utilisent tous toute la place disponible. On vire les marge du H1 pour éviter qu'elles ne nous enquiquine. Le placement à droite et à gauche se fait en positionnant le fond en CSS.
Modifié par Lanza (28 May 2007 - 23:03)
Effectivement, ca marche hachement bien...
Je trouvais aussi ma solution bancale, et je suis tout à fait ouvert à l'avis et aux conseils d'autres personnes, je suis encore débutant et vient de ce "merveilleux" monde ancien où tout était fait en tableaux !! Smiley smile

Merci encore mille fois pour ceci, mais puis-je te demander un peu plus d'explication de ce système embriqué ?
J'avoue ne pas avoir tout compris. Pourquoi avoir associé l'image de gauche avec le logo, et l'autre dans le H1 ?

Je suis un peu curieux, et ne me contente pas de recopier betement le code Smiley cligne

Merci mille fois encore et bonne soirée !
serialg a écrit :

Merci encore mille fois pour ceci, mais puis-je te demander un peu plus d'explication de ce système embriqué ?
J'avoue ne pas avoir tout compris. Pourquoi avoir associé l'image de gauche avec le logo, et l'autre dans le H1 ?


Parce qu'on ne peut actuellement mettre qu'un seul fond par élément (ça devrait changer avec CSS 3). Donc j'utilise tous les éléments que j'ai et j'essaie d'en rajouter le moins possbile pour garder un code HTML propre. Chaque fois que tu emboîtes des éléments les uns dans les autres, tu les superposes. Donc le fond qui se répète doit fatalement être dans le div qui contient le tout, pour être en dessous des bords.

Le H1 est un élément en display: block par défaut ce qui fait qu'il va utiliser tout l'espace horizontal disponible. On lui vire juste les marges dont on n'a pas besoin, et lui colle l'image de fond à droite (vu qu'il occupe toute la largeur).

Enfin plutot que de rajouter encore un élément, puisqu'on en a un de disponible avec le logo, on le décale vers la droite avec le padding, histoire d'avoir la place pour afficher l'image du bord gauche.

Je l'ai mis en display: block également parce que sinon certains navigateurs mettent un petit espace entre l'image et le bas du bloc conteneur (une image étant par défaut en display inline, elle est considérée comme étant sur une ligne de texte et certains navigateurs gardent une place pour les lettres descendantes. )
Modifié par Lanza (28 May 2007 - 23:15)
Sujet clos
Aller à