mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:35 Benutzername: Passwort: Auto-Login

Thema: [CSS] MouseOver Button Problem vom 10.08.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] MouseOver Button Problem
Seite: 1, 2, 3  Weiter
Autor Nachricht
kaSio
Threadersteller

Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 16:39
Titel

[CSS] MouseOver Button Problem

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 17:30
Titel

Antworten mit Zitat Zum Seitenanfang

Inline Elemente können keine width Eigenschaft annehmen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
kaSio
Threadersteller

Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 17:50
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Inline Elemente können keine width Eigenschaft annehmen.


Und was heisst das? Muss ich was rauslöschen?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 17:56
Titel

Antworten mit Zitat Zum Seitenanfang

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/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
kaSio
Threadersteller

Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 19:18
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
kaSio
Threadersteller

Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 20:48
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 21:03
Titel

Antworten mit Zitat Zum Seitenanfang

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;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
kaSio
Threadersteller

Dabei seit: 30.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 10.08.2008 21:37
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS Mouseover Problem
Mouseover Problem
mouseover problem
Mouseover-Stylesheet Problem
Bildergalerie Mouseover andere Position & Mouseover Scroll
Button Problem
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.