28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je veux faire un bandeau pour mon site (header), le design étant fluide/extensible (je ne me rappelle jamais de la différence) sur le shéma suivant :

image gauche|Titre du site|image droite

http://www.mezimages.com/image/3255/mini_yazerty-design.jpg

Peut-on faire ça en mettant 2 images en background dans le header ?? Je n'ai jamais vu 2 images en background d'une même zone mais je demande quand même parce que ce serait nettement plus pratique pour moi Smiley lol .
Si c'est possible comment fait-on ça :-?
Modifié par Yazerty (03 Jul 2005 - 12:20)
Ce n'est pas faisable directement.

Tu dois imbriquer deux div et leur donner à chacun un arrière plan Smiley smile
Tu peux aussi utiliser un élément déjà présent dans ce header, par exemple un <h1> dans une <div>, tu peux alors attribuer une image de fonds à chacun de ces éléments.
Tout dépend du code concerné.
Bonne idée, d'autant que dans ce cas, le titre qui est au milieu aurait bien sa place dans une balise h1 Smiley smile
Yazerty a écrit :
Igor > je viens de trouver une astuce de ce genre :
http://www.htmldog.com/ptg/archives/000107.php

Ca vous parait honnête et correct comme solution (les <li> en mois car je n'en aurait pas besoin...) ?


Çà a un côté "usine à gaz" à mon goût pour juste le titre, la solution d'utiliser un élément déjà existant me semble plus satisfaisante, et il y a moins de choses à faire Smiley cligne .
Oki je vois...
Ta solution me semble meilleure effectivement.
Je vais essayer de mettre mon image de gauche en background pour le header et de mettre l'image de droite en tant que font de mon titre <h1>.
Je copicollerai le code ici si ça marche...

Merci Smiley smile
J'ai fait ça mais ça ne marche pas :

#masthead
{
	height: 60px;
	border: solid 1px #fff;
	border-width: 1px 0;
	padding: 0;
	background: #D2D2D2 url(images/header-gauche.jpg) no-repeat left;
}
#masthead h1
{
	padding: 0;
	margin: 0;
	text-align: center;
	font: bold 1.7em/60px Verdana, Geneva, Helvetica, Arial, sans-serif;
	background: #D2D2D2 url(images/header-droite.jpg) no-repeat right;
}


<div id="masthead">

<!-- masthead content begin -->

<h1>Yazerty.Net</h1>

<!-- masthead content end -->

				<hr class="hide">
			</div>


L'image de gauche est visiblement cachée par les autre trucs (il me semble en tout cas...).

Je me trompe quelque part ?
Modifié par Yazerty (03 Jul 2005 - 15:07)
pfff j'ai galéré comme un malade à la recherche d'astuces sur le web pour me rendre compte, à l'instant, que c'est le fond de mon <h1> qui faisait bugger la chose.... Smiley bawling

pour ceux qui en auraient besoin un jour le code correct est donc :


#masthead
{
	height: 60px;
	border: solid 1px #fff;
	border-width: 1px 0;
	padding: 0;
	background: #D2D2D2 url(images/header-gauche.jpg) no-repeat left;
}
#masthead h1
{
	padding: 0;
	margin: 0;
	text-align: center;
	font: bold 1.7em/60px Verdana, Geneva, Helvetica, Arial, sans-serif;
	background: url(images/header-droite.jpg) no-repeat right;
}
Bonsoir.
Etant donné que tes deux exemples de CSS sont rigoureusement les mêmes, j'ai un peu de mal à croire qur ton problème soit réglé.... la seule différence est l'indication #d2d2d2 dans #masthead.
Je crois qu'il est bon de mettre une hauteur (60px) à ta balise h1.
L'erreur se trouve dans le bloc de règles #masthead {...}

Puisqu'il s'agit de faire apparaître une image d'arrière plan à côté de l'élément h1, il faut réserver l'espace nécessaire en largeur à gauche de ce h1, en utilisant un padding-left de la largeur de l'image.

(Sur le principe utilisé pour faire des pseudo-puces de listes en CSS)
Modifié par Laurent Denis (04 Jul 2005 - 06:48)