zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [Gelöst] Span in <button> ausserhalb positionieren (FF)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.10.2009, 14:37
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard [Gelöst] Span in <button> ausserhalb positionieren (FF)

Vielleicht stehe ich gerade auf dem Schlauch.

In einem Button-HTML-Element befindet sich ein span (zulässig).
Dessen visuelle Anzeige wird unterdrückt, bis eine Nutzereingabe (hover, focus, active) erfolgt. Bei Eingabe soll dieses Span ausserhalb des button-Elementes angezeigt werden.

IE8 und Opera 10 zeigen das span an.

Der Fuchs beschränkt die Anzeige auf die Abmessungen des Button-Elements und zeichnet nicht darüber hinaus.
Kann der Fuchs das nicht? Will er nicht?

Hier ein gestripptes Testcase mit den notwendigen Angaben.

HTML-Code:
<!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" xml:lang="de" lang="de">

<head>
    <title>Buttontest span outside</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
       <style type="text/css">

    #suche {
    height: 1.5em;
    margin-left: 0.625em;
    margin-top: 4em;
    position: relative;
    width: 10.625em;
    border-top: 2px solid #fff;
    overflow: visible;
       }
#suche form {
    font-size: 0.8735em;
    overflow: visible;
       }

#suche button {
position: absolute;
display: block;
top: -2.9em;
left: 1.9em;
height: 3em;
width: 3em;
border: none;
background-color: red;
cursor: pointer;
text-indent: -500em;
overflow: visible;
 }

#suche button:focus, #suche button:hover {
background-color: green;
}
#suche label {
position: absolute;
left: -400em;
}
input#suchbegriff {
    position: absolute;
    display: block;
    top: 0;
    height: 1.125em;
    width: 11em;
    left: 1.8em;
    color: #222;
    font-size: 1.125em;
    font-family: Axel, "Arial Narrow", Arial, Swiss, Helvetica, sans-serif;
    border: 1px solid #7a1818;
    }
#suche button span {
        left: -400em;
        background-color: #fff;
        text-indent: 0;
}

#suche button.up:hover span, #suche button.up:active span, #suche button.up:focus span {
position:absolute;
display: block;
left: auto;
top: -2em;
width: 15em;
height: auto;
line-height: 1.4em;
border: 1px solid #7a1818;
color: #222;
background-color: #fafafa;
z-index: 4;
text-indent: 5px;
}
#suche button.up:hover span {
    top: 0em;
}

    </style>
</head>

<body>
<div id="suche"><form id="search" action="http://example.com/test.html" method="get"><label for="suchbegriff">Suchen</label><input type="text" id="suchbegriff" maxlength="25" title="Suchbegriff tippen und Suche mit Lupe oder [Enter] starten" value="Suche" onblur="if(this.value=='')this.value='Suche';" onfocus="if(this.value=='Suche')this.value='';"/><button class="up" type="submit"><span>Suche abschicken / Suchseite</span></button></form></div>


</body>
</html>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (22.10.2009 um 16:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.10.2009, 15:06
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Tach Andreas,

so auf die Schnelle:
Vielleicht hilft dir da diese Eigenschaft:
HTML-Code:
Element:hover:after {
	content: " Ein Text";
}
}
funktioniert nicht im IE6/7 aber im FF.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.10.2009, 15:08
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Nimm doch mal aus #suche button.up:hover span das display:block raus. Besser?
Mit Zitat antworten
  #4 (permalink)  
Alt 22.10.2009, 15:20
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nein, dann wird gar nichts angezeigt. Finde ich auch logisch.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 22.10.2009, 16:06
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

HTML-Code:
<!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" xml:lang="de" lang="de">

<head>
    <title>Buttontest span outside</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
       <style type="text/css">

    #suche {
    position:relative;
    height: 5em;
    margin:4em auto 0 auto;
    width: 10.625em;
    border-top: 2px solid #fff;
   
       }
#suche form {
    font-size: 0.8735em;
       }

#suche button {
display: block;
height: 3em;
width: 3em;
border: none;
background-color: red;
cursor: pointer;
 }

#suche button:focus, #suche button:hover {
background-color: green;
}
#suche label {
position: absolute;
left: -1000em;
}
input#suchbegriff {
    display: block;
    height: 1.125em;
    width: 11em;
    color: #222;
    font-size: 1.125em;
    font-family: Axel, "Arial Narrow", Arial, Swiss, Helvetica, sans-serif;
    border: 1px solid #7a1818;
    }
#suche button span {
	position:absolute;
        left: -1000em;
	top:-1000em;
        background-color: #fff;
}

#suche button.up:hover span, #suche button.up:active span, #suche button.up:focus span {
position:absolute;
display: block;
left: auto;
top: -2em;
width: 15em;
height: auto;
line-height: 1.4em;
border: 1px solid #7a1818;
color: #222;
background-color: #fafafa;
text-indent: 5px;
}
#suche button.up:hover span {
    top: 0em;
}

    </style>
</head>

<body>
<div id="suche"><form id="search" action="http://example.com/test.html" method="get">
<button class="up" type="submit"><span>Suche abschicken / Suchseite</span></button>
<label for="suchbegriff">Suchen</label><input type="text" id="suchbegriff" maxlength="25" title="Suchbegriff tippen und Suche mit Lupe oder [Enter] starten" value="Suche" onblur="if(this.value=='')this.value='Suche';" onfocus="if(this.value=='Suche')this.value='';"/>
</form></div>
</body>
</html>
Funktioniert im IE7, FF2, FF3.5, Opera10
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (22.10.2009 um 16:10 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 22.10.2009, 16:37
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Im ff2 funktioniert es auch mit position: absolute für button.
Im ff3 wird button span sichtbar wenn ich position: absolute; für button entferne.

Wenn ich ein weiteres Element um button ziehe und es absolute positioniere funktioniert es:
Code:
<div class="button">
<button class="up" type="submit">
<span>Suche abschicken / Suchseite</span>
</button>
Code:
#suche .button {
position: absolute;
top: -2.9em;
left: 1.9em;
}

#suche button {
/*position: absolute;*/
/*top: -2.9em;*/
/*left: 1.9em;*/
display: block;
height: 3em;
width: 3em;
...
...
 }
__________________
MfG
Jens

Geändert von plastiko (22.10.2009 um 16:40 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 22.10.2009, 16:53
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Danke für Eure Antworten - und Lösungen!

Es scheint tatsächlich an der Positionierung des Button-Element zu liegen - man lernt nicht aus! (absolute und relative zeigen den gleichen Effekt)
Der FF rendert dieses Formelement also unterschiedlich, je nach dem, ob eine Positionierung erfolgt ist oder nicht.

@Klaus, ich muss aus bestimmten Gründen den Button in der Gegend umherschieben und darf nix anderes beeinflussen, deswegen wähle ich die Methode mit dem umschließenden div.

In Bugzilla habe ich dazu nichts gefunden, aber vielleicht gibts ja auch keine Vorgaben bezüglich der Darstellung...
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 22.10.2009, 18:19
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von andir Beitrag anzeigen
@Klaus, ich muss aus bestimmten Gründen den Button in der Gegend umherschieben und darf nix anderes beeinflussen, deswegen wähle ich die Methode mit dem umschließenden div.
jetzt bin ich verwirrt.

Das div habe ich doch gar nicht gestrichen.
Im Quelltext habe ich nur den button vor den input geschrieben, weil das einfacher ist.

Oder darfst du am Quelltext nichts ändern.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #9 (permalink)  
Alt 22.10.2009, 19:24
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Das div habe ich doch gar nicht gestrichen.
aber ich habe eins zugefügt .
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.10.2009, 00:52
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
aber ich habe eins zugefügt
Genau

Meinen Quelltext, Klaus, darf ich ändern wie ich lustig bin, zum Glück
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (23.10.2009 um 00:54 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div oder Span unten links positionieren pkipper CSS 8 21.06.2011 09:48
grafische Navigation horizontal zentrieren, klappt nicht lila_3 CSS 4 30.11.2010 11:25
Element ausserhalb seite positionieren, so daß keine scrollbar entsteht st-SaHiB CSS 5 20.07.2009 09:49
Navigation verschwindet im IE6 emti CSS 4 12.05.2009 16:01
span-infobox wird in ie6 nicht angezeigt? locita CSS 9 13.07.2008 17:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:00 Uhr.