XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS falsche Hover Fläche für Kontaktformular (http://xhtmlforum.de/showthread.php?t=70122)

Trigant 11.10.2013 18:34

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="&auml;&ouml;&uuml;" />
<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&uuml;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&uuml;nschen Antwort per*</div></td>
<td class="main"><select class="select" size="1" name="absender_antwort">
<option value="">Bitte w&auml;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" />&nbsp;&nbsp;&nbsp;&nbsp;<input class="button" type="reset" value="Zur&uuml;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!

explanator 12.10.2013 04:01

Bevor du weitermachst behebe erst mal alle Fehler. Einige davon sind echt schlimm.

Ergebnis des Validators:
Result for http://s372389879.online.de/

Trigant 12.10.2013 20:19

Zitat:

Zitat von explanator (Beitrag 534236)
Bevor du weitermachst behebe erst mal alle Fehler. Einige davon sind echt schlimm.

Ergebnis des Validators:
Result for http://s372389879.online.de/

So ich hoffe, jetzt ist es besser :) Die Zeilen um die es in meiner Frage geht sind: HTML: 104-164 sowie CSS: 274 - 446

gaby 13.10.2013 16:38

Zitat:

Zitat von Trigant (Beitrag 534213)
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.

Hallo,

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

Trigant 14.10.2013 04:15

Zitat:

Zitat von gaby (Beitrag 534240)
Hallo,

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;'.

Das mit dem selektor habe ich glaube ich schon verstanden. Was ich mich frage, was ich dem selektor zuweisen muss, damit er erst Platz einnimmt, wenn ich mit der Maus über die !passende! Schaltfläche fahre (#bckg, nicht #contacter!) Wie schaffe ich es sozusagen einen parent-selektor hinzuzufügen um sozusagen das machen zu können:

Code:

#bckg:hover (parent)#contacter { code }
Zitat:

Zitat von gaby (Beitrag 534240)
Auch ein "bitte" vor dem Text und ohne Ausrufezeichen wäre nicht schlecht.
So jedenfalls klingt es wie ein Befehl.

Joa, ich habe das Ausrufezeichen entfernt, aber es SOLL eine Art Aufforderung sein :)

Zitat:

Zitat von gaby (Beitrag 534240)
btw2:
Blocksatz ohne gleichzeitige Silbentrennung sieht mitunter wg langer Worte und demzufolge großer Wortabstände furchtbar aus.

Directupload.net - 2l76c4jx.png

Ah ja würde ich tatsächlich gerne, aber es ist "Kundenwunsch"!

Vielen Dank schon mal für die nette Hilfe, das weiß ich sehr zu schätzen :)

gaby 14.10.2013 08:26

Zitat:

Zitat von Trigant (Beitrag 534242)
Das mit dem selektor habe ich glaube ich schon verstanden. Was ich mich frage, was ich dem selektor zuweisen muss, damit er erst Platz einnimmt, wenn ich mit der Maus über die !passende! Schaltfläche fahre (#bckg, nicht #contacter!)

Hast du meinen Tip schon umgesetzt?
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.


Zitat:

Zitat von Trigant (Beitrag 534242)
Ah ja würde ich tatsächlich gerne, aber es ist "Kundenwunsch"!

"Blocksatz ohne gleichzeitige Silbentrennung" ist Kundenwunsch? :shock:
Na, dann zeige deinem Kunden doch mal meinen Screenshot.

Trigant 14.10.2013 19:06

AHHH *Klick* :idea: ich stand einfach nur unfassbar aufm Schlauch. Vielen Dank nochmal. Dein Denkanstoß hat geholfen mit dem border tipp.
^^


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023