[résolu]Besoin d'aide pour créer squelette complex

Bonsoir,

j'aurais besoin de vos conseil pour la création d'un tableau complexe, j'ai mis en pièce jointe un modèle (créer à main levé) pour vous donner une idée de ce que je recherche à faire.



Dans un premier temps j'ai créer un tableau, la aucun soucis, mais maintenant j'aimerais le créer sans utiliser de tableau, j'ai essayer avec div mais sans succès.

Pouvez vous me guider ? m'aider ?

D'avance je vous remercie.

Jérémie
Modifié par mims1664 (29 May 2009 - 22:30)

Salut,

Il te suffit de floater toutes tes divs Voici un premier jet rapide testé uniquement sous firefox, pour donner l'idée. Il faudra bien sûr fignoler :

[b]HTML [/b]
<div id="bloc">
    
    <div id="sous-bloc-1">
        <img src="" alt="image">
        <a href="?" title="">Lien</a>
    </div>
    
    <div id="sous-bloc-2">
        <h2>Titre</h2>
        <ul>
            <li>liste</li>
            <li>liste</li>
            <li>liste</li>
        </ul>
    </div>
    
    <div id="sous-bloc-3" class="ptibloc">txt</div>
    <div id="sous-bloc-4" class="ptibloc">txt</div>
    <div id="sous-bloc-5" class="ptibloc">txt</div>
    <div id="sous-bloc-6" class="ptibloc">txt</div>
    <div id="sous-bloc-7" class="ptibloc">txt</div>
    <div id="sous-bloc-8" class="ptibloc">txt</div>
    <div id="sous-bloc-9" class="ptibloc">txt</div>
    <div id="sous-bloc-10" class="ptibloc">txt</div>
    
    <div id="sous-bloc-11">
        <p>Texte texte texte</p>
        <img src="" alt="image">
        <img src="" alt="image">
    </div>

</div>

[b]CSS[/b]
* {
margin:0;
padding:0;
}
div {
border:1px solid;
float:left;
text-align:center;
}
div#bloc {
width:620px;
border:0;
}
#sous-bloc-1,
#sous-bloc-2 {
width:100px;
height:100px
}
#sous-bloc-2 {
list-style-position:inside;
}
#sous-bloc-11 {
width:414px;
height:48px;
}
.ptibloc {
width:50px;
height:50px
}

Modifié par marcv (29 May 2009 - 21:37)

Ha oui ! effectivement mais j'avais tout fait en flottant ! mais comme toujours il me manque les petites astuces qui font que ca tien en place !

Merci je vais pouvoir m'amuser avec !



Par contre dans l'hypothèse ou je démultiplirais cette mise en page avec une boucle comment faire pour ne pas que le reste du designe soit décalé ! car ca chevauche mon footer qui ne s'étend pas !
C'est une propriété de ce bloc ou de mon footer ?
Modifié par mims1664 (29 May 2009 - 22:02)

Salut,

lire cette astuce.

Et d'une manière générale elle fonctionne très bien la recherche.


Une petite remarque au passage :

* {
margin:0;
padding:0;
}

est pratique pour un test rapide mais est déconseillé dans la vraie vie : lire La technique du Reset CSS.

Oui c'est exacte ça fonctionne bien.

Merci pour le tuyaux et la lecture.

Je passe en résolut le topic.

Merci