Thomas E: Fehlersuche

Hi! Ich versuche mit CSS ein dreispaltiges Layout zu realisieren. Ich hab jetzt alles nebensächliche im Code entfernt und mich an die Vorgaben von selfhtml gehalten, aber die <div>-Bereiche rightBorder und leftBorder sind immer am linken Rand und centerContainer (mittlere Spalte) hat zwar die richtigen Seitenabstände aber setzt sich unter die beiden anderen div's (anstatt zwischen sie zu gehen).

<html>
<head>
<link rel="stylesheet" type="text/css" href="structure.css" />
<link rel="stylesheet" type="text/css" href="design_default.css" />
</head>
<body>
<div id="leftBorder"><p>lRand</p></div>
<div id="rightBorder"><p>rRand</p></div>
<div id="centerContainer"><p>mitte, Inhalt</p></div>
</body>
</html>

(design_default.css legt nur für alle Container Rahmen fest, damit ich sehe wie die Bereiche sich verhalten)

div#leftBorder {
width: 10px;
float: left;
margin:0;
padding:0;
}
div#rightBorder {
width: 10px;
float: rigth;
margin:0;
padding:0;
}
div#centerContainer {
margin: 0 23px 0 23px;
}

Vorher hatte ich anstatt <html>:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Für jede Hilfe bin ich dankbar.

  1. »»

    float: rigth;

    Hallo Thomas E.,

    steht das so im css oder hast Du dich nur beim Posten veertippt?

    Best wishes, imho_tep

    --
    Bleibe im Lande und wehre dich täglich!
  2. Hallo,

    <div>-Bereiche rightBorder und leftBorder sind immer am linken Rand und centerContainer (mittlere Spalte)

    Nur als Hinweis: IDs und Klassennamen sollten den Zweck eines Elements wieder geben, nicht die derzeit gewünsche Darstellung.

    Vorher hatte ich anstatt <html>:

    Ein Doctype ist für gutes Webdesign unerlässlich: DOCTYPE-Switch und seine Auswirkungen. Webseiten sollten mindestens im Almost Standards Mode arbeiten, idealerweise im Full Standards Mode, aber nie im Quirksmode!

    <?xml version="1.0" encoding="UTF-8" ?>

    Wenn du UTF-8 als Kodierung verwendets benötigst du die XML-Deklaration nicht. Entferne nur sie, denn sie versetzt IE 6 in den Quirksmode.

    Wichtig ist aber auf jeden Fall, dass du zusätzlich die Meta-Angabe mit der Kodierung angibst (und zwar als erstes Kind des head-Elements!):
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> (HTML)
    bzw. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (XHTML)

    Gruß

  3. Hi Thomas E,

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="structure.css" />
    <link rel="stylesheet" type="text/css" href="design_default.css" />
    </head>
    <body>
    <div id="leftBorder"><p>lRand</p></div>
    <div id="rightBorder"><p>rRand</p></div>
    <div id="centerContainer"><p>mitte, Inhalt</p></div>
    </body>
    </html>

    (design_default.css legt nur für alle Container Rahmen fest, damit ich sehe wie die Bereiche sich verhalten)

    div#leftBorder {
    width: 10px;
    float: left;
    margin:0;
    padding:0;
    }
    div#rightBorder {
    width: 10px;
    float: rigth;
    margin:0;
    padding:0;
    }
    div#centerContainer {
    margin: 0 23px 0 23px;
    }

    Da ist jetzt gar kein Doctype drin?

    Vorher hatte ich anstatt <html>:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    Bei Html muss hier:
    <link rel="stylesheet" type="text/css" href="structure.css" />

    das "/" vor dem > weg. Also am Ende immer:
    <link rel="stylesheet" type="text/css" href="structure.css" >
                           Also am Ende immer so:               ^

    Dann ist der Validator auch zufrieden. Dürfte dein Problem aber immer noch nicht lösen *g*. Aber wenigstens ein Fehler weniger :-)

    Viele Grüsse

    gary