Listenmenu CSS - Ausrichtung Text auf Hintergrundbildern

  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    05. 05. 2006, 13:37

    Hallo,
    ich finde es einfach nicht: Ich habe ein Listenmenu mit unsortierten Listen. Das funktioniert auch. Aber leider kriege ich es einfach nicht hin, den Text korrekt auf den Hintergrundbildern auszurichten.
    Wenn ich in der Klasse .menu_main ein padding-top angebe, dann macht der FF zwischen die einzelnen Menupunkte - also zwischen die einzelnen Hintergrundbilder - auch einen Abstand (nicht der IE). Weiss jemand, an welcher Schraube ich drehen muss, damit ich den Text der Menupunkte auf dem Hintergundbild ausrichten kann? Ich suche schon so lange, dass ich nichts mehr sehe.

    Kann jemand helfen?

    Viele Grüße
    Andrea

    [TS]marks.MENU = HMENU
    marks.MENU.entryLevel = 0
    marks.MENU {

    1 = TMENU
    1 {

    wrap = <ul class="menu_ul"> | </ul>
    entryLevel = 1
    noBlur = 1
    NO {

    WrapItemAndSub = <li class="menu_li"> | </li>
    ATagParams = class = "menu_main"



    }

    RO < .NO
    RO.ATagParams = class = "menu_mainhover"
    RO = 1
    RO.stdWrap.case = upper

    ACT < .NO
    ACT.ATagParams = class = "menu_mainact"
    ACT = 1
    }

    2 = TMENU
    2 {
    wrap = <ul class="menu_ul"> | </ul>
    #entryLevel = 0
    noBlur = 1
    NO {
    AllWrap = class = "menu_sub"
    after = <br />
    ATagParams = class = "menu_sub"
    #StdWrap.case = lower
    RO = 1
    }
    ACT < .NO
    ACT.ATagParams = class="menu_subact"
    ACT = 1

    }[/TS]
    [HTML]/* 1. Abstand oben 2. Abstand rechts 3. Abstand unten 4. Wert sorgt für die Einrückung - IE und FFOX (Abstand links)*/

    .menu_ul {

    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 9px;
    padding-right: 0px;
    padding-bottom: 9px;
    }

    .menu_li {
    display: block;
    background: transparent;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px
    margin-bottom: 0px;
    padding-top: 5px
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    /*list-style-type: none;*/
    }
    /*Klasse für die seitliche Navigation, 1. Ebene*/

    .menu_main {
    display: block;
    /*color: #F2F2F2;*/
    background: url(../images/button-35.gif) no-repeat;
    text-decoration:none;
    font-size: 11px;
    font-family: Arial, Verdana, Tahoma;
    font-color: #000000;
    width:152px;
    height: 35px;
    /* top bestimmt den Abstand zwischen den Hauptmenupunkten, Gibt es einen Wert, ist er in den Browsern unterschiedlich*/
    padding-top: 0px;
    padding-left:5px;
    margin: 0px;

    }
    .menu_mainhover {
    display: block;
    /*color: #F2F2F2;*/
    background: url(../images/button-hoover-35.gif) no-repeat;
    text-decoration:none;
    font-size: 11px;
    font-family: Arial, Verdana, Tahoma;
    font-color: #969696;
    width:152px;
    height: 35px;
    padding-top: 0px;
    padding-left:5px;
    }
    /*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/

    .menu_mainact {
    display: block;
    /*color: #F2F2F2;*/
    background: url(../images/button-hoover-35.gif) no-repeat;
    text-decoration:none;
    font-size: 11px;
    font-family: Arial, Verdana, Tahoma;
    font-color: #000000;
    width:152px;
    height: 35px;
    padding-top: 0px;
    padding-left:5px;
    }

    /*Klasse für die seitliche Navigation, 1. Unter-Ebene*/

    .menu_sub {

    text-decoration:none;
    font-size: 11px;
    font-family: Arial, Verdana, Tahoma;
    font-color: #00B9F3;
    width:152px;
    /*height: 35px;*/
    //padding-top: 9px;
    padding-left: 5px;

    }

    /*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/

    .menu_subact {
    list-style-position: outside;

    text-decoration:none;
    font-size: 11px;
    font-family: Arial, Verdana, Tahoma;
    font-color: #BED262;
    width:152px;
    /*height: 35px;*/
    //padding-top: 9px;
    padding-left: 5px;

    }
    [/HTML]


  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    11. 05. 2006, 15:06

    Hallo zusammen,
    mein Problem ist immer noch aktuell. Kann denn wirklich niemand helfen?

    Verzweifelt....

    Andrea

  • ulzf ulzf
    Padawan
    0 x
    52 Beiträge
    0 Hilfreiche Beiträge
    13. 05. 2006, 23:45

    Hi!

    kannst Du mal den Link Deiner Seite hier aufgeben, damit ich das Problem ansehen kann...
    Ich vertehe nämlich das Problem nicht so ganz !!!

    Gruß
    ulzf

  • miwolfram miwolfram
    Jedi-Meister
    0 x
    386 Beiträge
    0 Hilfreiche Beiträge
    15. 05. 2006, 15:23

    einmal das Grundsätzlichste:

    Hast du den richtigen Doctype gesetzt?
    Egal welchen HTML 4.01 oder XHTML Trans/Strict aber irgendeinen mit Angabe der URI zur DTD damit die Browser (vorallem IE) im Standards-Mode arbeiten und (fast) alles gleich darstellen?

    Ansonsten stimmt nämlich das BOX-Modell des IE nicht mit dem des Firefox überein - dann KANN es nicht funktionieren.
    -> http://www.css4you.de/wsboxmodell/index.html

    Wenn du den Doctype richtig gesetzt hast (zb. durch Typo3 setzen lassen) - hast du vielleicht keinen Doctype-Switch gemacht? (der IE geht ebenfalls in den Quirksmode wenn die XML-Deklaration bei XHTML-Seiten VOR dem Doctype steht).

  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    16. 05. 2006, 15:06

    Hallo ihr beiden,
    danke für die Unterstützung.
    Hier ist der Doctype:

    [HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    [/HTML]

    Hier ist die URL zur Seite:
    [url]http://p13490.typo3server.info/index.php?id=811[/url]

    Es geht um die Abstände zwischen den Buttons.
    Das Menu ist, wie gesagt, ein Listenmenu.

    Im voraus vielen Dank,
    Andrea

  • miwolfram miwolfram
    Jedi-Meister
    0 x
    386 Beiträge
    0 Hilfreiche Beiträge
    17. 05. 2006, 16:58

    ok. Liegt definitiv schonmal daran dass der Doctype nicht richtig gesetzt ist und die Browser damit nicht in den richtigen Modus wechseln.

    In deinem Fall wäre wohl dieser richtig (wichtig ist die Angabe zur DTD):
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    So kannst du den Doctype in Typo3 setzen:
    http://www.typo3.net/tsref/setup/config/#doctype

    Über den Doctype:
    Um zu überprüfen ob sich Browser im Standard oder Quirksmode befinden gibts da ein JavaScript-Schnippsel, besser ist aber die Verwendung der Firefox-Extension "Web Developer" - die braucht man einfach.
    http://www.stichpunkt.de/css/css-tipps.html#doctype

    Liste valider Doctypes:
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2006, 13:16

    Hallo,

    vielen Dank für deine Unterstützung. Ich habe den DOCTYPE jetzt in die HTML-Vorlage geschrieben.

    In deiner Mail verweist du auf den Switcher
    [TS]page.headerData.1 = TEXT
    page.headerData.1.value = <script>
    alert(document.compatMode); </script>[/TS]

    Ist der zwingend notwendig? Und wennn ja (jetzt halt mich ruhig für blöde): was muss denn da noch dazu?

    Nur der DOCTYPE bringt mir im FF ein lustiges Ergebnis: Der zweite und dritte Button von unten stehen anders, als die anderen Buttons.
    Ich bin etwas verwirrt, ist doch die gleiche Ebene und der geliche Zustand.

    Viele Grüße
    Andrea[/TS][/HTML]

  • miwolfram miwolfram
    Jedi-Meister
    0 x
    386 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2006, 14:41

    [quote="Andrea_Herzog"]
    In deiner Mail verweist du auf den Switcher...
    [/quote]
    Mail? Switcher? Meinst du mein Posting?

    Nein, das "javascript:alert(document.compatMode)" ist kein CSS-Switcher sondern - wenn du das in die Adresszeile deines Browsers kopierst und Enter drückst - zeigt öffnet sich ein JavaScript Fenster dass dir entweder
    "BackCompat" - der alte Quirks-Mode oder
    "CSS1Compat" - der super Standard-Mode
    anzeigt. (das ist der Modus in dem der Browser läuft und der durch den "richtigen" Doctype bestimmt wird)

    D.h. das bringt dir nur zum Testen was - damit du weisst wann du den Doctype richtig angegeben hast - in die Typo3Headerdaten reinzukopieren bringt dabei nicht wirklich was weil es ja jedes Mal aufgerufen wird.

    [quote="Andrea_Herzog"]
    Nur der DOCTYPE bringt mir im FF ein lustiges Ergebnis: Der zweite und dritte Button von unten stehen anders, als die anderen Buttons.
    Ich bin etwas verwirrt, ist doch die gleiche Ebene und der geliche Zustand.
    [/quote]

    Hast du den Doctype wieder rausgelöscht?
    Ist im Quelltext nicht mehr drin.

    Was mir aufgefallen ist: Wieso hast du eigentlich eine unordered List begonnen (das ist schonmal sehr gut) jedoch die Links des Hauptmenus dann nicht in li-tags gewrappt?

    Ansonsten machst du das schon richtig - hab mir das CSS schnell angeschaut - um den Text der Links mittig auf die Buttongrafik zu plazieren reicht ein "text-align:center" und ein padding-top sowie padding-bottom (für vertikal) - wobei du beachten musst dass durch Padding dein Link (als block-Element formatiert) mehr Platz einnimmt, du das also von der Breite/Höhe (je nachdem was du mit Padding machst) wieder abziehen muss.

  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2006, 15:26

    Hi miwolfram,

    seltsam, da mache ich wohl etwas falsch. Ich habe den DOCTYPE in die HTML-Designvorlage kopiert, aber wenn ich im FE den Quelltext anschaue, dann ist er nicht da.
    Aber wenn ich im FF das Menu ansehe, dann hat sich was geändert, wie in der letzten Post beschrieben.

    Danke noch mal für die Erklärung mit dem Browsermodus.

    Was das Menu angeht (hier ein ausszug aus dem Setup):

    [TS]marks.MENU = HMENU
    marks.MENU.entryLevel = 0
    marks.MENU {

    1 = TMENU
    1 {

    wrap = <ul class="menu_ul"> | </ul>
    entryLevel = 1
    noBlur = 1
    NO {

    #stdWrap.case = lower
    WrapItemAndSub = <li class="menu_li"> | </li>
    #after = <br />
    ATagParams = class = "menu_main"
    # Darstellung fuer Unterpunkte mit Subpunkten
    #
    #IFSUB < .NO
    #IFSUB.ATagParams = class = "menu_main"
    #IFSUB = 1
    #IFSUB.allWrap = class = "ifsub"
    # 10 = TEXT
    # 10.text.field = title
    # 10.offset = 20, 20

    }

    RO < .NO
    RO.ATagParams = class = "menu_mainhover"
    RO = 1
    RO.stdWrap.case = upper

    ACT < .NO
    ACT.ATagParams = class = "menu_mainact"
    ACT = 1
    }[/TS]

    habe ich das m. E. mit <ul> und <li> gewrapt. Aber der Quelltext sagt etwas anderes.

    Was die Ausrichtung der Texte auf den Buttons angeht:
    Mein Problem ist ja, dass der IE und der FF sich unterschiedlich verhalten.
    Wenn ich alles mittig auf den Buttons ausrichte, dann habe ich im FF einen Abstand zwischen den Menupunkten, der im IE nicht da ist und auch nicht da sein sollte. Das macht mich irre.
    Aber seit ich den von dir empfohlenen DOCTYPE verwende, ist der Abstand zumindest zwischen dem vor- und vorvorletzten Menupunkt verschwunden.
    Seltsam, nicht? Und das ohne, dass der Doctype überhaupt übernommen wurde, zum. nicht sichtbar (Cache gelöscht).
    Muss das woanders hin?

    Viele Grüße und vielen Dank für deine Geduld und Zeit,
    Andrea

  • miwolfram miwolfram
    Jedi-Meister
    0 x
    386 Beiträge
    0 Hilfreiche Beiträge
    19. 05. 2006, 12:40

    Nur das was du im resultierenden HTML-Code im Frontend siehst hat Auswirkungen auf das Erscheinungsbild der Seite.

    Typo3 hat nach der Generierung des HTML-Codes [u]absolut gar nichts mehr mit der Seite oder deren Darstellung zu tun[/u], das macht alles der Browser.

    Deshalb: Wenn der Doctype nicht im generierten Quellcode drin ist -> wird er auch nicht ausgewertet.

    Der Doctype in der Designvorlage bringt nix - wird ja nicht übernommen.
    Den musst du per TypoScript setzen - deshalb mein Link zu:
    http://www.typo3.net/tsref/setup/config/#doctype

    in Root-TS schreibst du:
    [TS]config.doctype = xhtml_trans[/TS]

    Wobei du warscheinlich nicht XHTML 1.0 Transitional sondern HTML 4.01 willst.
    In dem Fall schreibst du den Doctype direkt rein (ohne Zeilenumbruch), also:
    [TS]config.doctype = <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/TS]