CSS falsche Hover Fläche für Kontaktformular
hallo,
bin neu hier und mir nicht sicher wie ich nach diesem Problem hätte suchen sollen. Also bitte nicht den kopf abreissen, falls es das Thema schon gibt oder ich in meiner Fragestellung etwas falsch mache :)
Mein Problem ist, dass ich für ein aufklappbares Kontaktformular den für die Maus aktiven Bereich nicht auf den vor dem ausgeklappten kleineren Bereich beschränken kann.
Es ist zwar unsichtbar, aber die Fläche, die nach dem ausklappen benötigt wird, ist quasi schon reserviert. Und wenn ich in diesem Bereich mit der Maus drüber gehe, wird lediglich das Kontaktformular sichtbar. Wie schreibe ich meinen Text um, sodass ich nur den "Button" mit meiner Maus überfahren muss, der Seeitenbereich sich erweitert und das kontaktformular sichtbar wird?
das kontaktformular ist von dw-formmailer.de, aber im Grunde sollte das ja nichts an dem Endergebnis ändern, oder?
HTML-Code:
<div id="contacter">
<div id="bckg">
<p><b>Kontaktieren Sie uns!</b></p>
</div>
<!-- START Code DWFormgenerator -->
<form name="dwmailer" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
<input type="hidden" name="page_tv" value="" />
<input type="hidden" name="page_tv_2" value="äöü" />
<input type="hidden" name="pflicht" value="absender_name,absender_antwort" />
<input type="hidden" name="empfaenger_mail" value="" />
<input type="hidden" name="empfaenger_name" value="" />
<input type="hidden" name="betreff" value="Kontaktanfrage" />
<input type="hidden" name="page_background_color" value="#FFFFFF" />
<input type="hidden" name="page_font_color" value="#333333" />
<input type="hidden" name="language" value="de" />
<span id="page_top" style="display: inline;"></span><table align="center" class="table" border="0" cellspacing="1" cellpadding="3">
<tr>
<td colspan="2" class="head" height="17" width="100%" align="left"><span class="font-big">Kontaktformular</span></td>
</tr>
<tr>
<td colspan="4" class="main" height="16" width="100%"><span class="font-small">Bitte füllen Sie alle mit * markierten Felder aus. (Pflichtfelder)</span></td>
</tr>
<tr>
<td class="main" width="30%"><div class="align">Ihr Name*</div></td>
<td class="main"><input class="input" type="text" name="absender_name" size="20" /></td>
<td class="main" width="30%"><div class="align">Firma</div></td>
<td class="main"><input class="input" type="text" name="absender_firma" size="20" /></td>
</tr>
<tr>
<td class="main" width="30%"><div class="align">Strasse</div></td>
<td class="main"><input class="input" type="text" name="absender_strasse" size="20" /></td>
<td class="main" width="30%"><div class="align">PLZ / Ort</div></td>
<td class="main"><input class="input" type="text" name="PLZ Ort" size="20" /></td>
</tr>
<tr>
<td class="main" width="30%"><div class="align">Telefon</div></td>
<td class="main"><input class="input" type="text" name="absender_telefon" size="20" /></td>
<td class="main" width="30%"><div class="align">Fax</div></td>
<td class="main"><input class="input" type="text" name="absender_fax" size="20" /></td>
</tr>
<tr>
<td class="main" width="30%"><div class="align">Ihre E-Mail Adresse*</div></td>
<td class="main"><input class="input" type="text" name="absender_mail" size="20" /></td>
<td class="main" width="30%"><div class="align">Sie wünschen Antwort per*</div></td>
<td class="main"><select class="select" size="1" name="absender_antwort">
<option value="">Bitte wählen</option><option value="Telefon">Telefon</option><option value="Telefax">Fax</option><option value="E-Mail">E-Mail</option><option value="egal">Mir egal</option></select>
</tr>
</tr>
<tr>
<td class="main" width="30%"><div class="align">Kommentar</div></td>
<td colspan="4" class="main">(Restzeichen: <span id="count_1">2500</span>)<br />
<textarea class="textarea" name="absender_text" id="absender_text" cols="35" rows="4" onkeydown="rest(this,2500,'count_1',event)" onkeyup="rest(this,2500,'count_1',event)" onchange="rest(this,2500,'count_1',event)"></textarea></td>
</tr>
<tr><td class="foot" colspan="4" align="center" height="25" width="100%"><input class="button_send" type="submit" value="Abschicken" /> <input class="button" type="reset" value="Zurücksetzen" /></td></tr>
</table>
</form>
<!-- START COPYRIGHTS - Do not remove this link without a valid DWFormmailer license -->
<p align="center" id="owner"><span id="formmailer"><a href="https://www.dw-formmailer.de/form.php" target="_blank">DWFormgenerator 7.5.0</a></span></p>
<!-- END COPYRIGHTS -->
<!-- END Code DWFormgenerator -->
</div>
Code:
#contacter {
margin: 0 auto;
margin-top: 3.5em;
width: 31%;
height: 365px;
color: #777;
}
#bckg {
text-align: center;
margin: 0 auto;
text-shadow: 0px 0px 1px #fff;
background-color: #ddd;
width: 60%;
height: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 5px 5px 10px 10px;
-moz-box-shadow: 2px 2px 5px -1px #000;
-webkit-box-shadow: 2px 2px 5px -1px #777;
-o-box-shadow: 2px 2px 5px -1px #777;
box-shadow: 2px 2px 5px -1px #777; }
#bckg p { padding: 10px; }
#contacter:hover #bckg { display: none; }
#contacter:hover {
width: 35%;
background-color: #eee;
border-radius: 5px 5px 10px 10px;
-moz-box-shadow: inset 2px 2px 5px -1px #000;
-webkit-box-shadow: inset 2px 2px 5px -1px #777;
-o-box-shadow: inset 2px 2px 5px -1px #777;
box-shadow: inset 2px 2px 5px -1px #777; }
#contacter form,
#contacter #owner{
display: none;
}
#contacter:hover form,
#contacter:hover #owner {
display: block;
padding-top: 15px;
}
a.dwflink:link {text-decoration: underline; color: #0000FF}
a.dwflink:visited {text-decoration: underline; color: #0000FF}
a.dwflink:hover {text-decoration: underline; color: #0000FF}
.font-big {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size:16px; font-weight:bold;
color:#000000;
}
.font-small {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size:9px; font-weight:normal;
color:#333333;
}
.table {
background-color:#eee;
width:40%;
}
.table2 {
background-color:#eee;
width:100%;
}
.head {
text-align: center;
background-color:#eee;
}
.main {
background-color:#FFFFFF;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size:12px; font-weight:normal;
color:#333333;
}
.foot {
background-color:#eee;
}
.align {
text-align:left;
}
.textarea {
background-color:#FFFFFF;
color:#333333;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size:12px;
font-weight: normal;
border : 1px solid #eee;
border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;
padding: 0;
position:relative;
}
.input {
background-color:#FFFFFF;
color:#333333;
font-family: "Trebuchet MS", Verdana, sans-serif;
border : 1px solid #eee;
font-size:12px;
border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;
padding: 0;
position:relative;
}
.select {
background-color:#FFFFFF;
color:#333333;
font-family: "Trebuchet MS", Verdana, sans-serif;
border : 1px solid #eee;
font-size:12px;
border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;
padding: 0;
position:relative;
}
#contacter .textarea:hover, #contacter .textarea:focus, #contacter .input:hover, #contacter .input:focus, #contacter .select:hover, #contacter .select:focus {
border : 1px solid #000000;
}
.button {
min-width: 130px;
}
.button_send {
min-width: 130px;
}
#owner {
margin-top:-15px;
}
#count_1 {
font-family:'Trebuchet MS', Verdana, sans-serif;
font-size: 10px;
color: #555;
}
#formmailer {
font-size:8px;
font-family:'Trebuchet MS', Verdana, sans-serif;
}
#formmailer a {
color: #333;
text-decoration: none;
}
#formmailer:hover {
font-size: 9px;
text-shadow: 0px 0px 1px #777;
}
Hier die Seite zum betrachten des Problems. Immobilien & Investments
Weiter unten über dem Footer Teil!
|