nntp2http.com
Posting
Suche
Optionen
Hilfe & Kontakt

CSS Webseiten Layout

Von: Peter Cantburry (pcantburry@gmail.com) [Profil]
Datum: 12.10.2007 12:11
Message-ID: <1192183900.440877.185460@i13g2000prf.googlegroups.com>
Newsgroup: de.comm.infosystems.www.authoring.misc
Hallo zusammen

Ich habe wieder einmal entschieden, dass mein bisheriges Webseite-
Layout, welches auf Tabellen aufbaut scheisse ist. Das weiss ich zwar
eigentlich schon lange, aber immer wenn ich auf ein CSS-Layout
wechseln will stosse ich auf Probleme (meistens ist der IE schuld).
Dann entscheide ich mich dann doch mein Tabellen-Layout stehen zu
lassen. Dann stosse ich da wieder auf Probleme und versuche wieder
etwas mit CSS. Inzwischen habe ich eine schöne table-css-suppe
erzeugt, damit ich die Probleme mit dem IE einfach umgehen kann. Dafür
ist der Code einfach unübersichtlich und kleinste Änderungen sind
schwierig zu integrieren. (So, aber über table/css-Lösungen möchte ich
jetzt gar nicht diskutieren)

Nun zu meinem Problem. Ich habe jetzt eine komplett neue Konstruktion
aufgebaut, die nur auf CSS basiert. Jetzt habe ich aber wieder zwei
Probleme.

1. Wenn der Inhalt im Div "Contents" nur einige Zeilen hat, wird die
ganze Webseite viel zu klein angezeigt. Das könnte ich dann mit min-
heigt lösen, aber der IE interperetiert das ja leider nicht. Wie
könnte ich sonst noch eine minimal-Höhe definieren?

2. Wenn der Inhalt im Div "Contents" zu gross ist (also beispielsweise
Wörter, die länger als eine Zeile lang sind oder (der
wahrscheindlichere Fall) Bilder, die zu weit nach rechts gehen) möchte
ich einfach, dass der Inhalt über das Div zum rechten Rand
"hinausfliesst". Das versuchte ich mit overflow: visible; zu lösen.
Der Firefox hat das wiedermal super geschluckt, nur der IE zeigt dann
das DIV "contents" einfach UNTER dem DIV "menu". Das will ich aber
nicht :-). Wie könnte man dieses Problem lösen??

PS: Die Farben spielen keine Rollen, am Schluss wird sowieso alles
weiss sein.

So, hier ist noch der Code:

...
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}

#container
{
margin: 1em auto;
width: 950px;
text-align: left;
background-color: red;
border: 1px solid black;
}
#header
{
height: 70px;
background-color: fuchsia;
}

#contents
{
float: left;
width: 618px;
background-color: yellow;
overflow: visible;
}

#menu
{
margin-right: 10px;
margin-left: 5px;
width: 310px;
height: 200px;
background-color: aqua;
float: left;
}

#footer
{
clear: both;
height: 20px;
background-color: lime;
}

</style>
</head>

<body>
<div id="container">
<div id="header"> Header </div>
<div id="menu">
Menüüü
</div>
<div id="contents">
Für Problem 1 hier ganz wenig Text reintun.
Für Problem 2 hier ein ganz langes Wort reintun.
</div>
<div id="footer">Fusszeile</div>
</div>
</body>
</html>
[ Auf dieses Posting antworten ]

Antworten