28220 sujets

CSS et mise en forme, CSS3

[Résolu]La balise <div> et CSS

Voilà, je viens de faire la connaissance avec la balise <div>. Jusqu'alors j'utilisais des tableaux avec des colspan et rowspan, mais je me suis rendu compte que la balise <div> est bien plus puissante. Cependant, je ne maîtrise pas encore bien ses propriétés. J'ai quelques soucis.
J'ai un bloc, où j'ai défini une margin-top à 0px et dans ce bloc, j'ai un sous-bloc où le margin-top est défini à 10px. Alors que je m'attendais à ce que le sous-bloc soit soit légement en dessous du haut du bloc principal, mais sous mozilla, ça m'applique le margin-top au bloc principal, pas au sous bloc. Cependant ça marche sous IE.
Un autre exemple. Dans un autre bloc principal, j'ai appliqué text-align: center; tandis que dans le sous-bloc, j'ai appliqué float: left; Cependant mon image est centrée, non pas à gauche comme je pensais qu'il devrait être. Là encore je trouve ça bizarre. Il est possible qu'il faut utilisé l'attibut position, j ai pas trop compris comment il fonctionnait.

Voila le code :

<html>
   <head>
      <style type="text/css">
      <!--
         body
         {
            margin: 0px;
            padding: 0px;
            background-color: #000000;
         }
         
         div
         {
            margin: 0px;
            padding: 0px;
         }
         
         .conteneur
         {
            position: absolute;
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border: 1px #000000 solid;
            background-color: #DDDDDD;
         }
         
         .head1
         {
            //position: relative;
            width: 100%;
            height: 91px;
            //top: 0%;
            //left: 0%;
            margin-top: 0px;
            text-align: center;
            background-image: url(image/head1.gif);
            background-repeat: no-repeat;
            background-position: center;
         }
         
         .head2
         {
            //position: relative;
            width: 100%;
            height: 36px;
            //top: 0%;
            //left: 0%;
            text-align: center;
            color: #FF0000;
            background-image: url(image/head2.gif);
            background-repeat: no-repeat;
            background-position: center;
         }
         
         .logo
         {
            position: relative;
            width: 133 px;
            height: 51 px;
            top: 0px;
            left: 20px;
            float: left;
            margin-left: 30px;
            margin-top: 30px;
         }
         
         .titre
         {
            //position: absolute;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
         }
      -->
      </style>
   </head>
   <body>
      <div class="conteneur">
         <div class="head1">
            ***
            <img src="image/logo.gif" />
         </div>
         
         <div class="head2">
            <div class="titre">
               Bienvenue sur mon site
            </div>
         </div>
      </div>
   </body>
</html>


Merci pour votre aide Smile


Voici le lien pour le test :

http://avsc.guduszeit.com/test.php

P.S : J'ai pris les images sur un tuto d'alsacreations, juste pour exemple et apprendre ...
Modifié par Trunks_ (07 Dec 2005 - 16:19)
Administrateur
Trunks_ a écrit :
Voilà, je viens de faire la connaissance avec la balise <div>. Jusqu'alors j'utilisais des tableaux avec des colspan et rowspan, mais je me suis rendu compte que la balise <div> est bien plus puissante. Cependant, je ne maîtrise pas encore bien ses propriétés.

Salut,

Attention à bien comprendre que la balise <div> n'a justement aucune propriété particulière.
Elle est complètement neutre, n'apporte aucun sens spécifique (contrairement aux autres balises comme <p>, <h1>, etc.) et n'a strictement aucune puissance.

C'est une simple balise qui sert à regrouper des éléments ou à être employée s'il n'y a pas d'autres balises appropriées.

Ce qui donne le positionnement, la couleur, les dimensions, etc. ce sont les CSS et non pas la balise <div>.
Modifié par Raphael (04 Dec 2005 - 20:49)
Bonjour,

L'élément div est effectivement bien pratique, "puissant" je sais pas mais pratique pour effectuer des regroupements servant par exemple pour du graphisme, pour regrouper plusieurs éléments d'une page comme ceux d'un entête, d'un pied de page, le contenu principal. Cet élement est de type bloc et neutre, ne portant aucun sens particulier, n'étant munie d'aucune marge par défaut dans les navigateurs graphiques comme span son équivalent neutre pour les éléments en ligne.

Pour ton premier soucis je t'invite à te familiariser avec les 2 types de marges: margin et padding qui sont primmordiaux pour bien aborder les styles et le positionnement css (quelques liens, en particulier les 3 d'Openweb: http://del.icio.us/Igor/cssp).

Sinon je ne pourrais que t'inviter à baliser ton contenu avec les élément html qui sont fait pour cela comme un niveau de titre hn en remplacement de ce vilain div class="titre". Plus tu utiliseras l'ensemble d'html, plus tu auras de points d'entrée pour mettre en forme tes pages Smiley cligne .
Merci. Entre temps j'ai commencer à lire pas mal de tutaux dessus, c'est vraiment un aspect interressant. Je vais me diriger vers cette voie dorénavant.
Merci pour vos conseils.
Sujet clos
Aller à