Dijû! Positionnement qui foire!

[Bacchus]

On m'a posé le dilemne suivant:

Voila,
j'ai quelques petis problèmes:
http://www.blueseed.org/subversion/css/test2.php

1- Je voudrais que le div de gauche (en gris) s'étende de la même longueur que celui de droite (où y'a le texte) de manière à griser cette partie.

2- Je voudrais que la barre d'en bas se positionne correctement, pour une raison quelconque, elle ne veut pas se mettre comme je lui dis de se mettre.

Merci d'avance

Bon alors pour le point un je lui dis qu'il faut que la taille du menu en gris à gauche ai la même hauteur que le mainframe. (Bloc à droite contenant le texte)

Et pour le point deux, j'ai essayé certaine astuce mais j'y arrive pas

Dans mes testes foireux j'arrive à ce résultat

Alors je solicite votre aide!

Voici sont css original: http://www.blueseed.org/subversion/css/subv.css

Merci.

[calimo]

Le truc est d'entourer le tout dans un bloc (div) contenant à la fois le menu et le contenu, avec comme couleur de fond la couleur de fond du bloc le plus court (ici gris).
Si les 2 sont susceptibles d'être plus courts, il te faut 2 blocs.

Voir plus d'infos ici : http://css.alsacreations.com/Tutoriels- ... s-tableaux

[Bacchus]

En effet, c'est la bonne méthode, mais la page en question est bourré de div que tout foire quand même. Mais bon on va voir ça Merci.

[calimo]

En effet, il y a moyen de supprimer un nombre important de div.

Ou du moins de réorganiser un peu logiquement tout ça

Déjà le

Code : Tout sélectionner

<div align="center">

on peut le virer et mettre l'alignement dans le body. (en plus je dois avouer que je ne vois même pas ce qu'il centre, vu que toute la largeur est occupée... à supprimer sans autre forme de procès)

Ensuite :

Code : Tout sélectionner

  <div id="banner">
	<img src="img/subversion.png" alt="subversion" width="600" height="100" />
  </div>

C'est le titre non ? Alors qui dit titre dit... h1
C'est un principe de base. Il faut utiliser la sémantique de base, c'est à ça qu'elle sert : donner un sens au contenu. C'est le meilleur moyen de diminuer le nombre de div (en plus inutiles).

En plus tu la rends plus compréhensible... tu es gagnant à 150%

Ensuite :

Code : Tout sélectionner

<div id="leftpart">

Il y a déjà une info de mise en page là. Que fais-tu le jour où il faut changer et que ce "leftpart" (qui n'est déjà pas à gauche ) devra être à droite ? Ce qui est valable pour les classes l'est aussi pour les id

On continue :

Code : Tout sélectionner

<div class="lmenu">

Je pense que tu n'aura jamais deux lmenu, donc tu peux en faire un id sans hésitation
Et comme avant, "l" fait penser à left... trouve un meilleur nom

Et :

Code : Tout sélectionner

<div class="whiteframe">

Pourquoi ne pas utiliser une liste pour baliser les éléments du menu ? Hop, un div inutile en moins

Code : Tout sélectionner

<div class="menutitle">

Ça c'est quand-même le meilleur Non, c'est pas vrai, le mieux c'est les <div class="h2">
C'est un titre, dans le sens, c'est ce que tu veux, et même tu le dis dans le nom de la classe, alors pourquoi ne pas en faire un titre ? Un vrai ? Avec un <hx> (h1, h2, h3... h6) ?

Bref, il y a une bonne marge de progression et de simplification

[Bacchus]

Merci, mais oublie pas c'est pas tu mais il, c'est lui qui a des prob et ma mander pour l'aider. Mais je savais que tout ces div était la cause du problème, je le lui ai déjà dis d'ailleur.

[calimo]

Oui, tu as raison, mais au final, tu ou il, le problème est le même. Demande-lui de venir ici

[Bacchus]

Oui je vais lui dire, mais finalement on va devoir refaire la page au complet parce que l'astuce de Alsa marche vraiment pas ce coup-çi!

J'ai même commis le sacrilège de penser à faire la mise en page avec des tableaux!

EDIT: En fait la mise en page original était en tableau, mais il a eu le projet de la mettre en CSS pur. On finira par trouver le truc

[calimo]

Et pourquoi est-ce que ça ne marcherait pas ?