Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Decalage de block de div

rk2
    18 février 2007 à 14:35:00

    Salut !

    Voila je code un tit site, en css valid et html valid :p donc voila method classique avec des div ;)

    Mon probleme est le suivant :


    Je schématise mon site ainsi :
    [------------- DIV HEADER -------------]
    [------ DIV 1 ------] [------ DIV 2 ------]

    Le probleme est que je ne sais comment le DIV 1 et le DIV 2 sont liées, si je saute des ligne sur le 1 , sa me decale tout mon div 2 :euh:

    pour pas dire m*** nous dirons : Zut ! :colere2:o_O

    le rendu est le suivant : http://s191904428.onlinehome.fr/board/site/

    Code HTML


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>-- Welcome to rk2-studio --</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    .Style1 {color: #FFFFFF}
    -->
    </style>
    </head>
    <body>
    <div id="page">
    <div id="header">
    <div id="presentation">
      <p>&nbsp;</p>
      <p class="Style1">Bienvennue sur rk2-studio !</p>
      <p class="Style1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nisl tortor, rutrum quis, condimentum sit amet, pellentesque quis, metus. Curabitur facilisis, erat fringilla placerat aliquam, nisl felis cursus magna, sed facilisis nisl leo non ligula. Donec dui. Fusce volutpat, metus id tincidunt volutpat, urna erat imperdiet metus, sed fermentum nisi libero et erat. Phasellus tempor, erat in viverra tincidunt, sapien purus hendrerit velit, ac venenatis urna justo vitae orci. Sed sed nunc non orci molestie luctus. Ut </p>
    </div>
    <div id="rss">
      <h1><u>Actualit&eacute; RSS </u></h1>
      <p>07 F&eacute;v.  Le nouveau site en ligne... <br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
        07 F&eacute;v.  Le nouveau site en ligne...<br>
      </p>
      </div>
    <div id="rss_footer">
      <p><strong>Connection &agrave; votre compte</strong></p>
    </div>
    </div>
    </div>
    </body>
    </html>



    Code CSS


    html, body {
            margin: 0px;
            padding: 0px;
            background-image:url(images/template_00.png);
            background-repeat: repeat-x;
            background-color: #003562;
    }
    #page {
            clear: both;
            width: 900px;
            overflow: hidden;
            position:relative;
            margin: 0px auto;
            background-image:url(images/template_18.png);
            margin-right: auto;
            margin-left: auto;
            display: block;
    }
    #main {
            clear: both;
            width: 580px;
            float: left;
            display:inline;
            text-align: justify;
            padding: 10px;
            margin-left: 40px;
            display: block;
    }
    #header {
            clear: both;
            background-image:url(images/template_19.png);
            background-repeat: no-repeat;
            height: 428px;
            width: 800px;
            margin-bottom: 5px;
            margin-right: auto;
            margin-left: auto;
            display: block;
    }
    #rss h1 {
            clear: both;
            text-align: right;
            margin-top: 20px;
            margin-right: 50px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            color: #FFFFFF;
            display: block;
    }
    #rss p {
            clear: both;
            text-align: left;
            margin-top: 40px;
            margin-left: 545px;
            font-family: AHelvetica, sans-serif;
            font-size: 14px;
            color: #FFFFFF;
            display: block;
    }

    #rss_footer p {
            clear: both;
            text-align: left;
            margin-top: 75px;
            margin-left: 597px;
            font-family: AHelvetica, sans-serif;
            font-size: 14px;
            color: #FFFFFF;
            display: block;
    }
    #presentation {
            clear: both;
            margin-top: 75px;
            width: 450px;
            float: left;
            display:inline;
            text-align: justify;
            padding: 10px;
            margin-left: 40px;
    }




    Voila je sais pas trop d'ou sa vient et j'ai essayer de respecter au mieu le cour du grand M@teo21 :p
    A+ les zéros ;=) et merci
    • Partager sur Facebook
    • Partager sur Twitter
    Sword
      18 février 2007 à 14:54:35

      Tu as raté ta vie.
      • Partager sur Facebook
      • Partager sur Twitter
      Bilbou
        18 février 2007 à 15:27:11

        Chu !

        Le problème vient de l'utilisation de la propriété clear: both; !

        Ne l'utilise que lorsqu'elle est vraiment utile et tout rentrer dans l'ordre ! ;)
        • Partager sur Facebook
        • Partager sur Twitter
        Fcp
          18 février 2007 à 18:23:16

          Citation : Sword

          Tu as raté ta vie.



          +10%

          Aucune raison de dire ça et si c'est une insulte elle n'est pas du tout justifiée

          • Partager sur Facebook
          • Partager sur Twitter

          [CSS] Decalage de block de div

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown