fehler im dropdown menü

spatric · 26. Juli 2010 22:03

hi zusammen

als typo3-beginner kämpfe ich mit einem Fehler in einem drop down menü.

die unterpunkte sollten eingeblendet werden, sobald der mouszeiger auf dem jeweiligen hauptpunkt ist.

Problem: ich muss den jeweiligen Hauptpunkt zuerst anklicken und erst dann funktioniert das mit mouseover. hab jetzt keine ahnung ob das problem im typoscript liegt oder im css.

hier noch mein typoscript:

# Default PAGE object:
page = PAGE
page {

includeCSS {

screen = fileadmin/style.css
scree.media = screen

}#Ende include CSS

10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/startseite.html
10.workOnSubpart = Document_Body

10.marks {

INHALT = CONTENT
INHALT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0

}#Ende Content

HEADER = IMAGE
HEADER.file = GIFBUILDER
HEADER.file {

XY = 965,220

10 = IMAGE
10.file.import = uploads/media/
10.file.import.data = levelmedia:-1, slide
10.file.import.listNum = 0
10.file.width = 965

20 = IMAGE
20.file = GIFBUILDER
20.file.XY = 965,220
20.mask = fileadmin/image/mask.jpg

}#ende header

FLASH = COA
FLASH {

10 = HTML
10.value=<div>
20 = TEXT
20.value=<object type="application/x-shockwave-flash" data="fileadmin/header.swf" wmode="transparent" width="965" height="100"><param name="quality" value="high" /><param name="bgcolor" value="#fff" /><param name="loop" value="true" /><param name="menu" value="false" /><img src="fileadmin/templates/images/headergrafik.jpg" width="580" alt="bitte Flashplayer installieren" border="0" /></object>
30 = HTML
30.value=</div>
}

LOGO = IMAGE
LOGO.file = fileadmin/image/logo_smatec.png
LOGO.file.XY = 230,90

#ENDE TOP

#BEGIN MENU

MAIN_MENU = HMENU
MAIN_MENU {

### Erste Ebene ###

1 = TMENU

1 {
entrylevel = 0
NO = 1
noBlur = 1
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li>|</li>

}

### Zweite Ebene ###

2 <.1

}#ende main_menu

FORMULAR = IMAGE
FORMULAR {

file = fileadmin/image/anfragebutton.png
params.class="button"
stdWrap.typolink.parameter = 31
altText = Senden Sie uns Ihre Anfrage
title = Senden Sie uns Ihre Anfrage

}#Ende Formular

NEWS = CONTENT
NEWS {
table = tt_content
select.orderBy = sorting
select.where = colPos = 2

}#Ende News

}#Ende Marks

}#Ende Page

hier noch mein css vom navi:

/* ========= style Navigation ========== */

#navi {width:965px; height:25px; background:#999; font-size:105%;}

#navi ul {list-style:none;float:left; width:100%; background-image:url(..fileadmin/image/navi999to666.png); background-repeat:repeat-x;}

#navi li {float:left; margin: 0px 0px 0px 0px; line-height:25px; text-align:center;}

#navi a {color:#000; text-decoration:none; display:block; width:160px; border-right: 1px solid background-image:;}

#navi a:hover {text-decoration:none; display:block; color:#FFF;}

#navi li ul {margin-top:1px; width:170px; background-image:url(../fileadmin/image/subnavi999to666.png); background-repeat:repeat-x; height:100%;}

#navi li li {float:none; margin: 0px 0px 0px 0px; text-align:left; display:block;}

#navi li li a {color:#000; width:100%; padding-left:5px; padding-top:5px; border-right:none;}

#navi li li a:hover {background-image:url(../fileadmin/image/navi999to666.png); background-repeat:repeat-x; width:auto; color:#FFF;}

#navi li ul {position:absolute; left:-9999px;}

#navi li:hover ul {left:auto;}

danke schon mal für die Bemühungen einem Beginner zu helfen.

Grüße
Patric

etux · 26. Juli 2010 23:52

So ganz verstehe ich Dein Problem nicht. Es wäre besser, Du postest einen Link zu Deiner Site.

Dennoch:

„margin-top“ hier raus nehmen. Sonst entsteht eine 1px-höhe Hover-Lücke.
#navi li ul {
margin-top:1px;
…......................
}

Schreib am Anfang Deiner CSS ein CSS-Reset (falls nicht schon vorhanden)
{ margin: 0; padding: 0; }
sonst wird die Hover-Lücke noch größer.

Außerdem:

Das hier ist Mischmasch
#navi a {
…..............................
border-right: 1px solid background-image:;
}

Besser wäre es wenn:

UL der zweiten Ebene zum Einblenden ein „left: 0;“ bekommt, statt „left: auto;“
Den LIs der ersten Ebene muss Du dann ein „position: relative;“ geben. Idealerweise erst beim „hover“ auf die LI.

Höhen-Angaben sind so gut wie nie nötig. Bei Elementen, die Text enthalten, sogar schädlich.

spatric · 27. Juli 2010 14:27

Hi

Vielen Dank für dein Feedback.

Hier noch mal zu meinem Problem. Bitte beachte andere noch unschöne Bestandteile (v.a. im IE funktioniert die transparente flash noch nicht,...usw.).

http://www.fami-vlbg.at/patric/typo3/

die Menüunterpunkte werden nur angezeigt, wenn vorher auf den jeweiligen link geklickt wird

Wäre super wenn du da ein Lösungsansatz für mich hättest.

Grüße
Patric

spatric · 27. Juli 2010 14:29

... ich meinte: "bitte beachte noch unschöne Bestandteile nicht" ;-)

etux · 27. Juli 2010 19:55

spatric schrieb
Problem: ich muss den jeweiligen Hauptpunkt zuerst anklicken und erst dann funktioniert das mit mouseover. hab jetzt keine ahnung ob das problem im typoscript liegt oder im css.

Im TypoScript.

Defaultmäßig ist „expAll“ auf false (bzw. 0).

Du brauchst also in Deiner Navi ein:

expAll = 1

Ich sehe gerade - „body“ kommt bei Dir doppelt vor. :o

etux · 27. Juli 2010 20:16

Nachtrag:

Du schließt Floats nicht ein. Z.B. die floatende UL (Navigation). Sie wird nur durch die Höhen-Angabe zusammen gehalten. Höhen-Angaben solltest Du aber vermeiden.

Statt dessen lkannst Du „div#navi“ auch floaten lassen. Ein „clear“ beim „div#mitte“ beendet dann das Ganze.
Keine Sorge - „clear: both;“ bei „div#content“ habe ich gesehen. Es steht aber an der falschen Stelle – nimm es also wieder raus.

Usw.

spatric · 27. Juli 2010 20:30

hey ...

... du hast gerade ein beginner sehr glücklich gemacht. Es funkt #giggle#

ärgerlich ist nur zu wissen, dass die ganze Zeit nur das expAll das Problem war #angry#

Vielen Dank - echt super von dir

Schöne Grüße
Patric

etux · 27. Juli 2010 20:44

Bitte, gerne. Aber ...

spatric schrieb
ärgerlich ist nur zu wissen, dass die ganze Zeit nur das expAll das Problem war

… noch ärgerlicher ist es, dass ich es noch gestern hätte sehen müssen.

Und jetzt ran an die CSS. #giggle#

etux · 27. Juli 2010 21:20

Noch einen Nachtrag:

ich habe auch schnell den folgenden Code überflogen.
Ich fasse es kurz zusammen:

„clear“ bei „div#mitte“ ist doch überflüssig – das Element wird ja floatet.
Eine Breiten-Angabe bringe hier mehr Stabilität (alte IEs), beachte aber das „Box-Model“ ( 2 mal 1px Border).

Es ist besser, wenn Du auch die Seitenspalte floatest – sonst besitzt sie kein BFC (Block Formatting Context). Sollten später in der Seitenspalte Elementen mit „clear“ vorkommen sind die Probleme vorprogrammiert.
Vor allem, wenn Du sie auch nach links floatest, ist eine Breiten-Angabe bei „div#mitte“ sehr ratsam.

„clear: both;“ bei "div#footer“ beendet dann die Floats – steht ja schon drin.
Übrigens würde hier auch ein „clear: left;“ völlig reichen.

Auch, bzw. gerade im Content-Bereich sind Höhen-Angaben Unfug – höchstens „min-height“. Aber vielleicht hast Du sie ja nur für die Zeit der Entwicklung rein gesetzt.

Viel Spaß noch beim Coden. #giggle#

etux · 27. Juli 2010 21:37

Doch noch einen Nachtrag: 😃

Auch der Header-Bereich bedarf Korrekturen.
„absolute“ positionierte Elementen brauchen einen Bezug-Punkt (Comtaining Block). Sonst richten sich die Offsets nach dem Browser-Fenster.

Aber eine „absolute“ Positionierung brauchst Du an der Stelle gar nicht.
Das Header-Bild gehört zum Inhalt der Seite nicht – nimm es also raus aus dem Quelltext und definiere es als Hintergrundbild für „div#header“ und tue auch das Logo rein in „div#header“.
Wenn das Logo doch neben der Flash-Animation erscheinen sollte – kannst Du es mit negativen „margin-bottom“ nach unten verschieben.