CSS - 9 Spalten Layout


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
mTk
Gast

BeitragCSS - 9 Spalten Layout Antworten mit Zitat

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:

Code:

1|2|3
4|5|6
7|8|9


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

Beitrag Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
mTk
Gast

Beitrag Antworten mit Zitat

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

Beitrag Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
mTK
Gast

Beitrag Antworten mit Zitat

Ja, es wäre viel einfacher, ich mache es jetzt auch mit einer Tabelle.

Trotzdem vielen Dank,
mTk Very Happy
11 Dez 2007 08:19
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge Frage zu banalem Css Layout CSS 1 newbe 06 Mai 2010 13:31 Letzten Beitrag anzeigen
Keine neuen Beiträge MySQL - In zwei Spalten suchen PHP / MySQL 2 Werner 02 Dez 2008 17:33 Letzten Beitrag anzeigen
Keine neuen Beiträge Frage: PHP-Layout & MySQL = Neues... PHP / MySQL 5 *~Seidenschnabel~* 19 Jan 2008 22:33 Letzten Beitrag anzeigen
Keine neuen Beiträge Keine Grafik beim Layout verwenden Grafik- & Webdesign 3 Vita 15 Jun 2006 14:22 Letzten Beitrag anzeigen