Home

Faire un design avec sidebar sans utiliser de table

Submitted by PiTiLeZarD on Sun, 06/26/2005 - 17:04
Tagged:

Voila je le fais ce post ... :)

Voici ce que l'on veut mettre en place :

Alors là tout les old coders vont dire :"balise table on en parle plus" mais c'est pas propre c'est pas W3C c'est nul ... pi ça génère un code imbuvable et qu'on ne peut absolument pas organiser ...

La l'idéal c'est d'avoir (dans l'ordre du code html) le titre (1) la page (4) et les side après (pour le référencement c'est mieux ....)

Pour cela on utilise le positionnement absolu donc on fait:

<html>
  <head>
    <title>page de test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  </head>
  <body>
    <div id="titre"><span>Ici mon titre</span></div>
    <div id="page"><div id="content">
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
      ici le contenu de notre page<br />
    </div></div>
    <div id="lside">
      ici la side de gauche
    </div>
    <div id="rside">
      ici la side de droite
    </div>
  </body>
</html>

donc ça c'est la structure de base qu'on veut ... le rendu (vous pouvez le tester) n'est pas très folichon ... on va styliser un peu tout ça !!!

on fait notre fichier (qui du coup doit s'appeller styles.css) de cette façon:

#titre, #lside, #rside, #page {
  position:absolute;
}
#titre, #lside, #rside {
  background:#00eaff; /* Cette moche couleur que j'ai trouvé en cliquant au hazard */
}
#titre {
  top:0;
  left:0;
  width:100%;
  height:100px;
}
#lside {
  top:110px;
  left:0;
  width:200px;
  height:300px; /* Inutile quand il y a du contenu */
}
#rside {
  top:110px;
  right:0;
  width:200px;
  height:300px; /* Inutile quand il y a du contenu */
}
#page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
#page #content {
  margin:110px 220px 0 220px;
}

Ce qui nous ammène au rendu que l'on souhaitait au départ ... pour s'en convaincre on peut mettre un beau background:yellow; dans #page #content pour se rendre compte des bornes du cadre mais normalement ça passe sans soucis ...

reste a tester sous IE (je ne suis pas en mesure de le faire de suite ...) mais a part un width:100% pour le content je pense que c'est bon ... et encore ;)

un exemple?

Comments

Submitted by NiKo (not verified) on Sun, 06/26/2005 - 22:00.

Faudrais mettre un petit exemple en ligne, là j'ai la flemme de tout copier-coller pour créer les fichiers ad-hoc pour me rendre compte ;)

Submitted by PiTiLeZarD (not verified) on Sun, 06/26/2005 - 22:05.

Spartiiiiiiit :)

Submitted by NiKo (not verified) on Sun, 06/26/2005 - 22:46.

Miciiiii :)

Submitted by Thalion (not verified) on Mon, 06/27/2005 - 03:09.

Yop,

Sympa comme billet ;)
Je pense que ça doit bien passer sous IE, sinon je te recommande cet article de alsacreations que tu connais peut être déjà, mais on y trouve plusieurs exemples de mises en page :
css.alsacreations.com/Mod...

Submitted by Bonobo (not verified) on Wed, 06/29/2005 - 10:59.

Comment faire pour centrer une image par exemple, et de façon d'avoir le même rendu avec des tables? En prenant en compte que l'image soit toujours centrée même si on redimensionne la fenêtre. Et, dernière condition, sans faire en css: 'left: 50%-(larg/2); top: 50%-(haut/2). Merci.

Submitted by PiTiLeZarD (not verified) on Wed, 06/29/2005 - 15:33.

<div style="width:100%;text-align:center;margin:auto">
<img src="images/img.jpg" />
</div>

t'as essayé ça ???

Submitted by Bonobo (not verified) on Thu, 06/30/2005 - 09:16.

j'ai essayé oui, et ca centre l'image horizontalement, mais pas verticalement (IE et FireFox).

Submitted by PiTiLeZarD (not verified) on Thu, 06/30/2005 - 10:55.

On peut pas définir une hauteur dynamique en css ... enfin si mais sous IE ça explose ... donc ---> margin top/bottom sur l'image ou padding top/bottom sur le div ...

En même temps j'ai pas la science infuse ya peutêtre une autre solution mais je la connais pas ...