• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

problem mit Grundgerüst

Status
Für weitere Antworten geschlossen.
I

Icy

Neues Mitglied
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: 
<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: 
#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
 
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.
 
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
 
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
 
Moin,

Icy schrieb:
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
Zum Vergrößern anklicken....

margin:0 auto; ist besser.

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

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben