[CSS] MouseOver Button Problem

[kaSio]

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:

<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

[Kai345]

[latex]Mae  govannen![/latex]

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.

^^                ^^^^^^ hüstel           ^^^^^^^^^^^^ hüstel

:=)

Firefox v2.0:> Internet Explorer v7.0:

Aber im Firefox sind die Kasten nur so breit und hoch, so groß wie die Schrift ist.
Firefox

#menu01 a:link , #menu01 a:visited {display:inline;height:36px;
line-height:300%;width:106px;

IE ist blöde. Bei einem Inline-Element darf width und height keine Auswirkung haben, insofern hat Firefox hier recht.
Was du _eigentlich_ suchst, ist display:inline-block, wozu jedoch wiederum der Firefox(V2) zu blöde ist, du mußt also für den eine Extrawurst braten. :(

Cü,

Kai

[Matze]

Hallo!

Der IE zeigt es nicht wie du es gemacht hast sondern wie du es gern hättest.
Was du gemacht hast ist nämlich falsch.

Ein a-Elemente ist ein Inline-Element, du suchst aber nach einem Block-Element.
Für Menüs sind Listen ganz gut geeignet, Listenpunkte sind Blockelemente.

Beschäftige dich also mit Inline- und Block-Elementen.

Es wäre zwar sementisch nicht ganz korrekt, du könntest aber den a-Elementen die CSS-Eigenschaft display:block geben und hättest dein Ergebnis.

Grüße, Matze

[keine_Ahung]

Hallo,

also ich hab nicht viel Ahnung von html und CSS aber ich glaube ich hab meine Navigation so gemacht wie sie haben willst mit diesem CSS:

  
/* Hauptnavigation */  
.Links1 {  
 color:#000000;  
 font-size:12px;  
 font-weight:bold;  
 text-decoration:none;  
 margin-left:+33px;  
 }  
.Links2 {  
 color:#000000;  
 font-size:12px;  
 font-weight:bold;  
 text-decoration:none;  
 margin-left:+54px;  
 }  
#box {  
 text-align:left;  
 line-height:29px;  
 margin-bottom:15px;  
 }  
.menu{  
 display:block;  
 width:180px;  
 height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_0.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
.menu:hover{  
 display:block;  
 width:180px;  
 height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_1.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.menu_o{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_oben_0.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.menu_o:hover{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_oben_1.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.menu_u{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_unten_0.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.menu_u:hover{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Punkt_unten_1.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.umenu{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Unterpunkt_0.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  
a.umenu:hover{  
 display:block;width:180px;height:29px;  
 background-image:url(../navigation/grafik_mac/Unterpunkt_1.jpg);  
 background-repeat:no-repeat;  
 text-decoration:none;  
 }  

Vielleicht irre ich mich auch aber ich hab bis jetzt von niemanden Beschwerden gehört, dass es nicht gehen würde. Kannst es dir ja mal ansehen.

[Matze]

Hallo!

also ich hab nicht viel Ahnung von html und CSS aber ich glaube ich hab meine Navigation so gemacht wie sie haben willst mit diesem CSS:

Dasselbe nochmal für dich:
Ein Menü ist eine Liste von Menüpunkten, deshalb sollten sie auch in einem Menü verpackt werden.
Menüs und Menüpunkte sind Block-Elemente.
Es ist also völlig zweckfrei und semantisch falsch die a-Elemente mit display:block zu versehen.

Grüße, Matze

[Matze]

Ein Menü ist eine Liste von Menüpunkten, deshalb sollten sie auch in einem Menü verpackt werden.

(...), deshalb sollte es auch in einer Liste verpackt werden.
So sollte es heißen, sorry.
Trotzdem kein schöner Satz merk ich grad^^

Grüße, Matze

[kaSio]

Matze kannst du mir vielleicht helfen. damit ich das heute nich gut hinbekomme?

Ich verlang da vielelicth etwas viel, aber du würdest mir echt dabei helfen. 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?

Ich hab das Tutorial hier gefunden, aber da ist die breite immer anders und die verwenden auch keine Background Bilder

http://css.maxdesign.com.au/listutorial/horizontal_master.htm

[Matze]

Hallo!

Matze kannst du mir vielleicht helfen. damit ich das heute nich gut hinbekomme?

Du willst es _nicht_ gut hinbekommen? ;D

<div id="menu01">
<ul>
<li><a href="/bt/html/de_wir_ueber_uns.html">Wir über uns</a></li>
...
</ul>
</div>

Da eine Liste (das ul-Element) bereits ein Block-Element zur Gruppierung von Elementen (Listenpunkten) ist, kannst du dir das Div darum sparen sofern es ausschließlich die Liste enthält.
Die Liste selbst formatierst du dann wie das Div-Element.
Eventuell noch margin und padding auf 0 setzen und die Eigenschaft list-style:none um die "Bullets" vor den Listenpunkten zu vermeiden.

Da du ein horizontales Menü haben möchtest, eine Liste für gewöhnlich aber vertikal dargestellt wird, musst du den li-Elementen die nötigen Eigenschaften geben: float:left. Anschließend gibst du den li-Elementen die Höhen- und Breitenangaben und richtest den Text darin aus. Et voilâ.

Kann man von dem CSS Code von mir noch was retten? oder soll ich nochmal komplett von vorne anfangen?

Ich kenne deinen CSS-Code nicht.
Schau dir bitte die Beispiele hier an.
Dann versuchst du dein Menü so zu basteln wie du es haben willst.
Dort wo du Probleme hast, können wir dir dann helfen.
Dazu kannst du dann die Ausschnitte deines CSS- und HTML-Codes posten,
damit wir wissen wie dein aktueller Stand ist.

Ich hab das Tutorial hier gefunden, aber da ist die breite immer anders und die verwenden auch keine Background Bilder
http://css.maxdesign.com.au/listutorial/horizontal_master.htm

Das Beispiel ist eigentlich perfekt.
Die Breite der Punkte im Beispiel kannst du hier festlegen:
#navcontainer ul li { display: inline; }
Das Beispiel verwendet auch keine Hintergrundbilder.

Noch ein Beispiel von mir:
CSS

  
ul {  
 margin:0;  
 padding:0;  
 list-style:none;}  
li {  
 float:left;  
 border:thin solid black;  
 width:50px;  
 height:40px;  
 text-align:center;}  
li:hover {  
 background:#CCCCCC;}  

HTML

  
<ul>  
  <li>test</li>  
  <li>test</li>  
  <li>test</li>  
  <li>test</li>  
</ul>  

Das ul-Element und die li-Elemente kannst du formatieren wie du willst.

Grüße, Matze

[kaSio]

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

[kaSio]

Habs nochmal probiert, jetzt sieht es so aus:

Wie bekomm ich das jetzt hin das alles zentriert ist und nicht so eine große spalte zwischen Header und Button ist?

Wie kann ich die Schrift vertikal zentrieren, dass sie in der mitte der Buttons sind.

<style type="text/css">  
<!--  
 #nav ul li  
{  
margin: 0;  
padding: 0;  
list-style-type: none;  
text-align: center;  
}  
  
#nav ul li { float: left;  
   height: 28px;  
   width: 106px; }  
  
#nav ul li a  
{  
float: left;  
   height: 28px;  
   width: 106px;  
text-decoration: none;  
font-size: 10px;  
font-family: verdana, sans-serif;  
margin: 0;  
padding: 0;  
color: #5A5B5D;  
background-color: #F0F0F0;  
}  
  
#nav ul li a:hover  
{  
color: #04AFAF;  
background-color: #FFFFFF;  
}  
-->  
</style>

[Matze]

Hallo!

Habs nochmal probiert, jetzt sieht es so aus:

Wie bekomm ich das jetzt hin das alles zentriert ist und nicht so eine große spalte zwischen Header und Button ist?

Keine Ahnung wieso bei dir ein Abstand ist.
Schreibe ich z.B.:

  
<img src="dummy.jpg" alt="dummybild" width="954" height="100"/>  
<div id="nav">  
<ul>  
  <li><a href="....  

ist bei mir zwischen Bild und Menü kein Abstand.

Wie kann ich die Schrift vertikal zentrieren, dass sie in der mitte der Buttons sind.

Also...

#nav ul li
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

Das hat dir niemand gesagt.
Du solltest es so machen:
#nav ul {
    margin:0;
    paddinng:0;
    list-style:none;}

#nav ul li { float: left;
   height: 28px;
   width: 106px; }

Wenigstens das ist richtig.
Füg noch text-align:center;, background-color:#F0F0F0; und padding-top:2px; (geschätzt) für deine vertikale Zentrierung hinzu und du wirst glücklich.

#nav ul li a
{
float: left;
   height: 28px;
   width: 106px;
text-decoration: none;
font-size: 10px;
font-family: verdana, sans-serif;
margin: 0;
padding: 0;
color: #5A5B5D;
background-color: #F0F0F0;
}

Völliger Blödsinn. Erstmal floatet nicht der Link sondern der Listenpunkt.
Dann ist ein a-Element ein Inline-Element, es kann also nicht ohne weiteres Breiten- und Höhenangaben verpasst bekommen. Es ist auch Unsinn margin und padding auf 0 zu setzen. Ein Link hat sowas von Haus aus schon nicht.
Und dir ist schon klar, dass 10px extrem klein sind?

#nav ul li a:hover
{
color: #04AFAF;
background-color: #FFFFFF;
}

Ob das das ist was du willst...
Versuch stattdessen
#nav li:hover, #nav li:hover a{
 color: #04AFAF;
 background:#FFFFFF;}

Und noch einmal die Frage wozu du das überflüssige Div um die Liste herum brauchst?!

Zu deinem Problem mit deinem Chef sag ich mal
1. Ist das nicht mein Problem. Wenn du ihm sagst du würdest etwas machen solltest du auch vorher wissen ob du dazu überhaupt in der Lage bist.
2. Bringen solche Andeutungen hier nichts, im Gegenteil. Es klingt wie eine Hausaufgabe die jetzt andere für dich erledigen sollen.
3. Bitte deinen Chef um mehr Zeit mit dem Hinweis, dass du noch das ein oder andere Problem lösen musst.

Grüße, Matze

[Kai345]

[latex]Mae  govannen![/latex]

Wie bekomm ich das jetzt hin das alles zentriert ist und nicht so eine große spalte zwischen Header und Button ist?

Keine Ahnung wieso bei dir ein Abstand ist.

Vielleicht Unterschiede in den browseinternen Stylesheets? Ich sehe in kaSios CSS jedenfalls kein „Zurücksetzen“ der ul-eigenen margins (und ggf. paddings) auf 0, was man bei solcher Verwendung von Listen immer machen sollte.

Cü,

Kai

[kaSio]

Hi Matze,
sorry, dass ich euch gestern darum gebeten hab mir das zu machen. Ich war nur echt verzweifelt. Hab mich aber dann nochmal mir deiner Hilfe dran gesetzt und jetzt klappt fast alles. Hab jetzt doch wieder ein Background-Image genommen.

Im Firefox sieht jetzt alles super aus, aber im IE gibts noch ein kleines Problem.
Da ist noch ein kleiner Abstand zwischen Header und Buttons. Liegt das vielleicht am "div" Code?

<style type="text/css">  
<!--  
 #nav ul  
{  
margin: 0;  
padding: 0;  
list-style-type: none;  
background-color: #FFFFFF;  
}  
  
#nav ul li { float: left;  
   height: 28px;  
   width: 106px;  
   text-align:center;  
   padding-top:0px; }  
  
#nav ul li a  
{  
float: left;  
   height: 28px;  
   width: 106px;  
line-height: 250%;  
text-decoration: none;  
font-size: 10px;  
font-family: verdana, sans-serif;  
margin: 0;  
padding: 0;  
color: #5A5B5D;  
background-image:url(../bt/assets/images/MouseOver/mouseover_01.jpg);  
}  
  
#nav ul li a:hover  
{  
color: #04AFAF;  
background-image:url(../bt/assets/images/MouseOver/mouseover_02.jpg);  
}  
-->  
</style>

<div id="nav">  
<ul>  
<li><a href="/bt/index.html">BRANDTRONIK</a></li>  
...  
</ul>  
</div>

mfg kaSio

[Matze]

Hallo!

Im Firefox sieht jetzt alles super aus, aber im IE gibts noch ein kleines Problem.

Das ist doch schonmal was.

Da ist noch ein kleiner Abstand zwischen Header und Buttons. Liegt das vielleicht am "div" Code?

3px Bug? Dürfte hier eigentlich nicht auftreten. Öähm und mit welcher Version des IE hast du getestet?

<style type="text/css">

<!--
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
background-color: #FFFFFF;
}

  
Lass die Hintergrundfarbe weg.  
  

> ~~~css
  

> #nav ul li { float: left;  
>    height: 28px;  
>    width: 106px;  
>    text-align:center;  
>    padding-top:0px; }  
> 

Wenn du Padding auf 0 setzt kannst du die Angabe hier auch weg lassen.

#nav ul li a
{
float: left;
   height: 28px;
   width: 106px;
line-height: 250%;
text-decoration: none;
font-size: 10px;
font-family: verdana, sans-serif;
margin: 0;
padding: 0;
color: #5A5B5D;
background-image:url(../bt/assets/images/MouseOver/mouseover_01.jpg);
}

Wie gesagt ist das völliger Mist. Lasse ich die Angaben ohne Effekt weg, bleibt noch folgendes übrig:

#nav ul li a
{
line-height: 250%;
text-decoration: none;
font-size: 10px;
font-family: verdana, sans-serif;
color: #5A5B5D;
background-image:url(../bt/assets/images/MouseOver/mouseover_01.jpg);
}

  
Wobei ich mir grad nicht sicher bin, ob line-height hier einen Effekt hat.  
Und das Hintergrundbild gehört in das li-, nicht in das a-Element.  
Dann zum x-ten mal: Ein Link ist ein Inline-Element. Inline-Elementen kann man keine Breiten- und Höhenangaben verpassen. Lass also Breite und Höhe beim a-Element einfach weg.  
  
  
Grüße, Matze  
  

[kaSio]

Ok, hab verstanden. ;-) Hab alles geändert.

Ich weiss an was das liegt das der 4px Abstand entsteht. Es ist der Bild-Header. Wenn ich nämlich einen Flash-Header nehme tritt das nicht auf.

Den Code hab ich für den Flash-Header genommen, kann ich den Code auch irgendwie für ein jpg Bild benutzen?

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="954" height="155">  
  <param name=movie value="/bt/assets/images/Banner.swf">  
  <param name=quality value=high>  
  <embed src="/bt/assets/images/Banner.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="954" height="155">  
  </embed>  
</object>

[Matze]

Ok, hab verstanden. ;-)

Sicher?

Hab alles geändert.

Hast du?

Ich weiss an was das liegt das der 4px Abstand entsteht. Es ist der Bild-Header. Wenn ich nämlich einen Flash-Header nehme tritt das nicht auf.

Bitte sag bei solchen Äusserungen den Browser und die Version dazu an. Ich versteh es nämlich nicht. Sowohl ein object-, als auch ein img-Element sind block-Elemente und sollten sich mit den selben Höhen- und Breitenangaben gleich verhalten.

Ich kann dich nicht mehr ganz nachvollziehen.
Welche Browser/-versionen testest du, welchen Doctype benutzt du (HTML, XHTML, Strict oder Transitional...)? Vielleicht haben wir völlig unterschiedliche Ergebnisse mit identischem Code.

Ich bat dich darum deine aktuellen Codeauschnitte zu posten. Wie sieht also jetzt dein betroffener CSS- und HTML-Code aus?
Dieser merkwürdige Abstand deutet darauf hin, dass <ul> kein margin und padding 0 bekommen hat.

Abschließend noch meine aktuelle Datei für dein Problem (wie du siehst ohne Abstand zwischen Bild und Menü {"bild.jpg" muss im selben Verzeichniss wie die HTML-Datei liegen und "bild.jpg" heißen}):

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
<!--  
#nav ul {  
 margin:0;  
 padding:0;  
 list-style:none;}  
#nav li {  
 float:left;  
 width:106px;  
 height:26px;  
 padding-top:2px;  
 background-color:#F0F0F0;  
 text-align:center;}  
#nav li a {  
 color: #5A5B5D;  
 text-decoration: none;  
 font-size: 10px;  
 font-family: verdana, sans-serif;}  
#nav li:hover, #nav li:hover a{  
 color: #04AFAF;  
 background:#FFFFFF;}  
-->  
</style></head>  
  
<body>  
<img src="bild.jpg" alt="bild" />  
<div id="nav">  
<ul>  
  <li><a href="index.html">test1</a></li>  
  <li><a href="index.html">test2</a></li>  
  
  <li><a href="index.html">test3</a></li>  
  <li><a href="index.html">test4</a></li>  
  <li><a href="index.html">test5</a></li>  
  <li><a href="index.html">test6</a></li>  
  <li><a href="index.html">test7</a></li>  
  <li><a href="index.html">test8</a></li>  
  <li><a href="index.html">test9</a></li>  
</ul>  
</div>  
</body>  
</html>  

Geht doch!?

Grüße, Matze

[MudGuard]

Hi,

Sowohl ein object-, als auch ein img-Element sind block-Elemente

falsch, weder img- noch object-Elemente sind block-Elemente, beides sind inline-Elemente:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

und sollten sich mit den selben Höhen- und Breitenangaben gleich verhalten.

das ist allerdings richtig.

cu,
Andreas

[Matze]

Hallo Andreas!

Sowohl ein object-, als auch ein img-Element sind block-Elemente
falsch, weder img- noch object-Elemente sind block-Elemente, beides sind inline-Elemente:

Danke für die Korrektur!

und sollten sich mit den selben Höhen- und Breitenangaben gleich verhalten.
das ist allerdings richtig.

Grüße, Matze

[Detlef G.]

Hallo MudGuard

und sollten sich mit den selben Höhen- und Breitenangaben gleich verhalten.

das ist allerdings richtig.

Wobei die Betonung auf _sollten_ liegt.

Zumindest Irgend Ein Browser reserviert bei einem <object> die Textunterlängen nur, wenn auch wirklich Text vorhanden ist, bei einem <img> aber bereits, wenn Whitespaces zwischen den Tags vorhanden sind.

Auf Wiederlesen
Detlef