28220 sujets

CSS et mise en forme, CSS3

Site extensible en largeur

Bonjour à tous,

Je voudrais que mon site soit extensible en largeur sur tous les écrans.

J'ai commencé le codage de la bannière, mais sa marche bien que sur mon écran, dès que je change d'écran décalé Smiley decu

Voici mes codes :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thymotep'S Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<div id="page">
	  <div id="header">
			<a href="index.htm" id="header-gauche"></a>
			<div id="header-repeat"></div>
			<div id="header-droite"></div>
	  </div>
	</div>
</body>
</html>


Et le CSS :


body {

	background-color: #EAEAEA;
	margin:0;
	padding:0;
	
	}

#page {
	
	width:100%

}
#header {
	
	margin:auto;
	margin-top:20px;
	margin-left:5px;
	width:100%;
	height:89px;
	
	}
	
	#header-gauche {
	
	background: url('img/header-gauche.jpg') no-repeat;
	width:204px;
	height:89px;
	float:left;
	
	}
	
	#header-repeat {
	
	background: url('img/header-repeat.jpg') repeat-x;
	width:59%;
	height:89px;
	float:left;
		
	}
	
	#header-droite {
	
	background: url('img/header-droite.jpg') no-repeat;
	width:204px;
	height:89px;
	float:left;
	
	}


J'ai tenté pas mal de chose sans succès, ceci est ce qui rend le mieux Smiley ohwell

Merci à ceux qui pourront m'aider Smiley smile
salut,

#header {
margin-left:5px;
width:100%;
}


100% + quelque chose implique plus que 100% implique problèmes bien avant l'horizon. dans ton cas une scrollbar horizontale.

De plus tes 100% ne sont pas utiles car la largeur par défaut des éléments block est déjà toute la largeur disponible et ce de manière adaptable (contrairement au 100%)

Sinon ton code html ne semblant pas correspondre à un choix déterminé de l'organisation du document (au passage je trouve ça toujours très gênant), il pourrait aussi bien se présenter comme suit :

<div id="page">

	  <div id="header">

			<a href="index.htm" id="header-gauche"></a>

			<div id="header-droite"></div>
            <div id="header-repeat"></div>
	  </div>

</div>


Et dans ce cas la css suivante devrait faire l'affaire :

body {
	background-color: #EAEAEA;
	margin:0;
	padding:0;	
}

#header {
	margin:auto;
	margin-top:20px;
	height:89px;	
	}

#header-gauche {
	background:url('img/header-gauche.jpg') no-repeat;
	width:204px;
	height:89px;
	float:left;	
}
#header-repeat {
	background:url('img/header-repeat.jpg') repeat-x;
	height:89px;
}

#header-droite {
	background:url('img/header-droite.jpg') no-repeat;
	width:204px;
	height:89px;
	float:right;
}

Modifié par clb56 (14 Aug 2006 - 10:53)
Merci sous Firefox sa fonctionne impec Smiley biggrin

Mais sous IE ya un leger ( 3 px max ) entre la partie gauche et le centre et pareil entre le centre et la partie droite !
Je vais regarder ton code, j'ai essayé de me compliquer la vie moi Smiley smile

Merci encore
Bonjour

clb56 a écrit :

[code]<a href="index.htm" id="header-gauche"></a>

(...)

#header-gauche {
background:url('img/header-gauche.jpg') no-repeat;


Pitiiiiiiiiiiiiiiiiiiiiié, non Smiley rolleyes
Laurent Denis a écrit :

Pitiiiiiiiiiiiiiiiiiiiiié, non Smiley rolleyes


mmm,

la flemme de tout relever...

OK je me reprend,

Un lien vide est complètement inaccessible en cas de css inactives et à tout le moins opaque dans le cas css actives/images non chargées.
Donc deux possibilité :
. 1
mettre un texte au lien <a href="">Lien</a>
cacher ce texte au moyen des css
appliquer l'image en background

C'est possible mais assez délicat à réaliser (j'essaye de retrouver la discussion là dessus dans le salon accessibilité).Et surtout ce n'est pas très utile et il est plus simple de...

. 2
Placer l'image mise en background directement en dur dans le document comme support du lien :


<a href=""><img src="" alt="texte alternatif" width="" height="" /></a>


le contenu de l'attribut "alt" se substituera à l'image en cas de non chargement de celle ci, ce qui assure l'accessibilité du lien concerné.
Modifié par clb56 (14 Aug 2006 - 11:26)
De un si c'est mieux pourquoi pas !


	<a href="index.htm"><img  src="img/header-gauche.jpg" width="204" height="89" alt="Blog.thymotep.info" id="header-gauche"/></a>


J'ai mis ceci, sa supprime mon décalage et marche pareil

Je vous remercie Smiley biggrin
Sujet clos
Aller à