| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
mTk Gast
|
CSS - 9 Spalten Layout |
|
|
Hallo zusammen,
ich habe mal wieder - wie sollte es auch anders sein - ein Problem: Wie bekomme ich in einem "Parent"-Div ein 9-Boxen-Layout hin, nach diesem Muster:
Mir ist nach suchen im Internet klarer geworden, dass ich mit float und clear arbeiten muss, doch wie??
So sollte der HTML-Quellcode aussehen:
| Code: |
<div id="parent">
<div id="linksoben">1</div>
<div id="obenmitte">2</div>
<div id="rechtsoben">3</div>
<div id="linksseite">4</div>
<div id="mitte">5</div>
<div id="rechtsseite">6</div>
<div id="untenlinks">7</div>
<div id="untenmitte">8</div>
<div id="untenrechts">9</div>
</div>
|
Was muss ich nun in CSS notieren??
Gruß,
mTk |
|
|
|
| 05 Dez 2007 11:55 |
|
  |
Werner Homepage-Total.de Moderator

|
 |
|
|
| Code: | <style type="text/css">
#linksoben {
float: left;
}
#obenmitte {
float: left;
}
#rechtsoben {
float: left;
}
#linksseite {
float: left;
}
#mitte {
float: left;
}
#rechtsseite {
float: left;
}
#untenlinks {
float: left;
}
#untenmitte {
float: left;
}
#untenrechts {
}
</style>
</head>
<body>
<div id="parent">
<div id="linksoben">1</div>
<div id="obenmitte">2</div>
<div id="rechtsoben">3</div><br>
<div id="linksseite">4</div>
<div id="mitte">5</div>
<div id="rechtsseite">6</div><br>
<div id="untenlinks">7</div>
<div id="untenmitte">8</div>
<div id="untenrechts">9</div><br>
</div> |
|
_________________ Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 05 Dez 2007 13:31 |
|
 |
mTk Gast
|
 |
|
|
Ja, leider würde es so nicht richtig angezeigt, sondern so wie eine Treppe und der letzte DIV 100% breit.
So muss der Quelltext lauten:
| Code: |
<style type="text/css">
#parent {
border: solid 1px #000000;
}
#linksoben {
border: solid 1px #000000;
float: left;
}
#obenmitte {
border: solid 1px #000000;
float: left;
}
#rechtsoben {
border: solid 1px #000000;
float: left;
}
#linksseite {
border: solid 1px #000000;
float: left;
clear: left;
}
#mitte {
border: solid 1px #000000;
float: left;
}
#rechtsseite {
border: solid 1px #000000;
float: left;
}
#untenlinks {
border: solid 1px #000000;
float: left;
clear: left;
}
#untenmitte {
border: solid 1px #000000;
float: left;
}
#untenrechts {
border: solid 1px #000000;
float: left;
}
</style>
</head>
<body>
<div id="parent">
<div id="linksoben">1</div>
<div id="obenmitte">2</div>
<div id="rechtsoben">3</div><br>
<div id="linksseite">4</div>
<div id="mitte">5</div>
<div id="rechtsseite">6</div><br>
<div id="untenlinks">7</div>
<div id="untenmitte">8</div>
<div id="untenrechts">9</div><br>
</div> |
Doch wie bekomme ich es nun hin, dass sich die "Ecken" (Also die DIV's 1,3,7,9) genau in den Ecken rechts/links und oben/unten der parent-Divs befinden und diese Position halten, wenn der DIV vergrößert/verkleinert wird??
Dahinter würde ich gerne an allen vier Seiten einen Div (2,3,5,8) legen - wenn es möglich wäre.
Doch vielen Dank für den Ansatz,
mTk[/code] |
|
|
|
| 05 Dez 2007 16:41 |
|
 |
Werner Homepage-Total.de Moderator

|
 |
|
|
| Wäre das nicht viel einfacher mit einer Tabelle zu machen? |
_________________ Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 06 Dez 2007 19:57 |
|
 |
mTK Gast
|
 |
|
|
Ja, es wäre viel einfacher, ich mache es jetzt auch mit einer Tabelle.
Trotzdem vielen Dank,
mTk  |
|
|
|
| 11 Dez 2007 08:19 |
|
 |
|