| Autor |
Nachricht |
top
Moderator
Threadersteller
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: 
|
Verfasst So 16.11.2008 22:32
Titel Es geht einfach nicht ohne Tabellen-Layout |
  |
|
Ich hänge hier mal wieder an einer Layout-Umsetzung ohne Tabellen zu Gestaltungshilfen zu missbrauchen. 
Zur Erklärung habe ich mal eben ein Tabellen-Layout gebastelt. So soll es mal aussehen: Böse Tabelle
Beim Versuch es mit CSS ohne Tabellen umzusetzen sieht es bis jetzt so aus: DIV-Suppe
Irgendwie komme ich da nicht weiter. Vor allem wenn die Seite in der Höhe oder Breite kleiner als das Browserfenster ist machen die DIVs leider nicht mehr was ich will. Und wie ich die beiden Grundflächen für Inhalt links und rechts auf eine Höhe bringen will, ist mir auch noch nicht klar. Eine Hintergrundgrafik würde ich gerne vermeiden, da die Farbwerte bei jeder Unterseite flexibel aus einer Datenbank eingesetzt werden sollen.
Vielleicht hat jemand ja ein paar gute Tipps für mich. 
----------------------------
Edit2: Titel angepasst.
Zuletzt bearbeitet von top am Mo 02.02.2009 12:00, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
alien
Dabei seit: 06.07.2006
Ort: aus der Phantasie
Alter: -
Geschlecht:
|
Verfasst Mo 17.11.2008 00:46
Titel
|
|
|
| Code: |
<div id="hauptnavi">#Hauptnavi
</div>
<div id="kopflinks">#Kopf links
</div>
<div id="kopfrechts">#Kopf rechts
</div>
<div id="extranavi">#Extra Navi
</div>
<div id="inhaltlinks">#Inhalt links
</div>
<div id="inhaltrechts">#Inhal trechts
</div>
<div id="fusszeile">#Fusszeile
</div>
|
| Code: |
* {
margin: 0px;
padding: 0px;
}
#hauptnavi {
float:left;
width: 10%;
height: 300px;
background: orange;
}
#kopflinks {
float: left;
width: 40%;
height: 150px;
background: red;
}
#kopfrechts {
float: left;
width: 40%;
height: 150px;
background: yellow;
}
#extranavi {
float: right;
width: 10%;
height: 300px;
background: navy;
}
#inhaltlinks {
float: left;
width: 40%;
height: 150px;
background: #CC3366;
}
#inhaltrechts {
float: left;
width: 40%;
height: 150px;
background: #009966;
}
#fusszeile {
clear: both;
width: 80%;
height:auto;
background: #CCCC99;
margin-right: auto;
margin-left: auto;
} |
HTML-Ansicht
Zuletzt bearbeitet von alien am Mo 17.11.2008 00:52, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
top
Moderator
Threadersteller
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mo 17.11.2008 10:29
Titel
|
|
|
Danke schon einmal für deine Mühe.
Ich möchte allerdings den beiden äußeren Spalten links und rechts am Rand eine feste Breite zuweisen und die beiden mittleren Spalten sollen sich dann den Rest der Breite teilen.
(Das klappt bei meiner CSS-Version ja auch schon - so lange bis die Mindestbreite unterschritten wird und sich die rechte Navi über den Kopfbereich schiebt.  )
Ebenso in der Höhe: Kopf und Fuß sollen eine feste Höhe bekommen und die beiden Inhalts-Bereiche sollen den Rest der Höhe ausfüllen - bzw. von der Länge des Inhalts bestimmt werden.
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 17.11.2008 11:45
Titel
|
|
|
| top hat geschrieben: | Danke schon einmal für deine Mühe.
Ich möchte allerdings den beiden äußeren Spalten links und rechts am Rand eine feste Breite zuweisen und die beiden mittleren Spalten sollen sich dann den Rest der Breite teilen.
(Das klappt bei meiner CSS-Version ja auch schon - so lange bis die Mindestbreite unterschritten wird und sich die rechte Navi über den Kopfbereich schiebt. ) |
min-width; wäre da ratsam
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width
(ie<7): http://www.cssplay.co.uk/boxes/minwidth.html
| top hat geschrieben: | | Ebenso in der Höhe: Kopf und Fuß sollen eine feste Höhe bekommen und die beiden Inhalts-Bereiche sollen den Rest der Höhe ausfüllen - bzw. von der Länge des Inhalts bestimmt werden. |
woran hapert es am zweiteren noch?
ps. hab mir noch mal dein beispiel angesehen (css) - allerdings nur die seite. was läuft denn da nun noch nicht so, wie du es dir vorstellst?
|
|
| |
 |
|
top
Moderator
Threadersteller
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mo 17.11.2008 12:00
Titel
|
|
|
min-width habe ich auch schon verwendet und hier mit: | Code: |
html {
min-width: 760px;
height: 100%;
} |
zumindest schon mal den Firefox dazu überredet die rechte Navi nicht über den Kopfbereich zu schieben.
| pixelpapst303 hat geschrieben: | ...
woran hapert es am zweiteren noch?
ps. hab mir noch mal dein beispiel angesehen (css) - allerdings nur die seite. was läuft denn da nun noch nicht so, wie du es dir vorstellst? |
Schau dir einfach die böse Tabelle an. Genau so soll sich die Seite bei Größenänderungen verhalten.
|
|
| |
|
|
top
Moderator
Threadersteller
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst So 07.12.2008 01:05
Titel
|
|
|
Södele - ich bin endlich bin ich mal dazu gekommen an dem Problem weiter zu basteln.
Entspricht leider noch nicht ganz meinen Vorstellungen  - aber schon mal einen Schritt weiter:
div-Suppe die 2.
Diesen Trick für minwidth für ältere Internet-Explorer habe ich mir angeschaut. Ich befürchte aber, dass er mir bei meinem verschachteltem Code nicht viel helfen wird. (Vielleicht bin ich auch einfach nur zu blöd  )
Hat jemand noch eine Idee hat wie ich ohne ein böses Tabellenlayout auskommen kann? 
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 07.12.2008 01:25
Titel
|
|
|
So wie du bei der Tabelle ein blind gif einsetzt, kannst du doch auch beim tabellosen layout vorgehen.
Das Blind gif ist natürlich nicht unbedingt die sauberste Art. Aber evtl kannst du ein bestimmtes Element
welches auch sichtbar ist einfach mit der mindestbreite versehen, Logo, Fuß, irgendwas...
Edit: schon zu spät, ich sehe gerade dass machst du ja bereits.
Zuletzt bearbeitet von m am So 07.12.2008 01:27, insgesamt 1-mal bearbeitet
|
|
| |
|
|
top
Moderator
Threadersteller
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mo 02.02.2009 00:20
Titel
|
|
|
Bin heute endlich mal wieder dazu gekommen an meinem Sorgenkind zu basteln.
css5.html
Der FF3 stellt es noch am Besten dar. (Zumindest was die Unterschreitung der Mindestbreite betrifft. Der FF2 schluckt leider nicht das z-index: -1;  )
Wenn der Inhalt allerdings zu groß wird, (oder das Browserfenster nicht hoch genug ist,) will der blaue Hintergrund leider nicht mehr die volle Höhe einnehmen.
Zwar kann ich dieses mit position: fixed; für aktuelle Browser beheben, aber dann zerreist es mir die Darstellung IE6 total 
Jemand noch eine Idee wie ich das Teil ohne Tabelle umgesetzt bekomme?
Hier noch mal zur Erinnerung die gewünschte Darstellung mit einer Tabelle als Gestaltungsgrundlage: Böse Tabelle
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
Tabellen und CSS
IE 6 - Tabellen
Div Tabellen
|
|
Willkommen auf dem Portal für Mediengestalter
