CSS Popup box, funktioniert bei link nicht
branco
- css
Moin,
Ich bin gerade dabei eine neue Seite für mich zu coden, nun wollte ich ein schönen Popup per CSS machen, und dort eine Login Form + Registrier link einfügen. Login Form ist kein Problem, Registriert link funktioniert aber leider nicht.. Wenn ich über das Bild fahre (der den Popup öffnen soll) verschwindet der Registrier-Link weit nach unten im Design. Wenn ich nicht über das Bild fahre befindet sich der Registrier Link unter dem "Button-Bild". Der Registrier-link soll eigendlich mit in das Popup.
Hier mal der Code:
HTML-Code:
<a href="#" onfocus="this.blur()">
<img src="images/design/trans_login.gif" width="60" height="22" border="0" />
<span class="infobox">
<form action="" method="post">
Name: <input name="name" type="text" /><br />
Passwort: <input name="password" type="password" value="" /><br />
<input name="send" type="button" value="Login" />
</form>
</span>
</a>
CSS Classes:
.menue {
float: left;
width: 502px;
}
.menue a:link {
width: 502px;
font-size:12px;
display: block;
color: #000;
text-align: right;
}
.menue a:visited {
color: #8e0404;
}
.menue a:active {
color: #8e0404;
}
.menue a:hover {
color:#8e0404;
}
.menue a .infobox {
display: none;
}
.menue a:hover .infobox {
background-image: url('login.png');
background-repeat: no-repeat;
width: 229px;
min-height: 220px;
color: #8e0404;
display: block;
margin-right: 150px;
margin-top: -25px;
padding-right: 35px;
padding-top: 20px;
text-align: right;
}
Ich hoffe mir kann jemand von euch helfen, Vielen Dank im Voraus!
Mit freundlichen Grüßen,
Branco
PS: was mich noch interessieren würde ist, wie ich das CSS so umprogramiere, das man auf das Bild draufklicken muss damit das Popup aufgeht, also nicht nur darüber fahren muss.
<a href="#" onfocus="this.blur()">
<img src="images/design/trans_login.gif" width="60" height="22" border="0" />
<span class="infobox">
<form action="" method="post">
Name: <input name="name" type="text" /><br />
Passwort: <input name="password" type="password" value="" /><br />
<input name="send" type="button" value="Login" />
</form>
</span>
</a>
Nach welchem Standard darf ein form Element in einem a Element vorkommen?
mfg Beat
»» <a href="#" onfocus="this.blur()">
»» <img src="images/design/trans_login.gif" width="60" height="22" border="0" />
»» <span class="infobox">
»» <form action="" method="post">
»» Name: <input name="name" type="text" /><br />
»» Passwort: <input name="password" type="password" value="" /><br />
»» <input name="send" type="button" value="Login" />
»» </form>
»» </span>
»» </a>Nach welchem Standard darf ein form Element in einem a Element vorkommen?
mfg Beat
mh also hier mal der Link zum Tutorial, wo ich das her habe:
http://bluevacci.de/site.php?site=tutorials_css_naviinfobox
Ich habe das schonmal irgendwie hinbekommen, dass ich auch einen Link darin benutzen konnte, jedoch klappt es jetzt nicht mehr.
Nach welchem Standard darf ein form Element in einem a Element vorkommen?
mh also hier mal der Link zum Tutorial, wo ich das her habe:
http://bluevacci.de/site.php?site=tutorials_css_naviinfoboxIch habe das schonmal irgendwie hinbekommen, dass ich auch einen Link darin benutzen konnte, jedoch klappt es jetzt nicht mehr.
Auch wenn man gerne wegen msie ein <a> Element verwendet, weil ältere msie den hover Effekt auf anderen Elementen nicht unsterstützen: Es ist nicht konform.
Mit einer Konstruktion wie
<a></a>
<form></form>
und CSS Selektor
a + form{}
kann man das Element denoch erreichen, ohne invaliden Code zu erzeugen.
MSIE 6 versteht diesen Selektor jedoch noch nicht.
Somit die Frage: Wie erreiche ich den MSIE 6 Support: Mit Javascript.
mfg Beat
Hi,
Mit einer Konstruktion wie
<a></a>
<form></form>und CSS Selektor
a + form{}
kann man das Element denoch erreichen, ohne invaliden Code zu erzeugen.
wobei erwähnt werden darf, dass zumindest beim gezeigten Code ganz offensichtlich keine Ressource verlinkt werden soll, ein <a>-Element also ohnehin völlig fehl am Platz ist.
Cheatah