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
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
}
/* 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;
}
Hallo zusammen,
mein Problem ist immer noch aktuell. Kann denn wirklich niemand helfen?
Verzweifelt....
Andrea
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
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).
Hallo ihr beiden,
danke für die Unterstützung.
Hier ist der Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hier ist die URL zur Seite:
http://p13490.typo3server.info/index.php?id=811
Es geht um die Abstände zwischen den Buttons.
Das Menu ist, wie gesagt, ein Listenmenu.
Im voraus vielen Dank,
Andrea
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:
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/TopLevelObjects/Config.html#confval-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
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
page.headerData.1 = TEXT
page.headerData.1.value = <script>
alert(document.compatMode); </script>
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
Andrea_Herzog schrieb
In deiner Mail verweist du auf den Switcher...
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.
Andrea_Herzog schrieb
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.
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.
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):
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
}
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
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 absolut gar nichts mehr mit der Seite oder deren Darstellung zu tun, 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:
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/TopLevelObjects/Config.html#confval-config-doctype
in Root-TS schreibst du:
config.doctype = xhtml_trans
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:
config.doctype = <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
:p :p :p :p :p
Hallo miwolfram,
na danke. Super. Das scheint es zu sein. Jetzt sieht es in beiden Browsern gleich aus.
Jetzt muss ich noch die Abstände ändern und er nimmt auch nicht mehr die Linkfarben des Menus aus dem CSS, aber das ist ja wohl zu retten.
Vielen Dank für deine tolle Unterstützung.
Liebe Grüße,
Andrea