php - Bagground mangler med div - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html php css

Bruger #16662 @ 01.09.11 13:03

Heej alle

Jeg har bakset med noget css og noget div, og nu har jeg også fået det til at virke.
MEN nu er min bagground begyndt at fucke

HTML kode

 echo "<div class=\"top\"><b>News</b></div>";
 echo "<div class=\"info\">";
 $query = mysql_query("SELECT * FROM news ORDER BY id");
 if(mysql_num_rows($query)) {
     while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) {
         if($i % 2)  {
             $class = "right";
         } else {
                $class = "left";
         }
         $i++;
         ?>
         <div class="news_margin">
             <div style="float: <?php echo $class; ?> ;width: 49%;">
                 <div class='news_top'>
                     <a href='news.php?news_id=<?php echo $row['id']; ?>'><?php echo $row['news']; ?></a>
                 </div>
                 <?php
                 if(strlen(strip_tags($row['message'])) > 100) {
                     echo "<div class='news_message'><div class='news_message_margin'>".substr($row['message'], 0, 100)." ...</div></div>";
                 } else {
                     echo "<div class='news_message'><div class='news_message_margin'>".substr($row['message'], 0, 100)."</div></div>";
                 }
                 ?>
             <br>
             </div>
         </div>
         <?php
     }
 }
 echo "</div>";

Og her er min css:

CSS kode

 .top {
     background: #202121;
     color: #ffffff;
     border-bottom: 1px solid #000;
     padding: 8px;
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
     -webkit-border-top-left-radius: 0.5em;
     -webkit-border-top-right-radius: 0.5em;
     -moz-border-radius-topleft: 0.5em;
     -moz-border-radius-topright: 0.5em;
 }
 .info {
     background: #dcdbdc;
     color: #000000;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #bbb;
     padding: 6px;
     font-size: 12px;
 }
 .news_margin {
     margin-left: 10px;
     margin-right: 10px;
     margin-top: 10px;
 }
 .news_top {
     background: #f5f5f5;
     padding: 0;
     padding-left: 10px;
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
     -webkit-border-top-left-radius: 0.5em;
     -webkit-border-top-right-radius: 0.5em;
     -moz-border-radius-topleft: 0.5em;
     -moz-border-radius-topright: 0.5em;
     font-size: 24px;
     font-weight: bold;
 }
 .news_message {
     background: #FFFFFF;
     padding-left: 10px;
     border-bottom-left-radius: 0.5em;
     border-bottom-right-radius: 0.5em;
     -webkit-border-bottom-left-radius: 0.5em;
     -webkit-border-bottom-right-radius: 0.5em;
     -moz-border-radius-bottomleft: 0.5em;
     -moz-border-radius-bottomright: 0.5em;
 }
 .news_message_margin {
     padding-top: 10px;
     padding-bottom: 10px;
 }

Og det kommer til at se sådan her ud. Link

Nogen som kan hjælpe mig?

Indlæg senest redigeret d. 01.09.2011 13:10 af Bruger #16662

8 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 01.09.11 13:31

4.283

boller din baggrund? det er skidt...

Søg enten på clearfix eller indsæt en div (gerne med en mellemrums entity) lige efter det sidste float element. Denne div skal have css:

Kode

clear: both; line-height: 0px;font-size:0px;

Til en anden gang, så hjælper det os andre utroligt meget at du fortæller os hvad du gerne vil opnå, i stedet for at vi skal gætte os til det...

Indlæg senest redigeret d. 01.09.2011 13:33 af Bruger #10216

Bruger #16622 @ 01.09.11 13:38

Hej Mathias,

Du mangler blot en clear-regel...

HTML kode

 echo "<div class=\"top\"><b>News</b></div>";
  echo "<div class=\"info\">";
  $query = mysql_query("SELECT * FROM news ORDER BY id");
  if(mysql_num_rows($query)) {
      while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) {
          if($i % 2)  {
              $class = "right";
          } else {
                 $class = "left";
          }
          $i++;
          ?>
          <div class="news_margin">
              <div style="float: <?php echo $class; ?> ;width: 49%;">
                  <div class='news_top'>
                      <a href='news.php?news_id=<?php echo $row['id']; ?>'><?php echo $row['news']; ?></a>
                  </div>
                  <?php
                  if(strlen(strip_tags($row['message'])) > 100) {
                      echo "<div class='news_message'><div class='news_message_margin'>".substr($row['message'], 0, 100)." ...</div></div>";
                  } else {
                      echo "<div class='news_message'><div class='news_message_margin'>".substr($row['message'], 0, 100)."</div></div>";
                  }
                  ?>
              <br>
              </div>
          </div>
          <div class="clear"></div>
          <?php
      }
  }
  echo "</div>";

Og din css til:

CSS kode

 .top {
      background: #202121;
      color: #ffffff;
      border-bottom: 1px solid #000;
      padding: 8px;
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
      -webkit-border-top-left-radius: 0.5em;
      -webkit-border-top-right-radius: 0.5em;
      -moz-border-radius-topleft: 0.5em;
      -moz-border-radius-topright: 0.5em;
  }
  .info {
      background: #dcdbdc;
      color: #000000;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #bbb;
      padding: 6px;
      font-size: 12px;
  }
  .news_margin {
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 10px;
  }
  .news_top {
      background: #f5f5f5;
      padding: 0;
      padding-left: 10px;
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
      -webkit-border-top-left-radius: 0.5em;
      -webkit-border-top-right-radius: 0.5em;
      -moz-border-radius-topleft: 0.5em;
      -moz-border-radius-topright: 0.5em;
      font-size: 24px;
      font-weight: bold;
  }
  .news_message {
      background: #FFFFFF;
      padding-left: 10px;
      border-bottom-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      -webkit-border-bottom-left-radius: 0.5em;
      -webkit-border-bottom-right-radius: 0.5em;
      -moz-border-radius-bottomleft: 0.5em;
      -moz-border-radius-bottomright: 0.5em;
  }
  .news_message_margin {
      padding-top: 10px;
      padding-bottom: 10px;
  }
 
 .clear {
     clear: both;
 }

Bruger #15663 @ 01.09.11 13:55

415

Det er fordi der ikke er plads. Prøv at ændre ændre bredden med nogle px.

Bruger #16622 @ 01.09.11 13:57

Ja, det ser noget underligt ud...

Hvis vi tager udgangspunkt i den kode du har lagt på jsFiddle, så prøv at ret den til:

HTML kode

 &nbsp;&nbsp;Offlines > <b>News</b><br><br>
 <div class="top"><b>News</b></div>
 <div class="info">
     <div class="news_margin">
          <div style="float: left ;width: 49%;">
                 <div class='news_top'>
                     <a href='news.php?news_id=1'>Test 1</a>
                 </div>
                 <div class='news_message'>
                     <div class='news_message_margin'>asldkjasd jasdl jasl asdko ajsdk jasdjas dlasd awqd 01i2ed12e1d2kodj12d1d oijd j1d j12d1 1d?1u d12id u10d98 12d 1do1jdx1idu1+1d 12+12?12ed 1d1 d1d1e 12e12e12e12e1qe d1ed dd1 d1 d12d 1wd1i2dj12 e12e12 e 12e 12e 12 asldkjasd jasdl jasl asdko ajsdk jasdjas dlasd awqd 01i2ed12e1d2kodj12d1d oijd j1d j12d1 1d?1u d12id u10d98 12d 1do1jdx1idu1+1d 12+12?12ed 1d1 d1d1e 12e12e12e12e1qe d1ed dd1 d1 d12d 1wd1i2dj12 e12e12 e 12e 12e 12</div></div>
             <br>
             </div>
         </div>
     <div class="news_margin">
          <div style="float: right ;width: 49%;">
                 <div class='news_top'>
                     <a href='news.php?news_id=1'>Test 2</a>
                 </div>
                 <div class='news_message'>
                     <div class='news_message_margin'>asldkjasd jasdl jasl asdko ajsdk jasdjas dlasd awqd 01i2ed12e1d2kodj12d1d oijd j1d j12d1 1d?1u d12id u10d98 12d 1do1jdx1idu1+1d 12+12?12ed 1d1 d1d1e 12e12e12e12e1qe d1ed dd1 d1 d12d 1wd1i2dj12 e12e12 e 12e 12e 12 asldkjasd jasdl jasl asdko ajsdk jasdjas dlasd awqd 01i2ed12e1d2kodj12d1d oijd j1d j12d1 1d?1u d12id u10d98 12d 1do1jdx1idu1+1d 12+12?12ed 1d1 d1d1e 12e12e12e12e1qe d1ed dd1 d1 d12d 1wd1i2dj12 e12e12 e 12e 12e 12</div></div>
             <br>
             </div>
         </div>
     <div class="clear"></div>
 </div>

Og css´en til:

CSS kode

 .top {
     background: #202121;
     color: #ffffff;
     border-bottom: 1px solid #000;
     padding: 8px;
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
     -webkit-border-top-left-radius: 0.5em;
     -webkit-border-top-right-radius: 0.5em;
     -moz-border-radius-topleft: 0.5em;
     -moz-border-radius-topright: 0.5em;
 }
 .info {
     background: #dcdbdc;
     color: #000000;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #bbb;
     padding: 6px;
     font-size: 12px;
 }
 .news_margin {
     margin-left: 10px;
     margin-right: 10px;
     margin-top: 10px;
 }
 .news_top {
     background: #f5f5f5;
     padding: 0;
     padding-left: 10px;
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
     -webkit-border-top-left-radius: 0.5em;
     -webkit-border-top-right-radius: 0.5em;
     -moz-border-radius-topleft: 0.5em;
     -moz-border-radius-topright: 0.5em;
     font-size: 24px;
     font-weight: bold;
 }
 .news_message {
     background: #FFFFFF;
     padding-left: 10px;
     border-bottom-left-radius: 0.5em;
     border-bottom-right-radius: 0.5em;
     -webkit-border-bottom-left-radius: 0.5em;
     -webkit-border-bottom-right-radius: 0.5em;
     -moz-border-radius-bottomleft: 0.5em;
     -moz-border-radius-bottomright: 0.5em;
 }
 .news_message_margin {
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
 .clear {
     clear: both;
 }

Det burde virke.

Bruger #16662 @ 01.09.11 13:35

Det hjælper desværre ikke

Og jeg vil gerne have min baggrund frem igen. Det har jeg da også sagt

Indlæg senest redigeret d. 01.09.2011 13:38 af Bruger #16662

Bruger #15663 @ 01.09.11 13:44

415

Hej Mathias.

En god ide når du udvikler noget er altid at kode alt HTML og CSS op, med en masse dummy tekst hardcoded.

Så kan du bagefter begynder at koble dit serverscript på og slette dummy tekst og erstatte det.

Det er blot for at gøre det nemmere for dig selv.

Bruger #16662 @ 01.09.11 13:49

@David Andersen

Se her. Det ser helt mærkeligt ud

Bruger #16662 @ 01.09.11 14:12

Jeg fik det fixed

Havde kommet <div class="clear"></div> ind i while

Mange tak alle.

Indlæg senest redigeret d. 01.09.2011 14:18 af Bruger #16662

Bagground mangler med div

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler