Komplexeres Seitenlayout mit css

Status
Nicht offen für weitere Antworten.
K

kasal

Erfahrenes Mitglied
Hallo Freunde!

Ich hätte mal eine Frage, und zwar wie ich das unten gemalte Layout in CSS umsetzen kann. Hab auch schon einige sversucht aber das klappt irgendwei einfach nicht, vielleicht habt ihr ja ein parr Tipps für mich wie ich sowas angehen könnte.
Danek schon im Vorraus!


lg,
kasal
 

Anhänge

  • design.PNG
    design.PNG
    2,3 KB · Aufrufe: 46
Zuletzt bearbeitet:
Ich vermute, dass dir der "Vier-Spalter" Kopfzerbrechen bereitet, und hab anhand deiner Skizze ein "Grundmodell" erstellt, das keinen Anspruch auf Vollständigkeit erhebt, da es zunächst die Grundtechnik vermitteln soll, die dahinter steckt. ;)

Falls ein Spalten-Layout mit automatischem Höhenausgleich erwünscht ist, empfehle ich dir die Faux-Columns-Technik.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#wrap {
border: 1px solid #000;
padding: 5px;
}

div#logo {
height: 100px;
border: 1px solid #000;
}

div.innerwrap { /* nimmt floatende Boxen auf */
margin: 5px 0;
}

div#login {
float: left;
width: 223px;
border: 1px solid #009f00;
}

div#news {
margin: 0 0 0 230px;
border: 1px solid #0000ff;
}

div#outerleft {
float:left;
width: 18px;
border: 1px solid #ff0000;
}

div#innerleft {
float: left;
width: 198px;
margin: 0 5px;
border: 1px solid #ff0000;
}

div#outerright {
float:right;
width: 18px;
border: 1px solid #ff0000;
}

div#content {
margin: 0 25px 0 230px;
border: 1px solid #000;
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="logo">logo</div>
     <div class="innerwrap">
          <div id="login">login</div>
          <div id="news">news</div>
     </div>
     <div class="innerwrap">
          <div id="outerleft">&nbsp;</div>
          <div id="innerleft">innerleft</div>
          <div id="outerright">&nbsp;</div>
          <div id="content">content</div>
     </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück