Un problème de débutant

Sylmandel · 1 Novembre 2006

Bonjour a tous,

Voila jusqu'a present, je faisais l'ensemble de mes sites a l'aide de tableaux imbriques. Cet technique n'etant plus du tout a la mode et surtout grace a ce site et d'autres, je me suis rendu compte que gerer toute la disposition du site a partir d'une feuille de style c'est vraiment ..... SUPER

Je suis donc en train de me lancer dans les CSS (que je n'utilisais jusqu'a present que pour les textes et autre liens) et surtout dans les balise DIV. Malheuresuement je rencontre mon premier probleme des mon header :'(

En gros, j'ai une banniere header.jpg qui est centre en haut de la page et de chaque cote j'ai deux images differentes qui sont le prolongement de ma baniere : headerLeft.gif et headerRight.gif. Je voudrais en fait que sous n'importe quelle resolution, mon header prenne toute la largeur disponible. Mon probleme etant qu'actuellement je n'arrive pas a avoir des DIV de taille dynamique sur les cotes.

Voici mon code a l'heure actuelle:

index.html

* {
	padding: 0;
	margin: 0;
}

body {
	background: #000000; 
	height: 100%;
}

div#page { 
	height: 100%; 
}


div#header { 
	background: url(../img/header.jpg) no-repeat;
	width: 900px;  
	height: 127px;
	margin-left:auto;
	margin-right:auto;
	float: left;
}

div#headerLeft {
	background: url(../img/headerLeft.gif) repeat-x;
	width: 300px;
	height: 127px;
	float: left;
}

div#headerRight {
	background: url(../img/headerRight.gif) repeat-x;
	width: 300px;
	height: 127px;
	float: right;
}

Mon probleme vient donc de la propriete width des DIV headerLeft et Right (fixee a 300px pour le moment), enfin je pense, mais je ne sais pas comment faire pour qu'ils prennent la place qui reste de chaque cote de mon DIV header.

Merci d'avance

marcelman · 1 Novembre 2006

Pourquoi diviser ton header en 3 images au lieu d'en faire une seule ?

Par ailleurs, dans ton CSS, je n'indiquerais pas div#header mais #header. Cela te permettrais d'utiliser d'autres balises dans ta feuille html. Par exemple un conteneur dans lequel tu aurais <p id...> avec les mêmes propriétés que <div id...>.

Chief · 1 Novembre 2006

Met le floating div's dans le header:


<!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=iso-8859-1" />
		<title>[ Système d'Informatisation du Livret de Formation ]</title>
		<style type="text/css">

			* {
				padding: 0;
				margin: 0 auto;
			}

			body {
				background: #000000; 
				height: 100%;
			}

			div#page { 
				height: 100%;
			}


			div#header {
				background: red url(../img/header.jpg) no-repeat;
				width: 100%;  
				height: 127px;
				float: left;
			}

			div#headerLeft {
				background: blue url(../img/headerLeft.gif) repeat-x;
				width: 300px;
				height: 127px;
				float: left;
			}

			div#headerRight {
				background: white url(../img/headerRight.gif) repeat-x;
				width: 300px;
				height: 127px;
				float: right;
			}		
		</style>
	</head>

	<body>
		<div id="page">
			<div id="header">
				<div id="headerLeft"></div>
				<div id="headerRight"></div>
			</div>
		</div>
	</body>
</html>

Sylmandel · 1 Novembre 2006

Pourquoi j en ai fais 3 ?

Ben en fait le header.jpg ne fais que 900 et je souhaiterais que l'espace restant de chaque cote soit comble par headerLeft et headerRight qui sont simpelment des bouts d'images qui correspondent avec les bords de mon header.

En fonction de la resolution les deux autres div left et right s'agrandissent ou se rapetissent afin que j'ai toujous mon header au centre et que ca fasse comme si il y avait l image tout le long

Je vais expliquer ce que j'aurais fait avec les tableau et peut etre que quelqu'un comprendra:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td background="img/headerLeft.gif"> </td>
		<td width="900" height="127" background="img/header.jpg"> </td>
		<td background="img/headerRight.gif"> </td>
	</tr>
</table>

Ce bout de code mepermet d'obetenir exactement ce que je veux, mon header au centre et le reste de l'espace occupe par mon header left et mon headerright

Modifié 1 Novembre 2006 par Sylmandel

Sylmandel · 2 Novembre 2006

Personne ne voit ou je me suis p-e mal exprime, si c'est la cas dites le moi j'essaierais de mieux vous expliquer le probleme que je n'ai toujours pas resolu d'ailleur

Topper · 2 Novembre 2006

Est-ce que t'as un lien pour qu'on puisse voir vraiment ce que ça donne et si c'est pas faisable autrement ?

Sylmandel · 2 Novembre 2006

Si biensur, d'ailleurs j'aurais p-e du commencer par ca , ca aurait ete plus simple.

Voila ce que je voudrais et que j ai fais avec les tables (donc le header est bien "vectoriel" lorsque j'agrandi ou diminue la taille de mon browser, l 'image est toujours centree avec le reste de l'espace complete par des headerLeft et headerRight)

http://tgom.free.fr/test/table.html

Voila ce que j'ai (j'ai fixe des tailles dans le CSS masi je ne sais pas comment leur dire de prendre l'espace restant)

http://tgom.free.fr/test/div.html

Voila la css

http://tgom.free.fr/test/css/style.css

Modifié 2 Novembre 2006 par Sylmandel

Topper · 2 Novembre 2006

Bon ben c'est plus clair déjà !

T'as juste à changer ça sur ta CSS :

#header {
	position: absolute;
	top:0;
	left:50%;
	margin-left:-450px;
	width: 900px;
	height: 127px;
	float: left;
	z-index: 1;
	background: url(../img/header.jpg) no-repeat;
}

#headerLeft {
	background: url(../img/headerLeft.gif) repeat-x;
	width: 49%;
	height: 127px;
	float: left;

}

#headerRight {
	background: url(../img/headerRight.gif) repeat-x;
	width: 49%;
	height: 127px;
	float: right;
}

En fait, je place de par et d'autre tes DIV headerLeft et headerRight en leur donnant une taille de 49% de la page (car à 50% le second se décale en dessous par manque de place). L'écart qu'il va y avoir entre les deux DIV sera de toutes façons cachés par header qu'on place par dessus avec le z-index. Pour terminer on le centre en lui donnant une position left de 50% à laquelle on soustrait la moitié de sa largeur.

Voila... tu remarquera que c'est même plus propre que ta mise en page en tableaux quand on réduit la page.

Sylmandel · 2 Novembre 2006

Merci beaucou l'ami c est exactement ce que je voulasi

Merci bcp

Topper · 2 Novembre 2006

De rien !

Ca a l'air sympa graphiquement ce que tu prépares. N'hésites pas à nous montrer ça quand t'auras avancé.

Sinon je viens de me rendre compte que dans les propriétés de #header tu peux supprimer la ligne avec : float: left;

Elle est désormais inutile et j'ai oublié de la supprimer.

Modifié 2 Novembre 2006 par Topper

Connexion

Un problème de débutant

Sujets conseillés

Sylmandel

marcelman

Chief

Sylmandel

Sylmandel

Topper

Sylmandel

Topper

Sylmandel

Topper

Veuillez vous connecter pour commenter

Parcourir

Activité