mal wieder div Ausrichtung mit css

jeti · 13. Januar 2008

Hallo Gemeinde!

Ich probiere mich seit kurzem in der Seitenaufteilung in css. Ich habe eine Seite geschrieben, die komplett damit arbeitet. Ich möchte jetzt innerhalb eines div-Tags nochmal zwei divs nebeneinander positionieren - dafür habe ich float:left und float:right benutzt.

Allerdings rutscht das zweite div mit float:right jetzt ziemlich nach unten. Ich habe es mal online gestellt.

Hier ist die Seite:
http://www.lotterleben.net/neu/Lotterleben.net/fotos.php

die divs sind wie flgt formatiert:

Code:

#td_fotos{
  width:650px;
  float:left;
  background-color:red;
  padding-top:50px;
  background-position:216px 0px;
  text-align:center;
  background-image:url(../gfx/polaroid.gif);
  background-repeat:no-repeat;
}
#td_film{
  padding-bottom:58px; padding-left:20px;
  background-color:yellow;
  float:right;
  width:150px;
  background-position:50px; 00px;
  text-align:left;
  background-image:url(../gfx/film.gif);
  background-repeat:repeat-y;
}

Wie kann ich das ganze formatieren, dass der Film nicht nach unten rutscht?

Maik · 13. Januar 2008

Hi,

deklariere zunächst mal für das HTML-Dokument einen entsprechenden Dokumenttyp, wie beispielsweise:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>

damit es den Browsern im "Standardsmode" übergeben wird, denn ohne jegliche Doctype-Angabe laufen die Browser im "Quirksmode", was sich besonders im IE negativ bemerkbar macht, Stichwort: mangelnde Unterstützung des CSS-Boxmodells.

Beim Verschachteln der DIVs ist dir ein Fehler unterlaufen, und so ist u.a. derzeit das DIV #td_film im DIV #td_fotos eingebunden.

Das Markup dürfte eigentlich so lauten:

Code:

<div id="outerframe">
    <div id="frame_top">
         <a href="index.php" title="zur Startseite">
         <img src="gfx/horizont.gif" border=0></a>
    </div>
    <div id="frame_menu"><a href="wegweiser.php" Title="Seiteninhalt">
         <img src="gfx/icons/wegweiser.gif" border=0></a>
    </div>
    <div id="frame_content">
         <center><h4 align="center">Fotos!</h4>
         <div id="td_fotos" >
              <a href="javascript:()">
              <img src="foto.jpg" border=0><br><br><br>&lt;click to enlarge&gt;</a>
         </div>
         <div id="td_film" >
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 vspace=30></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
              <a href="javascript:()"><img src="foto.jpg" border=0 width=60 ></a><br>
         </div>
    </div>
    <div id="frame_bottom">Du bist hier: &nbsp;&nbsp;&nbsp;home</div>
</div>

Im Stylesheet fällt auf, dass bei diversen padding-Eigenschaftswerten die Einheit "px" fehlt, und eine Diskrepanz zwischen der Breitenangabe für das DIV #frame_content und den beiden darin floatenden DIVs besteht.

Versuch es mal mit diesen Stylesheets:

general.css

Code:

#td_fotos{
  width:545px;
  float:left;
  background-color:red;
  padding-top:50px;
  background-position:216px 0px;
  text-align:center;
  background-image:url(../gfx/polaroid.gif);
  background-repeat:no-repeat;
}
#td_film{
  padding-bottom:58px;
  padding-left:20px;
  background-color:yellow;
  margin-left:545px;
  background-position:50px; 00px;
  text-align:left;
  background-image:url(../gfx/film.gif);
  background-repeat:repeat-y;
}

outerframe.css

Code:

#frame_menu{
  width:80px; margin-right: 5px; text-align:center;
  padding-left:4px; color:black; font-family: Verdana; font-size: 9pt;
  float:left;
}
#frame_content{
  padding-left:5px; padding-bottom:12px; padding-top:8px; color:black; font-family: Verdana; font-size: 9pt;
  text-align:center; float:right; width:690px;
}

Übrigens gibt es keinen Wert "inline" für die float-Eigenschaft, sondern:

left
right
none
inherit

mal wieder div Ausrichtung mit css

jeti

Grünschnabel

Maik

Neue Beiträge