problem mit Grundgerüst

**Icy** · 14.04.2008 21:15

Hallo,

möchte bzw. muss eine Seite mit folgendem Grundgerüst aufbauen: klick.
Das Problem ist, dass einige Größen absolut und andere Größen relativ vorgegeben sind. Und irgendwie komme ich damit nicht klar.
Mein bisheriger Code:

index.html:

HTML-Code:

<html>
<head>
<title>Testseite</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body style="margin: 0px;">


<div id="box">

  <div id="head">
  </div>

  <div id="content">
  </div>

  <div id="navi">
  </div>

</div>


</body>
</html>

style.css:

HTML-Code:

#box {
    width: 70%;
    min-height: 500px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
}

#head {
    height: 300px;
    width: 100%;
    background-color: red;
}

#navi {
    width: 160px;
    height: 100%;
    float: right;
    background-color: blue;
}

#content {
    width: 100%;
    height: 100%;
    float: left;
    background-color: green;
}

Das Ganze sieht bis jetzt so aus: Klick

Kann mir da wer helfen?

MfG Icy

**Efchen** · 15.04.2008 08:17

Hallo!

Code:

<div id="Page">
  <h1 id="Header">Siteüberschrift</h1>
  <ul id="Menu">
    <li>bla</li>
    <li>Blubb</li>
  </ul>
  <div id="Content">
    <h2>Seitenüberschrift</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

Code:

div#Page {
  width:70%;
}
h1#Header {
  height:300px;
}
ul#Menu {
  width:160px;
  float:right;
}
div#Content {
  margin-right:160px;
}

Das müssts schon gewesen sein (ungetestet).

Gruß,
-Efchen

P.S.: Bei den in px angegebenen Elementen bitte schauen, dass die Größen auch bei Schriftvergrößerung noch passen. Wahrscheinlich ist es bessern, die Größen in "em" statt "px" anzugeben.
P.P.S.: Die Breite von 70% ist u.U. nutzerunfreundlich. Wenn man nur einen kleinen Bildschirm hat (z.B. Handy/PDA, die oft nur 200px Breite haben), ärgert man sich, wenn die Website den Platz nicht vollständig ausnutzt.

**Icy** · 16.04.2008 22:00

Hey danke, klappt wunderbar

Nun noch eine (evtl blöde) Frage:

Habe dem div "Box" (also dem kasten, in dem sich der ganze Inhalt befindet) die Werte "margin: auto;" gegeben damit die Seite zentriert ist. Im FF und Opera klappt das auch wunderbar, nur mal wieder im IE nicht.
Wie muss ich das denn für den IE anpassen?

MfG Icy

**Efchen** · 17.04.2008 07:32

Wenn Du die IDs verwendet hättest, die ich vorgegeben habe, hätt ich jetzt gewusst, welche Box Du meinst.
Wenn Du, nach meiner Namensgebung, dem div#Page ein margin:auto gibst, dann klappt es auch im IE. Wenn nicht, hast Du einen DOCTYPE gewählt, der den Browser in den Quirks Mode versetzt. Da macht der IE aber noch ganz andere schwere Fehler. Du musst einen DOCTYPE wählen, der alle Browser in den Standards Mode versetzt.
-- LANtastic :: Artikel -- DTD - Document Type Declaration - Das richtige Doctype

Gruß,
-Efchen

**koslowski** · 17.04.2008 08:07

Moin,

Zitat von Icy

Hey danke, klappt wunderbar

Nun noch eine (evtl blöde) Frage:

Habe dem div "Box" (also dem kasten, in dem sich der ganze Inhalt befindet) die Werte "margin: auto;" gegeben damit die Seite zentriert ist. Im FF und Opera klappt das auch wunderbar, nur mal wieder im IE nicht.
Wie muss ich das denn für den IE anpassen?

MfG Icy

margin:0 auto; ist besser.

Neben dem richtigen Doctype gehts beim IE auch mit text-align:center;

koslowski

Thema: problem mit Grundgerüst

LinkBack

Themen-Optionen

problem mit Grundgerüst

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Problem mit Divs

Problem bei Realisierung eines Zurück-Buttons in HTML

Problem mit border-bottom und height

Problem mit gestreckter Tabelle [Feste Höhe einer Tabelle]

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen