28172 sujets

CSS et mise en forme, CSS3

Perdu dans mon CSS

Bonjour à tous,

j'ai fait de mon max pour avancer et mettre en place dans mon css mais la vraiment je suis pommé.
Je n'arrive plus a mettre en forme ma page web.
http://dreadstock.open-web.fr/realisation.html

je m'emmêle les pinceaux avec les float left / Right, Les positions obsolutes / Relative.

M'a structure est la suivante :

<div container>
<div header>
<div logo>
<div menu>
<div contenu_haut> avec mon element à gauche et mon element flash à droite
<div contenu_bas> avec mon image a gauche et mon javascript mooflow
<div/ container>

Je n'arrive pas a aligner sur une largeur de 1080 px 2 élements et en dessous 2 autres éléments en dessous.

help me please !
Modifié par dreadstock (11 Mar 2009 - 18:07)
Administrateur
Bonjour,

tu peux déjà oublier le positionnement relatif et absolu ainsi que z-index sur tes 4 blocs principaux et leurs 2 conteneurs haut et bas.
En haut ça me semble sur la bonne voie (simplement si tu veux appliquer un fond sur le conteneur, ça va pas fonctionner tel quel parce que ses 2 enfants sont sortis du flux ... vu qu'ils sont flottants. Faudra une bidouille enfin technique de "clearing floats")
En bas tu peux faire comme en haut si tu inverses #buyimg et ton animation dans le code HTML.
Un 
clear: both;
sur les conteneurs haut et bas aidera à ce qu'aucun contenu ne remonte "dans" le moindre interstice laissé libre dans les blocs flottants.
Merci ,

a écrit :
tu peux déjà oublier le positionnement relatif et absolu ainsi que z-index sur tes 4 blocs principaux et leurs 2 conteneurs haut et bas.


Ca veut dire que je dois supprimer les div conteneur haut et bas ?
Concrètement, dois je faire faire :

4 blocks :
- un pour le header
- un pour mon animation flash et mon élément left
- et un pour mon mooflow et mon image
- un block pour mon footer


ou dois-je englober ces 4 blocks dans une div Container

Ou autre

voir image référence


merci upload/17281-Exemple.jpg
Bon je n'ai pas trop suivie mais je vais essayer d'etre concis.
Tu dois avant tou bien structurer ta page et ca devrais resembler à cela


<!-- début du conteneur principal-->
<div id="main_content">
    
    <!-- début header -->
    <div id="header">
        <!-- ICI LE CONTENU DE TON HEADER -->
    </div>
    <!-- fin header -->

    <!-- début du conteneur haut -->
    <div class="content">

        <!-- debut du contenu de gauche -->
        <div class="content_left">
            <!-- ICI LE CONTENU DE GAUCHE -->
        </div>
        <!-- fin du contenu de gauche -->

        <!-- debut du contenu de droite -->
        <div class="content_right">
            <!-- ICI LE CONTENU DE DROITE -->
        </div>
        <!-- fin du contenu de gauche -->
        
        <br clear="all" />

    </div>
    <!-- fin du conteneur haut-->


    <!-- début du conteneur bas-->
    <div class="content">

        <!-- debut du contenu de gauche -->
        <div class="content_left">
            <!-- ICI LE CONTENU DE GAUCHE -->
        </div>
        <!-- fin du contenu de gauche -->

        <!-- debut du contenu de droite -->
        <div class="content_right">
            <!-- ICI LE CONTENU DE DROITE -->
        </div>
        <!-- fin du contenu de gauche -->

        <br clear="all" />

    </div>
    <!-- fin du conteneur bas-->

    
    
    <!-- début footer-->
    <div id="footer">
        <!-- ICI LE CONTENU DE TON FOOTER -->
    </div>
    <!-- fin footer -->

</div>
<!-- fin du conteneur principal-->


Il est bien evident que dans ta <div class="content"> les elements <div class="content_left"> float à gauche et que tes elements <div class="content_right"> float à droite.
Le <br clear="all" /> annule l'effet des float afin de repartir sur une nouvelle base.

Il est très important de faire attention à l'imbrication de tes div ainsi de bien créer des zone distincte ce qui te facilitera la tache.

Lla structure que je t'ai envoyer me semble convenir au screenshot que tu as joint dans ton message.

En espérant que ça t'aidera. Bon courage
POUR INFO :

en XHTML / CSS 1.0 strict , il n’est plus possible d’utiliser le tag :

<br clear="all" />

Ce tag etyait bien pratique notamment pour faire un retour a la ligne efficace, notamment après une image flottante.

Pour remplacer ce tag tout en restant valide, vous pouvez faire :

<br style="clear: both;" />

Ce qui est valide mais pas tres propre car il vaut mieux mettre le style . . . dans la feuille de styles CSS.

Ce qui donnera, dans la page web :

<br class="clearall" />

et la feuille de styles CSS :

.clearall { clear: both; }
voila, vous avez maintenant votre retour a la ligne en béton, tout en restant valide XHTML / CSS 1.0 strict [cligne]
Sujet clos
Aller à