Discussion :

[Thewil]

Bonjour à tous,

J'ai un petit soucis avec mon header. Il se présente suivant ce schéma la:


Donc en gros j'ai mon #header qui contient #header_gauche et #header_droite.

Pour ma résolution ça colle nickel. Le problème par exemple est si je redimensionne la fenêtre en largeur. Les proportions m'ont l'air bien respectée mais le #header_droit passe au dessus de l'image donc il me manque un bout de l'image.
J'aimerais que mon image se redimensionne et que j'ai la totalité mais en réduit.

Merci

CSS
#header

Code :

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

1
2
3
4
div#header {
	height: 83px;
	width: 100%;
}

#header_gauche

Code :

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

1
2
3
4
5
6
7
div#header_gauche {
	float: left;
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	height: 83px;
	width: 71.2%;
}

#header_droit

Code :

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

1
2
3
4
5
6
7
div#header_droiteRecherche {
	background-repeat: no-repeat;
	float: right;
	height: 82px;
	width: 28.8%;
	background-color: #FEA434;
}

Et le code HTML tout bête :

Code :

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

1
2
3
4
<div id="header">
	<div id="header_gauche"/>
	<div id="header_droit"/>
</div>

[Macmillenium]

Bonjour,

Ça vient du fait que ton image à une taille fixe.
Une image avec une largeur de 1028px, c'est énorme, sous quelle résolution tu testes ?

[Thewil]

Je suis en 1440x900.

Mais de toute façon même si elle est petite le header_droite passera forcement par dessus elle ne peux pas se retailler avec la fenêtre si ?

Comment ne pas rendre l'image sans taille fixe alors ? Car c'est une bannière donc ce n'est pas quelque chose que je peux répéter

[Sergejack]

Une image de background n'est pas redimensionable, par contre la balise IMG permet de redimensionner une image.

Tu peux essayer ça :

CSS
#header

Code :

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

1
2
3
4
div#header {
	height: 83px;
	width: 100%;
}

#header_gauche

Code :

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

1
2
3
4
5
6
7
8
9
10
div#header_gauche {
	float: left;
	height: 83px;
	width: 71.2%;
}
 
div#header_gauche  > IMG {
	width: 100%;
	height: 100%;
}

#header_droit

Code :

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

1
2
3
4
5
6
7
div#header_droiteRecherche {
	background-repeat: no-repeat;
	float: right;
	height: 82px;
	width: 28.8%;
	background-color: #FEA434;
}

Code :

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

1
2
3
4
5
6
<div id="header">
	<div id="header_gauche">
		<img src="../images/header.png" />
	</div>
	<div id="header_droit"/>
</div>

Mais tu perdras le rapport largeur/hauteur de ton image.

[kaiser59]

Salut,

Quelque soit l'image ou autre, il faut éviter au max les % lors d'un width et height car celui-ci va adapter ton pourcentage en fonction de la résolution de l'écran donc 40% sur ton écran n'aura pas du tout le même effet sur un 800x600 et donc tes éléments vont se chevaucher. Utilise quand tu peux le "px" étant donné que l'on parle de px en résolution.

Lorsque tu codes tu ne dois pas penser que pour toi, dis toi que tout le monde n'a pas de résolution en 1440x900 et qu'il existe encore et oui des résolution en 800x600 aussi minime soit il. Ce n'est donc pas une raison pour les empêcher de voir ton site Au pire mettre un message d'avertissement.