|
|||
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; } Weiter unten über dem Footer Teil! |
Sponsored Links |
|
|||
Bevor du weitermachst behebe erst mal alle Fehler. Einige davon sind echt schlimm.
Ergebnis des Validators: Result for http://s372389879.online.de/
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Zitat:
|
|
|||
Zitat:
Der Browser zeigt die Hoverfläche genauso groß an, wie du das im Selektor "#contacter" festgelegt hast. Zum Testen empfehle ich dir, um die relevanten Elemente farbige Rahmen zu ziehen, damit du die Ausmaße und Positionen der Elemente sofort erkennen kannst. Reduziere also die Höhe und deklariere zusätzlich noch ein passendes 'margin-bottom'. btw-1: Bei kleinem viewport und größerer Schrift läuft der Text "kontaktieren Sie uns!" aus dem Hintergrund heraus. Deshalb spendiere dem #contacter noch ein 'min-width: 25em;'. Auch ein "bitte" vor dem Text und ohne Ausrufezeichen wäre nicht schlecht. So jedenfalls klingt es wie ein Befehl. btw2: Blocksatz ohne gleichzeitige Silbentrennung sieht mitunter wg langer Worte und demzufolge großer Wortabstände furchtbar aus. Directupload.net - 2l76c4jx.png Geändert von gaby (13.10.2013 um 20:03 Uhr) |
|
|||
Zitat:
Code:
#bckg:hover (parent)#contacter { code } Zitat:
Zitat:
Vielen Dank schon mal für die nette Hilfe, das weiß ich sehr zu schätzen |
|
|||
Zitat:
Wenn ja, stelle doch bitte eine dahingehend geänderte Testdatei zur Verfügung und erkläre, wieso das nicht das war, was du suchtest. außerdem: Wenn du #contacter und #bckg Rahmen gegeben hast, siehst du, daß #bckg p nicht am oberen Rand von #contacter anschließt, was du aber wahrscheinlich möchtest. Grund ist der, daß jedes Absatz-Element ein impliziertes 'margin' hat. "Blocksatz ohne gleichzeitige Silbentrennung" ist Kundenwunsch? Na, dann zeige deinem Kunden doch mal meinen Screenshot. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fertiges Drop-Down Menü ins Layout einfügen | VoB | CSS | 6 | 15.03.2011 17:14 |
CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 13:04 |
bildwechsel bei hover - nur mit css, ohne javascript? | Beb | CSS | 3 | 20.06.2005 08:48 |
css tooltip hover problem | Deude | CSS | 2 | 15.05.2005 18:49 |
CSS: hover bei Links | RayBan | CSS | 2 | 05.11.2004 23:26 |