Hallo,
ich habe zwar schon einige kleinere Webseiten erstellt mit
css und HTML Vorlagen, aber bei diesem Script stehe ich auf dem Schlauch.
Problem liegt darin, dass ich in Sachen CSS noch Neuling bin.
Ich habe ein Layout das mit Float Objekten ausgestattet ist.
Vom Prinzip her habe ich das schon verstanden, aber ich habe erhelblich Probleme die Suparts für das Menü und den Content zu setzten.
Könnte mir bitte jemand behilflich sein?
HTML-Code:
HTML {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FONT-SIZE: 76%;
BACKGROUND: url(clown.jpg) red no-repeat -18px 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
FONT-FAMILY: trebuchet ms, tahoma, verdana, arial, sans-serif; HEIGHT: 100%;
BORDER-RIGHT-WIDTH: 0px; max-height: 100%
}
BODY {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
HEIGHT: 100%;
BORDER-RIGHT-WIDTH: 0px;
max-height: 100%
}
/* Schriftabstand vom Rechten Kasten von Spalte */
/* OVERFLOW: auto;
Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird.
Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.*/
#content
{
DISPLAY: block;
PADDING-LEFT: 400px;
Z-INDEX: 3;
OVERFLOW: auto;
POSITION: relative;
HEIGHT: 100%; max-height: 100%
}
/* HEADER Farbe und auch Scriftausrichtung*/
#head {
DISPLAY: block;
FONT-SIZE: 4m;
Z-INDEX: 5;
RIGHT: 18px;
BACKGROUND: #F9F9F9;
MARGIN: 0px;
WIDTH: 100%;
COLOR: #fff;
POSITION: fixed;
TOP: 0px;
HEIGHT: 80px
}
#foot {
DISPLAY: block;
FONT-SIZE: 1em;
Z-INDEX: 4;
RIGHT: 18px;
BACKGROUND: rgb(214,100,50);
MARGIN: 0px; WIDTH: 100%;
COLOR: #fff;
BOTTOM: -1px;
POSITION: fixed;
HEIGHT: 50px;
TEXT-ALIGN: center
}
#left {
FONT-SIZE: 1em;
Z-INDEX: 4;
BACKGROUND: #FFAD5B; #aaa 0px 100px;
LEFT: 0px;
WIDTH: 200px;
COLOR: red;
POSITION: fixed;
TOP: 0px;
HEIGHT: 100%
}
HTML #head
{
POSITION: absolute
}
HTML #foot
{
POSITION: absolute
}
HTML #left
{
POSITION: absolute
}
/*---------------------- #HEADER erzeugt mit FLOAT -----------------------*/
*/ HEADER WURDE MIT FLOAT AUF DAS FENSTER GELEGT defíniert mit #pead1 */
/* Header oben Höhe = HEIGHT muss gleich mit der OPTION #header sein
WIDHT = Textabstand vom Hauptfenster oben
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen
*/
#pad1
{
DISPLAY: block;
FLOAT: right;
WIDTH: 48px;
HEIGHT: 80p;
}
*/---------------------------------------------------------------*/
/*---------------------- #FOOTER erzeugt mit FLOAT -----------------------*/
#pad3
{
DISPLAY: block;
FLOAT: left;
WIDTH: 18px;
HEIGHT: 50px
}
/*--------------------- FOOTER ENDE -----------------------------*/
.pad2
{
DISPLAY: block; HEIGHT: 100px
}
#content P {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}
}
/*----------- Wird nicht benötigt---------------*/
/*
#wordsleft {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 5px; BACKGROUND: #efd; LEFT: 150px; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: 5px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; PADDING-TOP: 5px; BORDER-BOTTOM: #000 1px solid; TOP: 100px; HEIGHT: 200px
}
#wordsright {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 5px; RIGHT: 150px; BACKGROUND: #def; FLOAT: right; PADDING-BOTTOM: 5px; MARGIN: 5px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; PADDING-TOP: 5px; BORDER-BOTTOM: #000 1px solid; TOP: 100px; HEIGHT: 200px
}
#wordsabsolute {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 2em; BACKGROUND: #eee; LEFT: 400px; PADDING-BOTTOM: 5px; MARGIN: 5px; BORDER-LEFT: #000 1px solid; COLOR: #c00; PADDING-TOP: 5px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 280px
}
#wordsrelative {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 2em; BACKGROUND: #ddd; LEFT: 30px; PADDING-BOTTOM: 5px; MARGIN: 5px; BORDER-LEFT: #000 1px solid; WIDTH: 200px; COLOR: #c00; PADDING-TOP: 5px; BORDER-BOTTOM: #000 1px solid; POSITION: relative; TOP: 10px
}
*/
/*----------- Wird nicht benötigt---------------*/
}
A.nav {
DISPLAY: block;
FONT-WEIGHT: bold;
WIDTH: 100px; COLOR: #fff;
LINE-HEIGHT: 25px; HEIGHT: 25px;
TEXT-DECORATION: none
}
A.nav:visited {
DISPLAY: block;
FONT-WEIGHT: bold;
WIDTH: 100px; COLOR: red;
LINE-HEIGHT: 25px; HEIGHT: 25px;
TEXT-DECORATION: none
}
A.nav:hover {
COLOR: #fc0
} HTML-Code:
<META content="MSHTML 6.00.2900.2180" name=GENERATOR> </HEAD> <BODY> <DIV id=head> <DIV id=pad1></DIV>For ART'S sake...</DIV> <DIV id=foot> <DIV id=pad3></DIV><BR>© 2004 Stuart A Nicholls ~ All rights
reserved </DIV> <DIV id=left> <DIV class=pad2></DIV> <UL> <LI><A class=nav title="Your comments"
href="http://www.cssplay.co.uk/comments/comments.php?comment_id=fixit layout 2">Comments</A> <LI><A class=nav title="Version 1"
href="http://www.cssplay.co.uk/layouts/bodyfix.html">Layout 1</A> <LI><A class=nav title="Version 2"
href="http://www.cssplay.co.uk/layouts/body4.html">Layout 3</A> <LI><A class=nav title="Version 2"
href="http://www.cssplay.co.uk/layouts/body5.html">Layout 4</A> <LI><A class=nav title="Layouts Home Page"
href="http://www.cssplay.co.uk/layouts/index.html">Layouts</A> <LI><A class=nav title="Site Home"
href="http://www.cssplay.co.uk/index.html">Home Page</A> </LI></UL></DIV> <DIV id=content> <DIV class=pad2></DIV> <H2></H2> <DIV id=wordsleft>This block of text is floated left.</DIV> <DIV id=wordsright>This block of text is floated right.</DIV> <DIV id=wordsabsolute>This block of text is position:absolute;</DIV> <DIV id=wordsrelative>This block of text is position:relative;</DIV> <DIV class=pad2> </DIV> </DIV> </BODY> </HTML>
Das Problem liegt eher bei dem Content, wie und wo fängt der an?
Habe schon so ziemlich alles getestet.
Viele grüsse