[joschiluna]

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 {
    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
}

<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&nbsp;</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

[humpun]

Hallo,

mach in deinem <DIV id=content> einen rein.

Dann kannst du diesen per TypoScript ansprechen:

Typoscript-Code:

1: 2: 3: 4: 5:

page.10.subparts.CONTENT < styles.content.get page.10.subparts.CONTENT { select.orderBy = sorting select.where = colpos=0 }

humpun

[dirvish]

Hallo,

vielen Dank,aber was bedeutet der Eintrag

select.orderBy = sorting
select.where = colpos=0 ?

page.10.subparts.CONTENT < styles.content.get hatte ich gemacht.



Viele Grüsse

[FraGiLe]

damit nimmt er den Datensatz für die Spalte "Normal" , du hast in deinen "Seite" / Seiteninhalt im Backend ja "logische" Spalten, die du mit Content füllen kannst...

[dirvish]

Hallo,

danke für deine Antwort.

Wenn ich das richtig verstanden habe sieht die Sache so aus.

Bei einer HTML Vorlage habe ich z.b 2 Spalten, diese kann ich über subparts ansprechen

page.10.subparts.CONTENT < styles.content.getRight
page.10.subparts.CONTENT < styles.content.getLeft

Wenn ich nun auf eine Vorlage verzichten möchte und den Inhat ausgeben möchte, dann benötige ich

select.orderBy = sorting
select.where = colpos=0

Stimmt das ?

Viele Grüsse