---
title: "TSFE Bildweiter in css"
url: "https://www.typo3.net/d/83425-tsfe-bildweiter-in-css"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2008-10-29"
last_reply: "2008-10-31"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# TSFE Bildweiter in css

Allgemein · 2 Antworten · gestartet 2008-10-29

## Eröffnungsbeitrag

**paxoptimusprime** · 2008-10-29 · [Beitrag #1](https://www.typo3.net/d/83425-tsfe-bildweiter-in-css/1)

Hallo, bei diesem script wird der pfad der erstellten menübilder in css übergeben sodass die bilder mittels css ausgetascht werden
zw a und a:hover...

nun habe ich gelesen das man mittels TSFE die bildweite auslesen kann... nun wollte ich wissen wie ich diese auch in dieses hierdrin generierte css mit reinbaue kann mir da bitte einer helfen?

```typoscript
# Angabe für Normalzustand

temp.css_menue10 = IMG_RESOURCE
temp.css_menue10 {
        file = GIFBUILDER
        file {
		XY = 10+[10.w]+20,24
		transparentBackground = 1
		5 = IMAGE
		5 {
			file = fileadmin/templates/images/off.png
          		file.width = 1000
          		file.height = 24
          		offset = 0,0
          	}
          	6 = IMAGE
          	6 {
          		file = fileadmin/templates/images/off-r.png
          		file.width = 5
          		file.height = 24
          		offset = 10+[10.w]+15, 0
          	}
          	10 = TEXT
          	10 {
			text.field = title
            		fontSize = 10
            		fontFile = fileadmin/templates/fonts/verdanab.TTF
            		offset = 23,20
            		fontColor = #ffffff
		}
 
        }
	stdWrap.wrap = { background-image: url(|); }
}
 
# Angabe für Hoverzustand

temp.css_menue20 < temp.css_menue10
temp.css_menue20 {
        file = GIFBUILDER
        file {
		XY = 10+[10.w]+20,24
		transparentBackground = 1
		5 = IMAGE
		5 {
			file = fileadmin/templates/images/on.png
          		file.width = 1000
          		file.height = 24
          		offset = 0,0
          	}
          	6 = IMAGE
          	6 {
          		file = fileadmin/templates/images/on-r.png
          		file.width = 6
          		file.height = 24
          		offset = 10+[10.w]+14, 0
          	}
          	10 = TEXT
          	10 {
			text.field = title
            		fontSize = 10
            		fontFile = fileadmin/templates/fonts/verdanab.TTF
            		offset = 23,14
            		fontColor = #ffffff
		}
 
        }
	stdWrap.wrap = { background-image: url(|); }
}

# mainnavi

lib.navi = HMENU
lib.navi {
        special = directory
        special.value = 3
  	stdWrap.dataWrap = <ul>|</ul>
  	stdWrap.required = 1
  	korek_css = padding-bottom:20px;margin-left:1px;text-align:left
  	aniLen = 800
  	hideDelay = 5
  	minCPUResolution = 10
  	kore_so_x = -2
  	div_id_layer = yymenu
  	wrap = <div id=grafik_menue_demo>|</div>
 	#1 = TMENU
 	1 = tx_menu_ypslideoutmenu
	1 {
    		expAll = 1
    		NO = 1
    		NO {
      			doNotLinkIt = 1
      			subst_elementUid = 1
      			linkWrap = <li id="seite{elementUid}"> | </li> 
      			stdWrap.cObject = COA
      			stdWrap.cObject{
        			10 = LOAD_REGISTER
        			10.css_menue.cObject < temp.css_menue10
        			10.css_menue_hover.cObject < temp.css_menue20
        			
        			10.css_menue_active.cObject < temp.css_menue20
        			
        			10.css_menue_ges.cObject = TEXT
        			10.css_menue_ges.cObject.dataWrap = #mm_id{field:uid} {register:css_menue} #mm_id{field:uid}:hover {register:css_menue_hover} #mm_id{field:uid}:active {register:css_menue_active} {register:css_menue_ges}
        			20 = TEXT
        			20{
          				field = subtitle//title
          				typolink {
            					parameter.field = uid
            					ATagParams.cObject = COA
            					ATagParams.cObject{
              						30 = TEXT
              						30.dataWrap = id="mm_id{field:uid}"
            					}
          				}
        			}
      			}
    		}
  	}
 
	2 = tx_menu_ypslideoutmenu
  	2 { 
     		moveTo = down
      		height = 22
      		width = 177
      		expAll=1
      		NO {
      		}
  	}
}
 
# setup

seite = PAGE
seite.stylesheet = fileadmin/templates/css/default.css
seite.headerData.300 = COA
seite.headerData.300{
  wrap = <style> | </style>
  10 = TEXT
  10.value(

#grafik_menue_demo ul, #grafik_menue_demo li {
	margin: 0px;
	padding: 0px;
	list-style-type : none;
	}
#grafik_menue_demo a {
	text-indent: -999em;
	color: #FFFFFF;
	width:100%;
	height:24px;
	display:block;
	}
                
  )
  20 = TEXT
  20.dataWrap = {register:css_menue_ges}
}
seite.30 = TEMPLATE
seite.30 {
        template = FILE
        template.file = fileadmin/templates/index.html
        workOnSubpart = DOKUMENT
        subparts.CONTENT = CONTENT
        subparts.CONTENT {
                table = tt_content
                select.orderBy = sorting

                select.where = colPos=0

        }




        subparts.HEAD_NAVI < lib.head_navi   
        subparts.NAVIGATION < lib.navi
        subparts.HEADBANNER < lib.headbanner
}
```

## Antworten

### [#2](https://www.typo3.net/d/83425-tsfe-bildweiter-in-css/2) · Michaelh74 · 2008-10-30

Könnte mir vorstellen der Podcast "Tips’n’Tricks: ttmenu" auf der typo3.org Seite hilft Dir da weiter.

Gruß
Michael

### [#3](https://www.typo3.net/d/83425-tsfe-bildweiter-in-css/3) · paxoptimusprime · 2008-10-31

Danke hat funktioniert... Bei diesem tutorial fehlt allerdrings die css zum suckerfishmenu ^^

ist ein bisschen komplexer wenn die erste ebene immer unterschiedlich lang ist ^^

---

Quelle: „TSFE Bildweiter in css“, typo3.net, https://www.typo3.net/d/83425-tsfe-bildweiter-in-css
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.