Xhtml et div imbriqué

Salut tout le monde,

Je suis nouveau ici, je ferais peut être un post de présentation quand j'en aurais l'envie Pour résumer je boss dans l'informatique.

J'ai un petit souci avec un design de site.

En gros je doit mettre en place le design de mon futur site et il devrais ressembler à cela à la fin :


J'ai décidé de faire mumuse avec des div plutôt qu'avec des tableaux et donc mon design est séparé en plusieurs bloc (div) selon le schéma disponible ici :

hg bg hd bd sont des div qui permettent de faire une boite arrondie.
Désolé pour le schéma, je l'ai fais a l'arrache

J'ai donc découpé mon image principale en plusieurs images sous fireworks et comme je veux pas des table j'ai repris juste les images et j'ai viré le code pourri

Ce qui me donne :

j'ai essayé d'appliquer les consigne de cet article : http://openweb.eu.org/articles/initiation_float/

mais bon je galère, j'ai jamais eu l'occasion de bosser sur autant de div imbriqués.

Need help siouplait les gens

En resumé ce que je souhaiterais au finish


Et la situation actuelle


Si vous voyez d'ou vient mon erreur merci de me le faire savoir.

Et longue vie à votre site/forum qui m'a déjà sauvé plus d'une fois.
Modifié par lombredudragon (21 May 2014 - 22:42)

Salut,

Heu peut être d'une "divite aigüe", je crois que tu penses encore "tableau" pour faire joujou avec CSS

A vu de nez, sans les arrondis, il doit te suffire de 6 blocs (+-1) pour ce type de design, tu peux même te passer de float vu que ton menu à l'air d'avoir un height fixe.

<div un conteneur position relative; padding-bottom: hauteur du footer>
  <div un header></div>
  <div un contenu  position relative>
      <div menu absolute top left: 0></div>
      <div page margin-left></div>
  </div>
  <div footer position: absolute bottom: 0></div>
</div>

Bon j'ai suivi tes conseils et je suis revenu à un découpage classique entete pied page et la structure en 3 colonnes.

Avec les tables j'ai mon design ici :

Avec les div j'ai mon design la =>

le code

    

<div id="conteneur">
   
<div id="entete"><img src="/themes/images/header.png" alt=""/></div>

<div id="contenu">

<div id="menu"><img src="/themes/images/menu.png" alt=""/></div>

  <div id="page">blablablablablablablablabla</div>
      
  <div id="droit"><img src="/themes/images/droite.png" alt=""/></div>

    </div>
 
    <div id="footer"><img src="/themes/images/pied.png" alt=""/></div>

      <!-- je mettrez les attribut background-url: url() plus tard -->
    </div>

et pour le css (j'ai zappé la partie pour faire le cadre arrondi ) :

#entete{}

#conteneur{
position: relative; 
padding-bottom: 145px; /* hauteur du footer */
}
 
#footer{
position: absolute;
bottom: 0;
}
 
#contenu{
position: relative;
}
 
#menu{
position: absolute top left: 0;
}
 
#page{
margin-left: 50px;
}
 
#droit{
float:right; /* j'ai mis ca pour tester */
}

bon avec les div ca chie toujours dans le paté (ouh honte sur moi je suis mauvais )
Modifié par lombredudragon (21 May 2014 - 22:43)

position: absolute top left: 0;

Ça, ça ne risque pas de marcher.

Bon c'est tout bon, j'ai mis en place le design.

je suis bien content et j'aurais bien galéré aussi.
ca faisait trop longtemps j'avais pas fait du xhtml 1.1.

Passé au validateur, me reste quelques truc à configurer et mettre en place le menu par zone cliquable.

++ all