| Autor |
Nachricht |
OutBlack
Threadersteller
Dabei seit: 24.03.2006
Ort: Köln
Alter: 32
Geschlecht: 
|
Verfasst Mi 04.04.2007 21:08
Titel [CSS] 100%-table lässt sich nicht auf div begrenzen |
  |
|
Hallo Zusammen,
der Titel hört sich ein wahrscheinlich ein wenig konfus an. Ich versuche es so einfach wie möglich zu erklären:
Ich habe auf meiner seite zwei DIV-Container, beide nach links gefloatet. Der linke (sidebar) hat eine feste Breite von 200px, der rechte (main) soll den Rest des Fensters vereinnahmen. In diesen rechten Container kommt eine Tabelle, die den gesamten Container ausfüllen soll. Dazu der Code:
| Code: |
<body>
<div id="sidebar">Sidebar-Inhalt</div>
<div id="main">
<table>
<tr>
<td>Zelle 1</td>
</tr>
<tr>
<td>Zelle 2</td>
</tr>
</table>
</div>
</body>
|
Die Stylesheets dazu:
| Code: |
#sidebar, #main {
float: left;
}
#sidebar {
width: 200px;
}
#main table {
width: 100%;
}
|
Doch was dabei rauskommt entspricht nicht wirklich dem, was ich erhofft hatte. Denn bei mir schiebt sich das main-div unter das sidebar-div:
So soll es sein:
Das kommt raus:
Hat jemand vielleicht schon mal das gleiche Problem gehabt oder kann mir sonst irgendwie weiterhelfen?
Vielen Dank im Voraus
OutBlack
|
|
| |
  |
 |
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 05.04.2007 00:48
Titel
|
|
|
Die Table vergrößert Dir das #main-Div auf
100% Breite und hat keinen Platz mehr zum
floaten. Gibt dem #main mal eine width dann
geht das.
|
|
| |
|
|
|
Anzeige
|
|
|
OutBlack
Threadersteller
Dabei seit: 24.03.2006
Ort: Köln
Alter: 32
Geschlecht:
|
Verfasst Do 05.04.2007 00:56
Titel
|
|
|
Aber wie kann ich das denn realisieren ohne #main eine feste breite zu geben?
Denn eigentlich soll das ganze liquid sein.
|
|
| |
|
|
MichelB
Dabei seit: 20.08.2006
Ort: Essen
Alter: 37
Geschlecht:
|
Verfasst Do 05.04.2007 01:28
Titel
|
|
|
Versuch mal, #main keine Breite zuzuweisen, dafür aber ein margin-left: breite #sidebar.
So aus’m Kopf heraus müsste das funktionieren.
Wenn's nicht klappt: http://alistapart.com/articles/negativemargins
|
|
| |
|
|
OutBlack
Threadersteller
Dabei seit: 24.03.2006
Ort: Köln
Alter: 32
Geschlecht:
|
Verfasst Do 05.04.2007 03:12
Titel
|
|
|
 Hey echt klasse MichelB!
Das war genau das was ich gesucht habe, und nach einigem rumprobieren hat es dann auch geklappt.
Da wär ich echt im Leben nicht drauf gekommen, obwohl ich alistapart.com natürlich kenne.
Echt spitze, nochmals vielen Dank!
Für alle die es noch gebrauchen können, werde ich versuche es auch noch mal auf Deutsch halbwegs verständlich zu erklären.
Tutorial:
1. Du hast ungefähr das gleiche Problem wie ich (s.o.) und dein Code sieht in etwa so aus:
HTML:
| Code: |
<div id="header">Header-Inhalt</div>
<div id="sidebar">
<p>Sidebar-Inhalt</p>
</div>
<div id="container">
<table><tr><td>Tabellen-Inhalt</td></tr></table>
</div>
<div id="footer">Footer-Inhalt</div>
|
CSS:
| Code: |
#sidebar {
float:left; /* float:left - float:left oder float:left - float:right */
width: 100px; /* UNBEDINGT Feste Größe */
}
#container {
float:left;
}
#container table {
width: 100%;
}
#footer {
clear: both; /* UNBEDINGT float wieder aufheben */
}
|
2. Der HTML-Code wird um ein #content-div erweitert. Und dann passiert das entscheidende: Das #container-div bekommt einen äußeren linken Rand von -100px und das neue #content-div einen von 100px.
HTML:
| Code: |
<div id="header">Header-Inhalt</div>
<div id="sidebar">
<p>Sidebar-Inhalt</p>
</div>
<div id="container">
<div id="content"> <!-- UNBEDINGT #content-div einfügen --!>
<table><tr><td>Tabellen-Inhalt</td></tr></table>
</div>
</div>
<div id="footer">Footer-Inhalt</div>
|
CSS:
| Code: |
#sidebar {
float:left;
width: 100px;
}
#container {
float:left;
margin-left: -100px; /* UNBEDINGT margin-left auf -100px setzen */
}
#content { /* UNBEDINGT #content-div einfügen */
margin-left: 100px; /* UNBEDINGT margin-left auf 100px setzen */
}
#container table {
width: 100%;
}
#footer {
clear: both;
}
|
3. Fertig. Natürlich kann das ganze auch mit float:right gemacht werden, dafür müssen einfach nur die floats und die margins auf right geändert werden.
Gruß
OutBlack
Zuletzt bearbeitet von OutBlack am Do 05.04.2007 03:13, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
drag von mc begrenzen
Größe einer Selectbox begrenzen?
position:fixed div Scrollbereich begrenzen
<table> formatieren mit css
Table Drag & Drop
Jommla in Table-Layout
|
|
Willkommen auf dem Portal für Mediengestalter
