3 Fragen - Blder wechseln - DIV - Sitemap formatieren ?!

aaron · #1 09.09.05, 01:09

Hallo

Ich versuche durch das ungefähre nachbauen der TYPO3 CMS: typo3.com Page den Umgang mit dem Programm zu erlernen.

3 Probleme kann ich leider nicht lösen.
Ich erwarte nicht, dass alle meine Fragen beantwortet werden. Würde mich aber über jede Hilfe freuen.

Um die Probleme zu verdeutlichen, habe ich zwei Screenshots gemacht.

1. Ich würde gerne beim Auswahl der Menüpunkte das Bild links oben verändern.
2. Wenn mein Content links etwas länger wird, soll mein div-frame auf der rechten Seite auch verlängert werden.
3. An welche Stelle kann ich Sitemap formatieren ?

HTML:

Code:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
&lt;html>
&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;title>Unbenanntes Dokument&lt;/title>
&lt;/head>

&lt;body>
&lt;!-- ###DOKUMENT### begin -->
&lt;div id="frame">
	&lt;div id="logo">###LOGO###&lt;/div>
	&lt;div id="menu_oben">###MENU_TOP###&lt;/div>
	&lt;div id="header">&lt;div id="bilder">###BILDER###&lt;/div>###HEADER###&lt;/div>
	&lt;div id="menu_links">&lt;p>###MENU_LEFT###&lt;/p>&lt;/div>
	&lt;div id="content">###CONTENT###&lt;/div>
&lt;/div>
&lt;!-- ###DOKUMENT### end -->
&lt;/body>
&lt;/html>

TYPOSCRIPT:

Code:

seite = PAGE

# CSS einbinden
#seite.includeCSS {
#   file1 = fileadmin/layout.css
#}

seite {

   typeNum = 0
   bodyTag = &lt;body bgColor = "#ffffff">

   # CSS einbinden
   stylesheet = fileadmin/typo3_css.css
   meta.AUTHOR = 
   meta.DESCRIPTION = typo3 - ein Versuch, die Seite nachzubauen

   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/typo3.html

   10.workOnSubpart = DOKUMENT

   10.marks {

      # Logo    
      LOGO = IMAGE
      LOGO.file = fileadmin/images/logo.gif

      HEADER = IMAGE
      HEADER.file = GIFBUILDER
      HEADER.file {
         XY = 300, 120
         backColor = #bcd54b

      # Titel
      10 = TEXT
      10.text.field = title
      10.fontSize = 20
      10.fontColor = #fffffff
      10.niceText = 1
      10.offset = 150, 90

      # Titel
      20 = TEXT
      20.text.field = subtitle
      20.fontSize = 12
      20.fontColor = #fffffff
      20.niceText = 1
      20.offset = 150, 115
      }
      # Ende HEADER.file 


      #Bild
      BILDER = IMAGE
      BILDER.file = fileadmin/images/statur.png  
      BILDER.file.width = 230
      BILDER.file.height = 140


      # Menü top
      MENU_TOP = HMENU
      MENU_TOP.special = directory
      MENU_TOP.special.value = 2
      MENU_TOP.1 = TMENU
      MENU_TOP.1.NO = 1
      MENU_TOP.1.NO.linkWrap = || |*| || |*| |

  
      # Menü left
      MENU_LEFT = HMENU
      MENU_LEFT.special = directory
      MENU_LEFT.special.value = 7
      MENU_LEFT.entryLevel = 1
      MENU_LEFT.1 = GMENU
      MENU_LEFT.1.NO = 1
      MENU_LEFT.1.NO {

         backColor = #eef6ff
         wrap = |&lt;br>

         XY = 200,30

         10 = TEXT
         10.text.field = title
         10.fontColor = #000000
         10.fontSize = 10
         10.niceText = 1
         10.offset = 7, 10
      }
      # Ende MENU_LEFT.1.NO


      MENU_LEFT.1.RO &lt; .MENU_LEFT.1.NO

      #MENU_LEFT.1.RO.backColor = #ffffff
      #MENU_LEFT.1.RO {
      #   tmp &lt; .backColor
      #   backColor = #ffffff
      #   5 &lt; .10
      #   5.fontColor &lt; .tmp
      #   5.offset = 9,23
      #}
      # Ende MENU_LEFT.1.RO

      MENU_LEFT.1.CUR &lt; .MENU_LEFT.1.RO

      # Submenü von 'Über uns'
      MENU_LEFT.2 &lt; .MENU_LEFT.1
      MENU_LEFT.2 {
         NO.backColor = #E2F5E5
         NO.10.fontColor = #478951
         NO.20.file.backColor = #478951
         RO &lt; .NO
         RO.backColor = #FFFFFF
         RO.5 >

         CUR &lt; .RO
      }

      # weisse Linien
      20 = IMAGE
      20.file = GIFBUILDER
      20.file {
         XY = 250,1
         backColor = #FFFFFF
      }
      20.offset = 0, 29

      # Content - mitte - colPos = 0
      CONTENT = CONTENT
      CONTENT {
         table = tt_content
         select.orderBy = sorting
         select.where = colPos = 0

         select.languageField = sys_language_uid
      }



   }
   # Ende marks
}
# Ende seite


# Definition der Überschrift 
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
   key.field = header_layout
   1 = TEXT
   1.field = header
   1.wrap = &lt;font face="Arial" size="2">&lt;b> | &lt;/b>&lt;/font>&lt;br>
   2 = IMAGE
   2.file = GIFBUILDER
   2.file {
      XY = [10.w]+10, 28
      backColor = white
      10 = TEXT
      10.text.field = header
      10.fontColor = #00aa4b
      10.fontFile = fileadmin/fonts/arialb.ttf
      10.fontSize = 14
      10.offset = 1, 22
      10.niceText = 1
   }
   2.wrap = |&lt;br>
   default &lt; .1
}

# Definition des Contents
tmp_tt_content_text &lt; tt_content.text
tt_content.text >
tt_content.text = COA
tt_content.text.10 &lt; lib.stdheader
tt_content.text.20 = TEXT
tt_content.text.20 {
   field = bodytext
   fieldRequired = bodytext
   wrap = &lt;font face="Arial" size="2">|&lt;/font>&lt;br>
   parseFunc &lt; tmp_tt_content_text.20.parseFunc
   editIcons &lt; tmp_tt_content_text.20.editIcons
}

CSS

Code:

body {
	background-color:#FFFFFF;
	width:850px;
}
#logo {
	text-align:right;
	padding:5px;
}
#menu_oben {
	background-color:#FFFFFF;
	color:#444444;
	text-align:left;
	padding-left:5px;
	padding-bottom:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
}
#header {
	background-color:#BCD54B;
	height:140px;
	color:#FFFFFF;
	text-align:right;
	padding-right:50px;
}
#bilder {
	background-color:#FFFFFF;
	float:left;
	width:230px;
	height:140px;
}
#menu_links {
	background-color:#EEF6FF;
	width:220px;
	float:left;
	margin-top:1px;
	padding-top:10px;
	padding-left:10px;
}
#content {
	background-color:#FFFFFF;
	width:600px;
	float:left;
	padding-top:20px;
	padding-left:10px;
	margin-top:1px;
}

[/code]

LineMan · #2 09.09.05, 06:45

hi...

warum schaust du dir nicht einfach den quelltext der typo3.org seite an... :roll:

auf alle fälle ist der linke blaue streifen einfach eine hintergrundgrafik...

Aus dem Quelltext von Typo3.org:

Code:

&lt;body topmargin="0" leftmargin="0" marginleft="0" marginright="0" background="fileadmin/t3org/bg.gif">

Ausserdem basiert das Design von Typo3.org auf Tabellen... die Option mit dem Hintergrundbild wäre aber auch für ein css design eine möglichkeit... einfach ein solches bild als

Code:

body {background: #FFF url(fileadmin/t3org/bg.gif)}

angeben... und gut ist

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
sitemap/keywords formatieren	steffmeister	GMENU, HMENU, TMENU und Co.	0	26.02.08 15:37
Menü/Sitemap formatieren	maxhb	TYPO3 4.x Fragen und Probleme	2	29.08.07 20:09
FE User Group wechseln	El Rolando	Extension modifizieren oder neu erstellen	9	12.12.06 01:08
Template wechseln	Marcus	TYPO3 3.x Fragen und Probleme	12	31.03.06 19:28
Menu/Sitemap - Menu der Unterseiten mit Inhaltsangabe - kann man das anders formatieren?	jehoho	GMENU, HMENU, TMENU und Co.	0	26.07.05 09:42

Suche

Userpanel

3 Fragen - Blder wechseln - DIV - Sitemap formatieren ?!