Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 11.08.2004, 21:15
Hawklan Hawklan ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2004
Beiträge: 3
Hawklan befindet sich auf einem aufstrebenden Ast
Standard CSS Design Probleme

Also langsam habe ich von CSS echt die Schnauze voll...

Angesteckt von den überschwänglichen Beschreibungen auf dieversen "CSS Fanseiten" die hier sicher allseits bekannt sein dürften, dachte ich mir: Versuch ich also auch mal ein Design nur mit CSS.

Naja was soll ich sagen: jetzt sitze ich seit 3 Tagen an einem total billigen 08/15 Design, welches ich mit Tables in 15 Min gehabt hätte und renne von einem Problem ins nächste.

Was ich will: ein standard 760px breites und zentriertes Design.
Oben einen Header und darunter 2 Spalten: Menü und Contentbereich, die
bei wenig Content mindestens 100% Bildschirmhöhe füllen und sich bei mehr Content anpassen.

Was ich mir bisher hier aus dem Forum und von diversen anderen Seiten so angelesen hab lief schliesslich auf folgenden Code hinaus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Reisen f&uuml;r Individualisten</title>
<style type="text/css">
<!--
html {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-align: center;
	background-color: #000000;
}

div#main {
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	width: 800px;
	height: 100%;
	border: 0px none;
	background: #FDFEEE url(images/menuback.gif) repeat-y;
}

html>body #main {
	height: auto;
	min-height: 100%;
}

div#header {
	margin: 0px;
	padding: 0px;
	width: 800px;
	height: 180px;
	border: 0px none;
	background: url(images/header.jpg);
}

div#menu {
	margin: 0px;
	padding: 50px 0px 0px 5px;
	width: 120px;
	float: left;
	border: 0px none;
	background: url(images/menutop.gif) no-repeat;
}

div#content {
	margin: 0px;
	padding: 0px;
	width: 670px;
	border: 0px none;
	background: #FDFEEE;
}
html>body #content {
	margin: 0px 0px 0px 130px;
}
-->
</style>

</head>

<body>

<div id="main">

<div id="header">

</div>

<div id="menu">
Home

Konzept

Kontakt


Reisegallerie

Reiseberichte

</div>

<div id="content">
content
</div>

</div>

</body>

</html>
Das macht in IE6, Opera7 und Firefox 0.8 genau das, was ich wollte und sieht so aus: http://www.gwb-reisen.de/design.html.
Soweit so gut...

Man erinnere sich: ich habe fast 3 Tage gebraucht um soweit zu kommen und die Freude war entsprechend gross, als es endlich klappte.
Dann füge ich arglos in den MenüDIV unterhalb der Links ein Bildchen ein und WUMMS im IE fliegt wieder alles auseinander !
Er zeigt Plötzlich den Content Bereich ganz links und unterhalb des Menüs an.

Was mache ich falsch ?!
Muss ich das ganze grundsätzlich anders aufbauen oder gibt es eine Möglichkeit das Problem zu umgehen.
Bin für jede Hilfe unendlich Dankbar.


Wenn das so weitergeht häng ich nämlich meine CSS Karriere wieder an den Haken und kehre zu den guten alten Tables zurück...
Mit Zitat antworten
Sponsored Links