zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS falsche Hover Fläche für Kontaktformular

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.10.2013, 18:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2013
Beiträge: 4
Trigant befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.10.2013, 04:01
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.10.2013, 20:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2013
Beiträge: 4
Trigant befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 13.10.2013, 16:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Trigant Beitrag anzeigen
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

Geändert von gaby (13.10.2013 um 20:03 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.10.2013, 04:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2013
Beiträge: 4
Trigant befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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 anzeigen
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 anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.10.2013, 08:26
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Trigant Beitrag anzeigen
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 anzeigen
Ah ja würde ich tatsächlich gerne, aber es ist "Kundenwunsch"!
"Blocksatz ohne gleichzeitige Silbentrennung" ist Kundenwunsch?
Na, dann zeige deinem Kunden doch mal meinen Screenshot.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.10.2013, 19:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2013
Beiträge: 4
Trigant befindet sich auf einem aufstrebenden Ast
Standard

AHHH *Klick* ich stand einfach nur unfassbar aufm Schlauch. Vielen Dank nochmal. Dein Denkanstoß hat geholfen mit dem border tipp.
^^
Mit Zitat antworten
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
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


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