Autor |
Nachricht |
kaSio
Threadersteller
Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 16:39
Titel [CSS] MouseOver Button Problem |
|
|
Hallo,
ich hoffe so ein Thema gibt es noch nicht, hab ein bißchen rumgesucht aber nichts gefunden.
Wie aus der Überschirft schon hervorgeht hab ich ein CSS Problem ziwschen IE und Firefox.
Beim IE zeigt es alles normal an so wie ich es programmiert hab.
Internet Explorer v7.0:
Aber im Firefox sind die Kasten nur so breit und hoch, so groß wie die Schrift ist.
Firefox v2.0:
Kann mir vielleicht einer weiterhelfen, probier schon lang den Fehler zu beheben. Vielen Dank!
Was ich noch dazu sagen muss, ich bin ein Neuling in CSS.
Hier ist der Code:
Code: | <style type="text/css">
<!--
#menu01 {
width:954px;
margin: 0px;
padding:0px;
}
#menu01 ,#menu01 {
margin: -4px;
padding: 0px;
}
#menu01 a:link , #menu01 a:visited {display:inline;height:36px;
line-height:300%;width:106px;
background-image:url(../bt/assets/images/MouseOver/mouseover_01.jpg);
color:#5A5B5D;
text-decoration:none;
text-align:center;
font-size: 10px;
font-family: verdana, sans-serif;
padding:0px;
margin:-2px;
}
#menu01 a:hover , #menu01 a:active {background-color:#FEFFFF;
background-image:url(../bt/assets/images/MouseOver/mouseover_02.jpg);
color:#03AFAF;}
-->
</style>
<div id="menu01">
<a href="/bt/html/de_wir_ueber_uns.html" onfocus="this.blur()">Wir über uns</a>
<a href="...
...
</div> |
mfg kaSio
Zuletzt bearbeitet von kaSio am So 10.08.2008 16:41, insgesamt 1-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 17:30
Titel
|
|
|
Inline Elemente können keine width Eigenschaft annehmen.
|
|
|
|
|
Anzeige
|
|
|
kaSio
Threadersteller
Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 17:50
Titel
|
|
|
m hat geschrieben: | Inline Elemente können keine width Eigenschaft annehmen. |
Und was heisst das? Muss ich was rauslöschen?
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 17:56
Titel
|
|
|
Nein, obwohl die display: inline; Eigenschaft auf ein Inline Element anzuwenden ist
natürlich überflüßig sollte klar sein und daher kannst du sie entfernen bzw musst du
sie eben durch die display: block; Eigenschaft ersetzen.
Am besten schaust du dir mal ein paar anständige Beispiele an, Google hilft dir
da sicher weiter "CSS Listen","CSS Menus", usw. z.B. http://css.maxdesign.com.au/listutorial/
|
|
|
|
|
kaSio
Threadersteller
Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 19:18
Titel
|
|
|
Ich komme mit dem tutorial soweit ganz gut zurecht, bloss ich weiss nicht wie ich das dann auf meine Situation anwenden kann.
Kann mir da vielleicht einer weiterhelfen?
Wie muss ich weiter machen? Wie bekomm ich es hin, das ich keine größe beim MouseOver Bild eingeben muss, sondern dass es immer die größe nimmt so groß wie das bild ist? Hab auch die "width" und "height" aus code gelöscht.
Ich hab jetzt erstmal alles so geändert.
<div id="menu01">
<ul>
<li><a href="/bt/html/de_wir_ueber_uns.html">Wir über uns</a></li>
...
</ul>
</div>
Kann man von dem CSS Code von mir noch was retten? oder soll ich nochmal komplett von vorne anfangen?
|
|
|
|
|
kaSio
Threadersteller
Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 20:48
Titel
|
|
|
Ich hab es versucht mit dem "Horizontale Navigationsleiste mit gleichen Breiten" Code von http://de.selfhtml.org/css/layouts/navigationsleisten.htm hinzubekommen, aber es funktioniert nicht.
Ich hab mich jetzt entschieden doch kein Bild als Background zu nehmen. Ich wäre dir echt verbunden oder jemand anders der mir das kurz machen kann, das müsste doch eigenltich schnell gehen für jemand der es kann. ich möcht mich nicht so viel damit rumschlagen, da ich noch andere sachen an der page machen muss. Mit CSS muss ich mich erst noch ausführlicher beschäftigen.
Also ich hab mir das so vorgestellt:
- Breite der gesamten Navigationsleiste: 954px
- Breite von jedem einzelnen Button: 106px (9 Buttons x 106px = 954px)
- Höhe der Button: 28px
- In Reihe (display: inline)
Ich wäre euch echt dankbar. Mein Chef macht da ein bißchen Druck und ich hab gesagt ich bekomm das hin, die homepage fertigzustellen. Also bitte, bitte helft mir.
mfg kaSio
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 21:03
Titel
|
|
|
Anstatt die Listenelemente mit display:inline; nebeneinander zu positionieren, solltest du die float Eigenschaft
nutzen und den Elementen eine feste Breite und Höhe zuweisen.
Code: | ul li {
float: left;
height: 28px;
width: 106px;
} |
|
|
|
|
|
kaSio
Threadersteller
Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 10.08.2008 21:37
Titel
|
|
|
Kannst du den Code von meinem ersten Post so umändern , dass es nachher stimmt? Auch das einfügen was du als letztes gepostet hast? Wie gesagt ich kenn mich nicht so gut in CSS aus. Vielen Dank.
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS Mouseover Problem
Mouseover Problem
mouseover problem
Mouseover-Stylesheet Problem
Bildergalerie Mouseover andere Position & Mouseover Scroll
Button Problem
|
|