28173 sujets

CSS et mise en forme, CSS3

[RESOLU] CSS - Entete d'un site avec 2 images à taille fixe ...

Bonjour, j'espère que ceci n'a pas été posté déjà ailleurs, j'avouerais que je suis un peu perdu Smiley ohwell

Donc j'explique mon problème. Ayant marre que IE ne comprenne pas la moitié de ce que je lui dis en <table> je m'essaye donc au CSS en espérant qu'il comrpendra mieux.

Sauf qu'il me vient ce problème :

J'ai une entete de site composé de 1 image a taille fixe, 1 image a taille dynamique et pr finir 1 image a taille fixe.

Comment je peux faire pour que la 2 ème image (celle à taille dynamique prenne toute la place de la première a la 3 ème images ?)


<style type="text/css">
<!--
.header1 {
	background-image: url(theme_r1_c1.gif);
	position: absolute;
	visibility: visible;
	height: 82px;
	width: 383px;
	left: 10px;
}
.header2 {
.....
....

....

}

.header3 {
	background-image: url(theme_r1_c9.gif);
	position: absolute;
	height: 82px;
	width: 20px;
	right: 10px;
}


-->
</style>



<span class="header1">&nbsp;</span>
<span class="header2">&nbsp;</span>
<span class="header3">&nbsp;</span>



Voilà le code que j'ai. J'espère que vous pourrez m'aider, merci d'avance.
Modifié par Nixus (07 Nov 2006 - 21:57)
Salut & bienvenue.

Les span sont des éléments de type inline, tu devrais à priori utiliser des éléments de type block (des div, par exemple) s'ils doivent être dimensionnés. (voir cet article pour plus de précisions)

Il me faut quelques renseignements en plus pour t'aider : quel type d'images vas-tu utiliser ? Des images d'arrière-plan, purement décoratives, ou un logo ? Le site a-t-il une largeur fixée, ou s'adapte-t-il à la largeur de la fenêtre ?
Pour les images ce sont purement des images d'arrière plan décorative et le site justement n'a pas de largeur fixée, il doit s'adapter en fonction de la largeur de la fenetre.


J'ai réussi a bidouille un peu en utilisant repeat-x mais sous IE il ne le comprend pas Smiley fache
Administrateur
Nixus a écrit :
J'ai réussi a bidouille un peu en utilisant repeat-x mais sous IE il ne le comprend pas Smiley fache

Hello, c'est assez curieux car IE reconnait très bien cette valeur Smiley ohwell
Ba jlui est indiqué sa hauteur (82px) , sa distance de la gauche, sa distance de la droite et en lui disant repeat-x

Sous FF, tout marche nickel, mais sous IE, il fait comme si il ne connaissant pas la fonction repeat que ca soit repeat repeat-x ou repeat-y

Smiley ohwell
Bonjour,

Il semble que tu cherches à reproduire les cellules d'un tableau avec les span. Ce n'est pas la bonne méthode pour intégrer un design en css.

Cela ne répond pas à ton problème, mais autant partir sur de bonnes bases ...

Un petit exemple en ligne nous permettrait peut-être de t'aider plus efficacement.

Smiley cligne
Bonjour,

Image gauche en float left
image droite en float right
background repeat-x : url(theme_r1_c7.gif)...

Peut être !
Administrateur
ghost a écrit :
Bonjour,

Image gauche en float left
image droite en float right
background repeat-x : url(theme_r1_c7.gif)...

Peut être !

Ce serait plutot du genre :
background : url(theme_r1_c7.gif) left top repeat-x;

par exemple.

EDIT : ah non suis-je bête. Ça ne risque pas de fonctionner sur des éléments de type enligne comme des <span>. Relire l'intervention de Sopo Smiley cligne
Modifié par Raphael (07 Nov 2006 - 20:51)
Par défaut ce n'est pas left, top?
Je n'avais pas vu les spans !! il n'y a qu'à utiliser un div d'un width: 100% non sans span?

<edit>

<!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" xml:lang="fr" lang="fr">

<head>
		<title>Test</title>
<style>

	

	#header{
		height: 82px;
		width: 99%;
		background-image:url(theme_r1_c7.gif);
		background-repeat:repeat-x;
		margin: 0px;
		padding: 0px;		
	}

	

	#header img.gauche{

float: left;
	}

	#header img.droite{

float: right;
	}	


</style>

</head>
<body>

<div id="header">
<img src="theme_r1_c1.gif" class="gauche" />
<img src="theme_r1_c9.gif" class="droite" />
</div>
</body>

</html>

<edit>

Si j'ai bien compris
Modifié par ghost (07 Nov 2006 - 21:47)
Sujet clos
Aller à