Hallo zusammen Ich hoffe Ihr könnt mir helfen und zwar habe ich folgendes Problem:
ich hab ein web template gekauft, ich will nun meiner menü ändern, ich hab es hingekriegt,bei firefox sieht ok aus aber leider bei explorer nicht.
so sieht es bei firefoxso sieht bei explorerhier is meine menü CSS Quelltext: /***** menu *****/…
Hi,
da fehlt einfach der Platz für die Navigation. Und das kann viele Gründe haben, die man in dem CSS-Schippsel nicht erkennen kann.
Deswegen müßtest Du ein wenig mehr Code am besten einen Link liefern, damit man sich das anschauen kann.
Was mich aber auch interessieren würde … wie sahs denn vor deiner Änderung im IE aus?
Grüße,
Dietmar
Hallo,
Danke für die schnelle Antwort, ja das glaub ich auch, wenn ich die breite um 2 px verkleinere dann sieht bei explorer ok aus aber bei firefox wird um 2 px kleiner.
hier ist meine ganze css text:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties ======================================================== */
html {width:100%}
body {font-family:Arial, Helvetica, sans-serif;font-size:100%;color:#222;min-width:1020px;background-image: url(http://corrupteddevelopment.com/post-image/downloads…)}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.bg {width:100%; background:url(…/images/bg-top.jpg) center 0 no-repeat}
.main {width:1020px;padding:0;margin:0 auto;font-size:0.875em;line-height:1.785em}
a {color:#f6a20e; outline:none}
a:hover {text-decoration:none}
.col-1, .col-2,
.column-1, .column-2 {float:left}
.wrapper {width:100%; overflow:hidden; position:relative}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:8px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:40px}
.p5 {margin-bottom:50px}
.reg {text-transform:uppercase}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.it {font-style:italic}
.color-1 {color:#fff}
.color-2 {color:#000}
.color-3 {color:#666}
/*********************************boxes**********************************/
.indent {padding:21px 0 0; position:relative; overflow:hidden}
.indent-left {padding-left:30px}
.indent-right {padding-right:50px}
.indent-bot {margin-bottom:20px}
.indent-bot2 {margin-bottom:30px}
.indent-bot3 {margin-bottom:45px}
.prev-indent-bot {margin-bottom:12px}
.img-indent-bot {margin-bottom:25px}
.margin-bot {margin-bottom:35px}
.margin-top {margin-top:-7px}
.img-indent {float:left; margin:0 20px 0px 0}
.img-indent2 {float:left; margin:0 13px 0px 0}
.img-indent-r {float:right; margin:0 0px 0px 40px}
.buttons a:hover {cursor:stuck_out_tongue:ointer}
.menu li a,
.link,
.button,
.button-2,
h1 a {text-decoration:none}
/*********************************header*************************************/
header {
width:100%;
position:relative;
z-index:2;
}
.row-top {
width:100%;
min-height:101px;
background:url(…/images/row-top-tail.gif) left top repeat-x #f6a20e;
border-radius:9px 9px 0 0;
-moz-border-radius:9px 9px 0 0;
-webkit-border-radius:9px 9px 0 0;
position:relative;
overflow:hidden;
z-index:1;
}
h1 {
float:left;
padding:30px 0 0 59px;
position:relative;
}
h1 a {
display:block;
width:218px;
height:32px;
text-indent:-9999px;
background:url(…/images/logo.png) 0 0 no-repeat;
}
.support {
display:block;
font-size:29px;
line-height:1.2em;
padding:29px 65px 0 30px;
letter-spacing:-2px;
background:url(…/images/pic-1.png) 0 32px no-repeat;
float:right;
}
/***** menu *****/
.menu {
padding:0 0 0 0;
width:100%;
margin-top:-9px;
position:relative;
z-index:2;
}
.menu li {
float:left;
position:relative;
padding-right:2px;
background:url(…/images/menu-spacer.gif) right top repeat-y;
}
.menu li.last {background:none; padding:0}
.menu li a {
display:block;
font-size:22px;
font-weight:400;
line-height:2em;
padding:6px 54px 8px 57px;
color:#fff;
text-transform:capitalize;
letter-spacing:-1px;
background:#2b2b2b;
}
.menu li:first-child a {
padding:6px 0 8px;
width:58px;
text-indent:-9999px;
background:url(…/images/menu-home-icon.png) center center no-repeat #2b2b2b;
border-radius:9px 0 0 9px;
-moz-border-radius:9px 0 0 9px;
-webkit-border-radius:9px 0 0 9px;
}
.menu li.last a {
padding:6px 54px 8px 55px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
}
.menu li a.active,
.menu > li > a:hover {background-color:#222}
/***** slider *****/
.slider-inner {padding-left:284px}
.slider {
position:relative;
width:736px;
height:397px;
float:right;
}
.items {display:none}
.next,
.prev {
display:block;
width:58px;
height:58px;
text-indent:-9999px;
background:url(…/images/slider-control.png) 0 0 no-repeat;
position:absolute;
left:0;
top:47px;
z-index:99;
cursor:stuck_out_tongue:ointer;
}
.next {left:auto; right:0; background-position:left bottom}
.banner1-bg {
width:284px;
height:397px;
background:url(…/images/banner1-bg.jpg) 0 0 no-repeat;
float:left;
}
.banner-1 {
width:376px;
height:397px;
background:url(…/images/banner-1.png) 0 0 no-repeat;
position:absolute;
left:0;
top:0;
z-index:9;
}
/*********************************aside*************************************/
aside {
width:100%;
padding:21px 0;
}
/*********************************content*************************************/
#content {
width:100%;
padding:20px 0;
position:relative;
z-index:1;
}
.spacer-1 {
width:100%;
background:url(…/images/pic-1.gif) 217px 0 repeat-y;
}
h2 {
font-size:44px;
line-height:1.204em;
color:#f6a20e;
text-transform:uppercase;
margin-bottom:6px;
letter-spacing:-4px;
}
h3 {
font-size:36px;
line-height:1.222em;
color:#222;
letter-spacing:-2px;
margin-bottom:22px;
}
h4 {
font-size:28px;
line-height:58px;
color:#222;
letter-spacing:-1px;
}
h6 {color:#000}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(…/images/pic-1.gif) 0 bottom repeat-x;
}
.box {
width:100%;
color:#ccc;
background:url(…/images/box-title-tail.gif) left top repeat-x #f6a20e;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.box .padding {padding:25px 10px 0 30px}
.box-bg {
width:100%;
padding-bottom:24px;
background:url(…/images/box-tail.gif) left top repeat-x #222;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.button {
display:inline-block;
padding:6px 30px;
font-size:21px;
line-height:1.238em;
letter-spacing:-1px;
color:#2b2b2b;
border:2px solid #fff;
background:url(…/images/button-tail.gif) 0 0 repeat-x #dbdbdb;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
cursor:stuck_out_tongue:ointer;
}
.button:hover {background:#dbdbdb}
.button-2 {
display:inline-block;
padding:7px 23px 8px;
font-size:21px;
line-height:1.238em;
letter-spacing:-1px;
color:#fff;
background:url(…/images/button2-tail.gif) 0 0 repeat-x #222;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
cursor:stuck_out_tongue:ointer;
}
.button-2:hover {background:#f6a410}
.list-1 li {
line-height:21px;
padding:2px 0 2px 20px;
background:url(…/images/marker-1.png) 0 8px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#222;
}
.list-1 li a:hover {text-decoration:none}
.list-2 li {
line-height:25px;
padding:0px 0 12px 20px;
background:url(…/images/marker-1.png) 0 8px no-repeat;
}
.list-2 li.last-item {padding:0 0 0 20px}
.list-2 li a {
display:inline-block;
color:#222;
}
.list-2 li a:hover {text-decoration:none}
.price-list li {
width: 100%;
overflow: hidden;
vertical-align: top;
line-height: 21px;
padding:2px 0;
color: #222;
}
.price-list strong {
background: url(…/images/pic-2.gif) repeat-x 0% 17px;
display: block;
overflow: hidden;
}
.price-list span {
float: right;
color: #222;
}
.price-list li a {
float: left;
text-decoration: none;
color: #222;
}
.price-list li a:hover {color:#F6A20E}
.link:hover {text-decoration:underline}
.link-1 {
display:inline-block;
font-size:14px;
padding-right:8px;
background:url(…/images/marker-3.gif) right 8px no-repeat;
}
.link-1:hover {color:#fff}
.text-1 {line-height:23px}
.text-2 {font-size:14px; line-height:1.285em}
dl span {float:left}
dl strong {float:right; font-weight:normal}
dl dd {width:100%; overflow:hidden}
/***** contact form *****/
#contact-form {display:block}
#contact-form label {
display:block;
height:37px;
overflow:hidden;
}
#contact-form input {
float:left;
width:265px;
font-size:12px;
line-height:1.25em;
color:#222;
padding:6px 10px 7px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #ff8c00;
background:url(…/images/input-tail.gif) 0 0 repeat-x;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
outline:none;
}
#contact-form textarea {
float:left;
height:238px;
width:524px;
font-size:12px;
line-height:1.25em;
color:#222;
padding:6px 10px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #ff8c00;
background:url(…/images/area-tail.gif) 0 0 repeat-x;
overflow:auto;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:2em;
width:83px;
color:#222;
font-family:Arial, Helvetica, sans-serif;
}
.buttons {padding:15px 0 0 0; text-align:right}
.buttons a {margin-right:8px; padding:8px 32px}
/****************************footer************************/
footer {
width:100%;
height:132px;
color:#fff;
text-align:center;
position:relative;
overflow:hidden;
z-index:9;
}
.footer-bg {
width:100%;
padding:18px 0 25px;
background:#2b2b2b;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
.list-services {
padding:0;
width:112px;
margin:0 auto;
overflow:hidden;
}
.list-services li {
float:left;
padding:0 0 0 8px;
}
.list-services li:first-child {padding:0}
.list-services li a {
display:block;
width:32px;
height:32px;
text-indent:-9999px;
background:url(…/images/social-icons.png) 0 0 no-repeat;
}
.list-services li.item-1 a {background-position:-40px 0}
.list-services li.item-2 a {background-position:-80px 0}
#easyTooltip{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:4px 8px;
color:#fff;
border:1px solid #fff;
background:#222;
position:relative;
z-index:99;
}
/*********extra***********/
.block {height:132px}
.extra {
min-height:100%;
height:auto !important;
height:100%;
margin: 0 auto -132px;
position:relative;
overflow:hidden;
}
html, body {height:100%}
oooh,
das kann ich doch gar nicht alles lesen … außerdem, mein erster Blick geht bei sowas immer auf den HTML-Code, und erst der zweite auf den CCS-Code.
Deswegen … am besten nen Link, dann sieht man alles relevante.
Moin,
hier ist meine ganze css text:
Mit CSS-Code alleine kann man gar nichts anfangen, denn CSS alleine hat keinerlei Auswirkung. Und bevor Du jetzt auch noch den HTML-Code dazu postest, poste bitte einen Link. Mit vollständig gepostetem Code wirst Du kaum Antworten bekommen. Mit Link kann man weiter sehen.
Grüße,
-Efchen
Hallo,
hier ist der link zu Seite, vielleicht kann mir jemanden helfen:
http://lernstart.de/ows/index2.html
danke
ja, so wird das nicht gehen …
Die Größe Deiner einzelnen Buttons ist unbestimmt und hängt von der Länge des Textes plus einem linken und rechten Abstand ab. Da wirst Du niemals wissen, wanns passt.
Wenn Du bei Deinem bisherigen Code bleiben willst, nimm in der style.css unter
.menu li a
und
.menu li.last a
die Zeile
padding:6px 53px 8px 56px
raus.
Dann setz die Breite in .menu li a auf
width:190px;
und leg dort auch mit line-heigt die Höhe der Buttons fest.
Am Ende fehlen Dir dann noch ein oder zwei Pixel. Diesen Fheler kannst Du ganz einfach bei irgendeinem Button mit style=„padding-left:1px;“ oder style=„padding-right:1px;“ ausgleichen.
Ich hoffe das war verständlich 
Moin,
Die Größe Deiner einzelnen Buttons ist unbestimmt und hängt
von der Länge des Textes plus einem linken und rechten Abstand
ab.
Ja, so sollte ein Menü aussehen.
Dann setz die Breite in .menu li a auf
width:190px;
Auf eine feste Breite? Und wenn dann jemand die Schrift größer gestellt hat, weil sie ihm sonst zu klein ist? Dann wird das Menü gesprengt.
Ich hoffe das war verständlich
Aber nicht unbedingt anwendbar.
Grüße,
-Efchen
Moin,
erstmal vorweg: Dein HTML-Code hat lt. Validator noch 26 Fehler, teilweise essenzielle. Da steckt hinter dem Menü z.B. eine geöffnete Tabelle, die nie geschlossen wird und die Verschachtelung der Tags stimmt dann nicht mehr.
Semantisch stimmt da auch einiges nicht, ich sehe ein h1 und ein h3, aber kein h2. Selbst mit HTML5, wo die Reihenfolge der Überschriften etwas anders funktioniert, kann das nicht sein.
Dein eigentliches Problem ist mit erst mit der Seite und mit dem Komentar von Dietmar aufgefallen: Du ärgerst Dich darüber, dass der letzte Menüpunkt in die neue Zeile rutscht?
Die Lösung dafür ist einfach: Du machst nichts falsch, und nur so ist es richtig. Was Dietmar vorschlägt, wäre eine Verschlechterung Deines Layouts.
Dein letzter Menüpunkt passt einfach nicht mehr in die selbe Zeile, daher muss er natürlich in die nächste Zeile - daran ist nichts falsch. Wenn man den zwingen wollte, in der Zeile zu bleiben hätte das zwei mögliche, unangenehme Konsequenzen:
a) Es könnten horizontale Scrollbalken kommen, aber nur im Menü!
b) Der Text wäre nicht mehr lesbar (das passiert ganz sicher bei der Variante von Dietmar).
Denn es ist nunmal eine unbekannte Variable, wie groß der Text ist. Andere Menschen, andere Gewohnheiten, andere Augen. Im Browser kann die Textgroße voreingestellt werden, die ist nicht bei jedem 16px groß. Offensichtlich ist sie bei Deinen beiden Browsern ja auch unterschiedlich. Den Buttons eine feste Breite zu geben, wäre nicht hilfreich, wenn der Nutzer die Schrift vergrößert hat. Er würde nicht mehr alles sehen.
Webseiten zu erstellen ist nicht nur Text schreiben, ein paar divs außen rum und dann CSS draufklatschen. Webseiten zu erstellen ist auch, sich mit den Möglichkeiten auseinander zu setzen, die jeder Bediener hat. Deswegen ist Webdesign ja auch so völlig anders als Printdesign.
Das Layout, das Du gekauft hast, ist also offensichtlich nicht wirklich verkehrt, sondern achtet an der Stelle darauf, dass das Menü trotzdem dargestellt werden kann, auch wenn der Nutzer die Schrift größer gestellt hat oder wenn er ein kleines Display (oder einen kleinen Viewport) hat. Dietmars Lösung wäre ein Schritt in die falsche Richtung.
Es passt alles an der Breite Deines Menüs!
Liebe Grüße,
-Efchen
P.S.: Wenn Du Deine Site im Bereich „Mitgliederseiten“ vorstellst, kann man noch detaillierter auf den ein oder anderen Patzer eingehen, der da jetzt noch drin ist.
Hallo Dietmar, vielen Dank für Ihre Hilfe, jetzt klapt es, danke nochmals.
Die Größe Deiner einzelnen Buttons ist unbestimmt und hängt
von der Länge des Textes plus einem linken und rechten Abstand
ab.Ja, so sollte ein Menü aussehen.
das ist wo festgelegt?
Auf eine feste Breite? Und wenn dann jemand die Schrift größer
gestellt hat, weil sie ihm sonst zu klein ist? Dann wird das
Menü gesprengt.
wer die Schrift größer stellt, sollte wissen, dass er das gewünschte Aussehen verändert. Und wie Du gesehen hast, wurde doch wohl gerade durch die flexible Größe in diesem Fall das Menü gesprengt.
Aber nicht unbedingt anwendbar.
Man kann auf vieles einfach verzichten, um irgendwelche Konformitäten zu erreichen. Will man aber nunmal ein bestimmtes Layout erreichen, muss man halt auch mal den Navigationselementen feste Größen zuweisen.
Ich seh da kein Problem und prima anwendbar ists auch.
Grüße,
Dietmar
Hallo ,#
vielen Dank für Ihre Hinweise, ich werde die seite noch bearbeiten. meine html kenntnisse ist nicht so schlecht, ich werde die seite wie gesagt bearbeiten und werde sie hier vorstellen. vielen dank nochmals an alle für die hilfe
Die Lösung dafür ist einfach: Du machst nichts falsch, und nur
so ist es richtig. Was Dietmar vorschlägt, wäre eine
Verschlechterung Deines Layouts.
Ach!?
Dein letzter Menüpunkt passt einfach nicht mehr in die selbe
Zeile, daher muss er natürlich in die nächste Zeile - daran
ist nichts falsch. …
sowas nenn dann aber bitte bitte bitte nicht Web design.
Dietmars Lösung wäre ein Schritt in die falsche Richtung.
Ich bin mir nicht sicher, ob der Wunsch nach horizontalen Navigationen, die irgendwo umbrechen, in eine richtige Richtung weißt.
Sowas würde mir sicher oftmals viel Arbeit ersparen … allerdings auch deswegen, weil die Kunden bald wegblieben.
Hallo Dietmar,
gleich vorweg, ich habe wenig Ahnung von CSS und Null von Webdesign. Meine Bemerkung soll und kann also kein Urteil in deiner Diskussion mit Efchen sein.
wer die Schrift größer stellt, sollte wissen, dass er das
gewünschte Aussehen verändert.
Will man aber nunmal ein
bestimmtes Layout erreichen, muss man halt auch mal den
Navigationselementen feste Größen zuweisen.
Ich seh da kein Problem und prima anwendbar ists auch.
Aber für den Betrachter kann es schon ein Problem sein und ob es „prima anwendbar“ ist, ist dann auch die Frage.
Ich bin in dem Alter, wo ich oft notgedrungen die Schrift vergrössern muss um noch was lesen zu können. Und da passiert es tatsächlich manchmal, daß ich ganz schlecht oder gar nicht mehr navigieren kann, weil es die Menus irgendwie „gesprengt“ werden, sprich Textteile verschwinden, oder andere merkwürdige Effekte treten auf. Oft hilft es mir dann, im Browser „Kein Stil“ einzustellen, also CSS auszuschalten. Da ist dein schönes Design auch hinüber, aber ich kann wenigstens alles lesen.
Solltest Du vielleicht in auch in deine Designüberlegungen einbeziehen.
Viele Grüße
Marvin
Hallo Marvin,
Solltest Du vielleicht in auch in deine Designüberlegungen
einbeziehen.
wieso ich in meine?
Nach denen ist doch hier doch garnicht gefragt gewesen.
Sondern ganz simpel danach, wie man ein bestimmtes Layout hinbekommt. Und dieses Layout und die von Dir verständlicherweise gewünschte Barrierefreiheit passen halt nicht zusammen.
Aber zu meinen persönlichen Designüberlegungen kann ich soviel sagen, dass mir die Problematik sehr bewusst ist, und ich auch schon barrierefreie Seiten erstellt habe (weil der Auftraggeber das wollte), aber ich natürlich in aller erster Linie nicht für Anwender Arbeite, die auf Barrierefreiheit Wert legen, sondern für Auftraggeber, die einen bestimmten Layoutwunsch haben. Wenn ich denen mit Barrierefreiheit kommen würde, wär ich den Auftrag gleich wieder los. Was mir in meiner Arbeit also bleibt, ist ein Seite so zu erstellen, dass sie, wenn jemand an der Schriftgröße spielt, möglichst noch funktionstüchtig ist - mehr geht aber in der Regel nicht, da will halt keiner für bezahlen.
Viele Grüße
Marvin
Und Gruß zurück
Dietmar
Moin,
aber ich natürlich in aller erster
Linie nicht für Anwender Arbeite, die auf Barrierefreiheit
Wert legen, sondern für Auftraggeber, die einen bestimmten
Layoutwunsch haben.
Autsch. Es ist traurig, das zu lesen.
Du hast mein aufrichtiges Beileid.
Freundliche Grüße,
-Efchen
Guten Morgen!
Ich bin in dem Alter, wo ich oft notgedrungen die Schrift
vergrössern muss um noch was lesen zu können.
Es ist ungeheuer wichtig, dass Leute wie Du mal ihre Probleme an den Stellen aussprechen, wo sich die „Experten-Webdesigner“ rumtreiben, dass denen mal die Augen geöffnet werden, dass Barrierefreiheit nicht ein Bonus ist, sondern selbstverständlich sein sollte.
Liebe Grüße,
-Efchen
P.S.: Das war eine allgemeine Aussage und nicht auf bestimmte Personen in diesem oder anderen Threads bezogen.
„Barrierefreiheit“ kann keine Forderung an den Dienstleister sein, sondern nur an den Auftraggeber.
Gruß
Dietmar
Aha.