Hallo!
Ich bin mal wieder dabei ne Website zu erstellen.
Nundenn da man sich ja auch entwickeln soll, wollte ich diesmal ein Design ohne Tabellen durch reines CSS erstellen. Habe das nun nach dem "Tutorial" von SELFHMTL versucht.
NACHTRAG: zu sehen gibbet das ganze hier (damit dürfte dein Beitrag wegfallen, dkdenz ?!)
Noch ein Nachtrag:
Im IE vergrößern sich die divs mit dem Text (je mehr Text je größer der div). Im Firefox allerdings geht die Schrift dann "aus dem dic heraus". Hilfe auch hier bitte!
1. Problem:
Der Footer ist ein ganz kleines Stückchen versetzt zu dem Rest des Layouts. Woran liegt das?
2. Problem:
Wenn ich nun Inhalt einfüge, mache ich das wieder über nen iFrame im #content oder wie, weil ich ja den Inhalt des #content dann über Links ändern will.
Code:
1. CSS:
2. HTML:
P.S. Nen Browsertest wäre nett, habs bisher nur mit FF und IE getestet.
Ich bin mal wieder dabei ne Website zu erstellen.
Nundenn da man sich ja auch entwickeln soll, wollte ich diesmal ein Design ohne Tabellen durch reines CSS erstellen. Habe das nun nach dem "Tutorial" von SELFHMTL versucht.
NACHTRAG: zu sehen gibbet das ganze hier (damit dürfte dein Beitrag wegfallen, dkdenz ?!)
Noch ein Nachtrag:
Im IE vergrößern sich die divs mit dem Text (je mehr Text je größer der div). Im Firefox allerdings geht die Schrift dann "aus dem dic heraus". Hilfe auch hier bitte!
1. Problem:
Der Footer ist ein ganz kleines Stückchen versetzt zu dem Rest des Layouts. Woran liegt das?
2. Problem:
Wenn ich nun Inhalt einfüge, mache ich das wieder über nen iFrame im #content oder wie, weil ich ja den Inhalt des #content dann über Links ändern will.
Code:
1. CSS:
Code:
/* Angaben für alle guten Browser */
html, body {
font-family: "Footlight MT Light", Arial, Helvetica, sans-serif;
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow: hidden;
}
#head {
border: 1px solid black;
background: #FF00FF;
margin: auto;
margin-top: 20px;
height: 20%;
text-align:center;
width: 80%;
}
#content {
border: 1px solid black;
background:#33FF00;
text-align:center;
width: 80%;
margin: 3px auto;
height: 57%;
padding-bottom: 3em;
}
#footer {
background: silver;
border: 1px solid black;
position: fixed;
bottom: 0px;
margin: 0px 10% 2px 10%;
text-align: center;
height:10%;
width: 80%;
}
/* Angaben nur für den Internet Explorer */
* html, * html body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
* html #content {
padding:0;
height:57%;
overflow:auto;
}
* html #footer {
background:#efefef;
height:10%;
text-align:center;
padding-top:1%;
}2. HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>..:: Nik Lasson's Base ::..</title>
<link href="nik.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="head"> test </div>
<div id="content"> test </div>
<div id="footer"> test2 </div>
</body>
</html>Danke
P.S. Nen Browsertest wäre nett, habs bisher nur mit FF und IE getestet.
Zuletzt bearbeitet:
