image fixe sur fond étirable .

**lizardman** · 08/04/2008, 21h08

Bonjour à tous,
j'aimerais créer une bannière de site dans un <div>. Je voudrais mettre a gauche un logo carré de taille fixe et juste a sa droite un dégradé étirable horizontalement. Le problème que je rencontre est le suivant : pour étirer le dégradé , je n'ai trouvé qu'une seule solution , appliquer un style css au <div> en mettre width=150px et height=100% , mais ça étire aussi le logo du coup ... vu qu'il est dans le <div> .
Si quelqu'un peut me proposer une solution sans que j'ai à rajouter un <div> juste pour le logo , je lui serais immeeeeeeensément reconnaissant

.
Merci d'avance .

**darkstar123456** · 08/04/2008, 21h28

vala un code vite fait, avec des images prises sur le net :p

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style>
* {
        margin: 0;
        padding: 0;
}
div#header {
        width: 100%;
}
div#header div#logo {
        background: url(http://www.septentrion-nwe.org/extension/septentrion/design/septentrion/images/structure/logo_conseil_general.gif);
        width: 50px;
        height: 50px;
        float: left
}
div#header div#degrade {
        background: url(http://www.gsj.ch/img/home/fonds/degrade_bleu_coupe.jpg);
        width: 100%;
        height: 50px;
}
</style>
</head>
<body>
 
<div id="wrap">
	<div id="header">
    	        <div id="logo"></div>
   		<div id="degrade"></div>
    </div>
</div>
</body>
</html>

PS : ça c'est le code que j'appellerai "correct", il faudra faire quelques modifs pour IE très certainement

**Erwan31** · 08/04/2008, 23h41

Bonsoir et bienvenue

ce code n'est pas bon...
Le logo doit être placé dans la code (x)HTML avec un ALT de son nom et non inséré via un background CSS, puisque dans le dernier cas il y aura perte d'information dans certains contextes d'utilisation (absence d'images, navigateurs textes, lecteurs d'écran...) et absence d'indexation par les robots.
Un seul div devrait suffire:

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#header {background: url(/images/degrade_bleu.png) repeat-x;}

xHTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="header">
     <a href="/"><img src="/images/logo.png" alt="Nom logo" width="150" height="150" /></a>
</div>

Avec éventuellement un display:block sur l'image si tu utilises un doctype Strict.

**darkstar123456** · 09/04/2008, 09h04

Envoyé par Erwan31

Bonsoir et bienvenue

ce code n'est pas bon...
Le logo doit être placé dans la code (x)HTML avec un ALT de son nom et non inséré via un background CSS, puisque dans le dernier cas il y aura perte d'information dans certains contextes d'utilisation (absence d'images, navigateurs textes, lecteurs d'écran...) et absence d'indexation par les robots.
Un seul div devrait suffire:

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#header {background: url(/images/degrade_bleu.png) repeat-x;}

xHTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="header">
     <a href="/"><img src="/images/logo.png" alt="Nom logo" width="150" height="150" /></a>
</div>

Avec éventuellement un display:block sur l'image si tu utilises un doctype Strict.

Alors là, permet moi de te contredire...
Effectivement, tel qu'il est là, ce code n'est pas bon, mais garder le logo n'est pas forcément bon, et pour le référencement il vaut mieux avoir un <h1>nom entreprise</h1> qu'un attribut alt de l'image

donc normalement, il aurait fallut écrire le <h1> dans le div#header mais bon...

**lizardman** · 09/04/2008, 11h21

j'ai testé la solution de Darkstar mais l'image de droite (le dégradé ) ne s'étire pas . voici mon code :
html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="bandeau">
		<div id=logo><img id="oeil"   alt"" src="im/logo_oeil.jpg">
		</div>
		<div id=degrade><img id="bandeau"   alt"" src="im/header.jpg">
     		</div>
	</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
div#bandeau {
 
	width: 100%;
	height: 150px;
	}
div#bandeau div#logo{
	float:left ; 
}
div#bandeau div#degrade{
	width: 100% ;
	height: 100% ; 
}

je ne sais pas pourquoi le width:100% n'est pas appliqué :s
merci de votre aide.

**Erwan31** · 09/04/2008, 11h43

Envoyé par darkstar123456

Alors là, permet moi de te contredire...
Effectivement, tel qu'il est là, ce code n'est pas bon, mais garder le logo n'est pas forcément bon, et pour le référencement il vaut mieux avoir un <h1>nom entreprise</h1> qu'un attribut alt de l'image

donc normalement, il aurait fallut écrire le <h1> dans le div#header mais bon...

Excuse moi mais je te contredirai à mon tour.
Cette pratique est assez courante mais ne tient pas compte d'un critère d'accessibilité. En cas d'image non chargées pour une raison ou une autre,
le nom du logo ne sera pas accessible.
La seule manière d'être totalement accessible est donc de mettre l'image
dans le code.

Ensuite pour le h1 il y a deux écoles et j'utilisais moi-même cette structure
il y a un certain temps mais elle se base en partie sur une croyance infondée
comme quoi mettre le nom du site sur le h1 améliorerait le référencement.
En fait dans la plupart des cas il n'en est rien:
Un h1 trop similaire avec le title de la page (ce qui est souvent le cas) peut affecter la ranking de la page, des test l'ont prouvés, et le h1 n'a pas autant de poids qu'on semble le croire...
Certe il n'existe pas en HTML d'élément pour le nom du site mais ça c'est en partie le title qui l'assure. Est-il nécessaire de le répéter dans le h1?
Le seul avantage que procurera le nom du site en h1 est qu'il sera
bien visible au cas ou CSS serait désactivé mais rien n'empêche de le mettre en gras.
J'ai d'ailleurs oublié d'ajouter un font-size important à l'image en cas d'images on chargées pour que le contenu du ALT s'affiche en gros.

On aurait donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="header">
    <strong><a href="/"><img src="/images/logo.png" alt="Nom logo" width="150" height="150" /></a></strong>
</div>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#header img {font-size:2em;}

**Erwan31** · 09/04/2008, 11h49

@lizardman
le width de 100% du header est inutile puiqu'un élément de niveau block prend tout l'espace disponible en largeur.

image fixe sur fond étirable .

CSS

Vue hybride

Discussions similaires

Partager

Partager