[TYPO3-UG Dutch] css/typo3

Daniel Doesburg daniel at typo3-nl.eu
Thu Feb 22 14:56:59 CET 2007


Hoi Melvin,

Melvin Struiksma schreef:
> 
> het enige waar ik nu nog mee zit is mijn menu horizontaal te tonen.
> 
> Nu weet ik dat je het in je .css moet doen, maar dat werkt niet naar
> behoren.

Vertel eens wat er WEL gebeurt en wat je graag wilt dat er zou gebeuren.

> 
> Volgens mij is de .css script:
> 
> /* Menu 1 column */
> 	TD#menu_1 {
> 	position: absolute;
> 	height: 40px;
> 	width: 800px;	
> 	top: 158px;
> 	left: 85px;
> 	background-image: url(../images/[Dream]-Team-navigatiebalk.jpg);
> 	background-repeat : no-repeat;
> 	border: 1px solid #000000;
> }
Als dit het enige is moet je nog even aan de slag.
Zo te zien gebruik je een tabel voor je lay-out.
Kijk eens op http://www.stylesheets.nl/

Verder lijkt het me vreemd dat je een tabel-cel absoluut positioneert.
Maak daar een div van en je kunt je menu plaatsen waar je wilt.

Verder doet dit stukje css alleen iets aan de plaats van je menu. Niet 
aan de lay-out van de afzonderlijke items.

Heb je ook even op http://css.maxdesign.com.au/listamatic/ gekeken, 
zoals geadviseerd?

> Maar het werkt niet :(, komt dit door mijn typo3 setup?

Nee, ik durf haast te stellen dat dat niet kan.
> 
> dat is: 

In plaats van je TS is in dit verband de gegenereerde HTML-source veel 
interessanter.

Knip het geparste stukje menu uit en plak het in je bericht.
Want alleen de uiteindelijke HTML en de bijbehorende CSS bepalen je pagina.

> 
> # STATISCHE TEKST = "HOOFDMENU" EERSTE PAGINA, wel veranderbaar
>   #Hoofdmenu
>   temp.menu_1 = HMENU
>   #temp.menu_1.special = directory
>   #temp.menu_1.special.value = 24
>   temp.menu_1.special = list
>   temp.menu_1.special.value =24,23,27,26,28,25
>   temp.menu_1.1 = TMENU
>   temp.menu_1.1 {
> 
>   NO.allWrap = <div class="menu1-level1-no"> | </div> 
> # Enable active state and set properties:
>  ACT = 1
>  ACT.allWrap = <div class="menu1-level1-act"> | </div>
> }
> 
>   temp.menu_1.2 = TMENU
>   temp.menu_1.2 {
> 
>   NO.allWrap = <div class="menu1-level2-no"> | </div> 
> # Enable active state and set properties:
>  ACT = 1
>  ACT.allWrap = <div class="menu1-level2-act"> | </div>
> }
>   
>   temp.menu_1.3 = TMENU
>   temp.menu_1.3 {
> 
>   NO.allWrap = <div class="menu1-level3-no"> | </div> 
> # Enable active state and set properties:
>  ACT = 1
>  ACT.allWrap = <div class="menu1-level3-act"> | </div>
> 
> Als iemand hier het antwoord op weet, hoor ik het graag.

Bij nader inzien toch niet zo gek om je TS te plaatsen.

Gebruik nu dit stukje:
temp.menu = HMENU
temp.menu {
   special = list
   special.value = 24,23,27,26,28,25
   wrap = <div id="main-menu"> | </div>
   1 = TMENU
   1 {
     wrap = <ul> | </ul>
     NO = 1
     NO.WrapItemAndSub = <li > | </li>
     ACT = 1
     ACT.wrapItemAndSub = <li class="actief"> | </li>
   }
   2 < .1
   3 < .2
}

Dit eenvoudige stukje TS genereert een geneste unordered list. En 
daarmee kun je alles (OK bijna alles) maken.

Als je geïnteresseerd bent in een uitgebreide versie van dit menu moet 
je dat even laten weten. Dan kun je echt alles tackelen.

Heb je problemen met de CSS dan doe ik dat er met plezier bij.

Het menu (de HTML-code) wat je hiermee maakt is bijvoorbeeld ook het 
uitgangspunt van http://css.maxdesign.com.au/listamatic/

En als je ziet wat ze daar, in de voorbeelden, met puur css doen . . .

Dan hoef je geen classes voor de levels meegeven. Een menu-item op het 
eerste level benader je met de constructie #main-menu ul li (of 
#main-menu ul li a), op het tweede level wordt het dan #main-menu ul ul 
li enzovoorts.
Nogmaals, neem een uurtje de tijd om je te verdiepen in dit fenomeen op:
http://css.maxdesign.com.au/listamatic/
Nee, ik heb daar geen aandelen maar zou het alle TYPO3 gebruikers wel 
schreeuwend door de strot willen douwen. Met de allerbeste bedoelingen.
Want heb je dit eenmaal onder de knie, en zo moeilijk is het echt niet, 
dan wordt elk menu met TMENU een fluitje van een cent.


> 
> Gr,.
> 
> Melvin.


Met vriendelijke groeten,

Daniel Doesburg
P.S. Ik weet dat ik niet altijd de meest diplomatieke taal gebruik. Neem 
van mij aan dat ik al deze moeite neem om iets te posten om zoveel 
mogelijk mensen over de TYPO3 drempel te trekken en daardoor ook TYPO3 
nog meer fans te bezorgen.


More information about the TYPO3-UG-dutch mailing list