28220 sujets

CSS et mise en forme, CSS3

Repeat-x ET repeat-y à 100% [Résolu]

Bonjour à tous,

Voilà un moment que je tourne le problème dans tous les sens, et je n'ai toujours pas trouvé comment réussir ce design sans faire de tableau.

Un petit dessin vaut mieux qu'un grand discours :
upload/2981-MEP.png

Mes besoins :
- un entête (rouge) sur toute la largeur avec une image de fond en repeat-x
- une marge (verte) sur toute la hauteur avec une image de fond en repeat-y
- un logo (bleu) en haut à gauche
- un contenu (blanc) qui peut parfois être très large ou très haut.

Mon problème : quand mon contenu est très large ou très haut (énorme photo Smiley bawling ), l'entête et la marge ne s'étirent pas au-delà de la fenêtre visible. Un petit dessin :
upload/2981-MEP2.png

J'ai cherché dans tous les recoins du web, et même AlsaCréations n'a pu m'aider Smiley bawling Smiley bawling Smiley bawling

Je sollicite un dernier avis avant de vendre mon âme aux <table>
Merci d'avance
Modifié par DamDam (18 Aug 2005 - 11:02)
Salut,
est-ce que la marge et l'entête sont à width/height : 100% ?

Je pense que oui, mais on sait jamais Smiley lol

Courage, tu trouveras probablement une fois que les renforts seront arrivés (des plus grosses pointures que moi) Smiley cligne
J'ai essayé plein de choses, avec des 100% partout Smiley biggol

Au mieux, j'arrive à obtenir un seul des éléments : ou bien la marge à 100%, ou bien l'entete à 100%. Pour cela, je fait :

html, body {
width : 100%;
height : 100%;
}

body {
background : url (image.png) repeat-x;
}


Malheureusement, cela ne marche que pour un coté Smiley bawling . Je ne sais pas comment faire pour avoir l'autre.
et sans les 100% ?

d'après ce que j'ai pu essayer, le height 100% indique que ton élément doit faire 100% de la hauteur disponible, ici, la hauteur d'affichage. Mais c'est une dimension fixée, donc le cadre ne s'étire pas ...

je suppose que c'est pareil pour la largeur.

mais il doit y avoir moyen de faire ça sans spécifier les dimensions. est-ce que tu sais mettre ta page en ligne, ou à défaut donner le code de ta structure de page ?
Voilà ce que je ferais :

pour le xhtml :
<body>
	<div id="banniere">
		<img src="logo" alt="Logo !" />
	</div>
	<div id="contenu">
		C'est bien ça que tu veux ?
	</div>
</body>


pour le css :
html, body {
	padding: 0 ;
	margin: 0 ;
	}
html {
	background-color: white ;
	}
	
body {
	background-color: green ;
	}
	
#banniere {
	height: 180px ;
	background-color: red ;
	}

#contenu {
	margin-left: 20% ;
	background-color: white ;
	}


Il suffit de remplacer les couleurs d'arrière-plan par tes images, et d'ajuster les marges et hauteurs ...
Les cadres devraient s'adapter à la taille du contenu.
Sopo, j'ai essayé ton idée :
upload/2981-Sanstitre.png

Ca fonctionne pour la hauteur : ma marge va du haut jusqu'au bas de la fenêtre et ne s'arrête pas à la fenêtre visible

En revanche, ça ne marche pas pour l'entete : il s'arrête à la largeur de la fenêtre visible. Mon image étant plus grande, quand je fait défiler à droite l'entête montre ses limites.

P.S. : le logo est en fait une image de coin
Y'a déjà du progrès Smiley cligne

Mais je ne sais pas comment faire pour l'entête, désolé.

Quelle idée, aussi, de faire sortir ton contenu de l'écran Smiley biggol
Ce qui m'embète, c'est que c'est tout bête comme design web.
Et les images qui sortent de l'écran, il y en a pléthore dès lors que tu montes une galerie.
Tout le monde ne met pas son navigateur en plein écran, non ? C'est courant de voir une image déborder.
Modifié par DamDam (17 Aug 2005 - 19:26)
Bonjour,

DamDam a écrit :

Tout le monde ne met pas son navigateur en plein écran, non ? C'est courant de voir une image déborder.


Bof !

En insérant tes éléments dans un conteneur général, tu devrais trouver la solution à ton problème :

un peu de lecture pour comprendre le problème, là ou dans les tutoriels autour ...
Bonjour,

Utilise le background de l'élément body pour l'arrière plan qui doit s'étirer en largeur, et le background d'un conteneur pour l'arrière-plan qui doit s'étirer en hauteur.
Modifié par Laurent Denis (18 Aug 2005 - 07:17)
Merci de vos réponses, Laurent & Vero.

Malheureusement, cette solution du conteneur fonctionne quand le contenu est plus grand que la page. Si il est plus petit, il y a fatalement une dimension selon laquelle cela ne fonctionne pas.
Illustration :
upload/2981-Sanstitre2.png
Un moyen de remédier à ce problème est de mettre un min-height à 100% pour le conteneur. Malheureusement, cela ne fonctionne pas sou Internet Explorer qui ne connait pas le min-height.

Je suis toujours preneur d'une solution Smiley confus pour un design simple comprenant une barre en haut sur TOUTE la largeur de la fenêtre (même quand on fait défiler) et une barre à gauche sur TOUTE la hauteur de la fenêtre (idem), que le contenu soit plus petit ou plus grand que la fenêtre.

Merci d'avance
Pour rendre justice à Alsacréations, il existe un hack pour faire adopter à Explorer un comportement de min-height.

Je vais donc considérer le problème comme résolu sans chipoter en remerciant tous les intervenants.
Pour ceux qui sont intéressés, voici le code de ma page :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
<!--
html, body {
padding: 0 ;
margin: 0 ;
width : 100%;
height : 100%;
}

html {
background-color : white;
background : url(bordureH.png) repeat-x ;
}

#page {
background : url(bordureG.png) repeat-y ;
height : 100%;
}
html>body #page {
height : auto;
min-height : 100%;
}

#entete {
height: 100px ;
position : absolute;
top : 0px;
left : 0px;
z-index=10;
}

#marge {
position : absolute;
top : 0px;
left : 0px;
margin-top : 100px;
z-index=10;
background : url(bordureG.png) repeat-y ;
}

#coin {
position : absolute;
top : 0px;
left : 0px;
width : 250px;
height : 100px;
background : url(coinHG.png)  no-repeat;
z-index=11;
}


#contenu {
margin-left: 250px ;
margin-top: 100px ;
background-color: white ;
}
-->
</style>
</head>

<body>
	<div id="entete"> </div>
	<div id="marge"> </div>
	<div id="coin"> </div>
<div id="page">
	
	<div id="contenu">
	contenu
	<img src="100_1245.jpg" />
	</div>
</div>
</body>
</html>
Bonjour Damdam

<modération>

Michel : peux-tu, encore une fois, s'il te plaît, faire l'effort de fournir des codes valides quand tu interviens pour proposer une solution ?

<div id="haut">[b]<li>Haut</li>[/b]</div>


</> 
<!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>color</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
	margin:0;
	padding:0;
	background-image:url(droite.gif);
	background-repeat:repeat-y;
}
#haut{
	background-image:url(haut.gif);
	background-repeat:repeat-x;
	height:150px;
	margin:0;
	padding:0;
}
#droite{
	width:150px;
	margin:0;
	padding:0;
	list-style-type:none;
}
#coingauche{
	width:150px;
	height:150px;
	background-color:#3B3BFB;
	position:absolute;
}
</style>
</head>
<body>
<div id="coingauche"></div>
   <ul id="haut">
   <li>Haut</li>
   </ul>
   <ul id="droite">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
   <li>F</li>
   <li>G</li>
   <li>H</li>
   <li>I</li>
   <li>J</li>
   <li>K</li>
   <li>L</li>
  </ul>
</body>
</html>

Modifié par Michel (19 Aug 2005 - 01:10)
DamDam a écrit :
Je suis toujours preneur d'une solution Smiley confus pour un design simple comprenant une barre en haut sur TOUTE la largeur de la fenêtre (même quand on fait défiler) et une barre à gauche sur TOUTE la hauteur de la fenêtre (idem), que le contenu soit plus petit ou plus grand que la fenêtre.



Ah... S'il faut aussi que la chose s'étende à toute la fenêtre, quelque-soit le contenu, il faut en effet ruser un peu Smiley cligne

Ceci devrait faire l'affaire (Attention: rester en mode de rendu strict pour que html s'étende sur toute la hauteur du canevas dans IE6.0) :


<!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>...</title>
<style type="text/css">
<!-- 
html {
background: url(left.png) top left repeat-y;
}
body {
background: url(top.png) top left repeat-x;
padding: 0;
margin: 0;
}
img {
background: url(top.png) top left repeat-x;
padding: 100px 0 0 100px;
}
#corner {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100px;
background-image: url(corner.png) top left no-repeat;
}
-->
</style>
</head>
<body>
<div id="corner"></div>
<div>
<img src="..." width="..." height="..." alt="..." />
</div>
</body>
</html>

Modifié par Laurent Denis (18 Aug 2005 - 17:30)
Merci, Laurent et Vero.

Comme je l'indiquais, j'ai réussi à résoudre mon problème grace à tous les conseils avec le code indiqué ci-dessus.

Laurent, il me semble avoir déjà essayé sans succès de mettre un background sur les éléments html et body, l'un en repeat-x, l'autre en repeat-y. Je réessaierai à l'occasion.

Damien
Sujet clos
Aller à