18073 sujets

Questions générales et questions de débutants

[CLOS] Header elastique pour contenu large ?

Bonjour,

Je me retrouve devant un cas de figure pour lequel je ne trouve une solution satisfaisante qu'en faisant appel à une table.

Je me dis que qu'il y a forcement une solution plus intelligente en utilisant un div ... mais je ne la trouve pas.

Rapidement, ma structure

<div id="wrapperGeneral">
  <div id="header">Ici mon entete et ma nav</div>
  <div id="contenu">Ici mon contenu qui est parfois très large</div>
</div>


Si la largeur de #contenu depasse la largeur disponible à l'ecran (il s'agit de tableau de données potentiellement très larges),
les background du #header ne sont pas prolongé lors du scroll horizontal (il occupe juste la largeur disponible à l'ecran).

En intégrant comme suit, ça fonctionne

<table><tr><td>
<div id="wrapperGeneral">
  <div id="header">Ici mon entete et ma nav
  <div id="contenu">Ici mon contenu qui est parfois très large</div>
</div>
</td></tr></table>


Quel attribut mettre sur mon #wrapperGeneral ou quelle imbrication de div puis-je utiliser pour virer ma table ?

Si vous aves des pistes, merci d'avance,

Rémy
P.S. : si mon pseudo bout de code n'est pas suffisament parlant, je peux essayer de mettre en ligne deux pages d'exemples ....
Modifié par ptitPimouss (17 Sep 2005 - 00:52)
Salut,

ptitPimouss a écrit :

P.S. : si mon pseudo bout de code n'est pas suffisament parlant, je peux essayer de mettre en ligne deux pages d'exemples ....


Je dirais que c'est une bonne idée Smiley lol
Bonjour,

Oui, montre nous cela en chair et en os, un lien s'il te plait.
Modifié par zzzazzz (11 Sep 2005 - 11:37)
Allons y alors,

La page initial :
about:blank
Avec le contenu plus large que le header (titre + nav1 + nav2), lors du scroll, le header (et donc les 3 backgrounds associés) continue à n'occuper que l'espace initialement disponible à l'ecran.

La même page avec une table autour :
about:blank

La différence c'est juste l'ajout de la table id="tableAll"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<body class="bodybg" onload="init();">
<!-- START: Wrapper general -->
<div id="wrapperAll">
<table id="tableAll" cellpadding="0" cellspacing="0"><tr><td>
<!-- START: HEADER -->
	<div id="header">
	</div> 
<!-- START: Wrapper MAIN -->
	<div id="wrapperMain">
	</div>		
</td></tr></table>
</div> <!--  END DIV WRAPPER  -->


Bien sur, on peut poser un background sur le body mais je perds en flexibilité et je me coupe toute autre utilisation du body background.

Je dois passer à côté d'un truc evident ... non ?

ptitPimouss

P.S. : je viens de decouvrir que sous Firefox la presence de la table generait une bande verticale tout à droite de 15px de large environ. Une raison de plus pour corriger tout ça ...
Modifié par ptitPimouss (17 Sep 2005 - 00:55)
En fait le truc, c'est que ton header étant en premier dans le flux, la taille maximum de la fenêtre au moment où il est affiché est évidemment inférieure à ton super-tableau qui vient après. La solution est donc de sortir tes éléments du flux en mettant carrément ton "#wrapperAll" en "position:absolute".

OK ? Smiley smile
J'aimerais tellement que ça soit OK ...
... mais j'ai du mal integré ta remarque.

Pour l'HTML :

<body>
<div id="wrapperAll">
<!-- START: HEADER -->
	<div id="header">
		<div id="entete"> 
			<h1>Entete</h1></div>
	</div>
<!-- START: Wrapper MAIN -->
	<div id="wrapperMain">
		<div id="liste">
			<table cellpadding="0" cellspacing="0" >
			<tbody><tr>
					<td class="cbox"><input type="checkbox"></td><td>element1</td><td>test avec un libelle un peu plus long</td><td>Couloir 1</td><td>Liaison de com</td><td class="numeric">25</td><td>Un petit descriptif de l'element</td><td>element1</td><td>test avec un libelle un peu plus long</td><td>Couloir 1</td><td>Liaison de com</td><td class="numeric">25</td><td>Un petit descriptif de l'element</td><td>test avec un libelle un peu plus long</td><td>Couloir 1</td><td>Liaison de com</td><td class="numeric">25</td><td>Un petit descriptif de l'element</td><td>element1</td><td>test avec un libelle un peu plus long</td><td>Couloir 1</td><td>Liaison de com</td><td class="numeric">25</td><td class="lastCell"></td></tr></tbody></table>
		</div> <!-- END DIV LISTE -->
	</div> <!--  END DIV WRAPPER MAIN-->
</div> <!--  END DIV WRAPPER  ALL -->
</body>


Avec la css :

HTML {MARGIN: 0;PADDING: 0;COLOR: #000;}
body {PADDING: 0;MARGIN: 0;	font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 70%;}
h1 {font-size:100%;}
#wrapperAll {position:absolute;margin:0;padding:0;}
#header {display:block; background-color:red; PADDING: 0; MARGIN: 0;width:100%;height:50px;}
#entete{display:block; background-color:green;paddig: 0; MARGIN: 0;width:100%;}
#wrapperMain {margin:0;	background-color: blue;padding:30px 15px 0 15px;}
#liste{margin:0;padding:; background-color: #eee;}
#liste td {white-space:nowrap; padding:1px 5px 1px 5px;font-size: 110%;}
#liste table {border:1px solid black;}


Tout ça en live dans un fichier unique ici :
about:blank

Pour l'instant mon header ne se colle toujours pas à la largeur du countenu Smiley rolleyes

rem

Je sais pas si avec Alsa, le web c'est du gateau ...
mais là, je suis bien parti pour faire un flan Smiley langue Smiley ravi
Modifié par ptitPimouss (17 Sep 2005 - 00:55)
Ok, mea culpa j'avais testé sur FF uniquement...trop confiant sur ce coup là...Merci IE Smiley fache

As-tu fouillé sur le forum et sur le site pour voir ?

Je jetterai un oeil ce soir sinon (pas le temps là).

Bonne chance Smiley cligne
Oui, j'ai pas mal fouillé (sur le forum et ailleurs).
Je n'ai rien trouvé. Ca reste un besoin assez particulier je pense.

J'en arrives à la conclusion que seule la table m'apportera le comportement adequat.
Ca m'etonnait (et ça m'etonne toujours) de ne pas pouvoir reproduire ce comportement sans passer par une <TABLE>.
Cela dit, j'ai une solution de contournement, donc ça va.

Donc, jettes-y un oeil uniquement si comme moi tu es étonné ... mais n'y perds surtout pas ton temps.

Quoiqu'il en soit, merci à ceux qui ont pris le temps de me lire et encore plus à ceux qui m'ont repondu.

rem

P.S. : même si je n'ai pas trouvé de reponses supplémentaires sur ce point precis, le site a été un de mes principaux supports de cours quand je me suis lancé en xHTML/CSS. Donc MERCI ALSA Smiley biggrin .
Modifié par ptitPimouss (15 Sep 2005 - 18:13)
Juste pour clore le sujet : le seul moyen que j'ai trouvé (par hasard) de le faire fonctionner correctement sous IE est de supprimer le DOCTYPE....ce qui entre nous n'est pas très reluisant Smiley cligne

Tant pis, en tout cas, ça m'aura pas mal intrigué ton truc Smiley lol
Sujet clos
Aller à