PDA

View Full Version : prob with position of contactform


cpschmieder
07-13-2010, 08:07 PM
Hello everybody!


i'm new to dreamweaver and i got a problem with the position of an contactformular


i exportet an htm file from fireworks - and than in dreamweaver i createt a contactform

the problem is that the position of the contactform changes when viewing the page of different screens - as you can see in the following pictures


the first picture shows the contactpage on a normal pc-monitor 1280x1024 - 4:3 - where everything is ok but....

>> picture 4zu3.jpg

when i see the page on a 16:9 monitor - 1680x1050 - the text fields are not in it's positon

>> picture 16_9.jpg

i have played a litte with the css-rule for the contactform - but can't find a solution to this problem

maybe someone can help me with that - i guess it's not a big thing - but i can't figure out how to get that prob fixed...:confused:

many many thanks in advanced for any peace of advice ! ! !


chris

edbr
07-14-2010, 01:27 AM
need code, not images if we are to help

cpschmieder
07-14-2010, 02:05 PM
thx for your answer - here is the complete code of the contactpage

the url of the page is: http://www.ferienwohnung-ueber-den-daechern.de/Kontakt.htm
__________________________________________________ ____________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Über den Dächern Lüneburgs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS5 Dreamweaver CS5 target. Created Mon Jun 14 17:27:45 GMT+0200 2010-->
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
<style type="text/css">

#apDiv1 {
position:absolute;
left:496px;
top:360px;
width:433px;
height:304px;
z-index:1;
padding: 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
right: auto;
bottom: auto;
}
td img {display: block;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFF;
}
</style>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('bilder/Home_Schalter_s2.jpg','bilder/Ausstattung_Schalter_s2.jpg','bilder/Peris_Leistung_Schalter_s2.jpg','bilder/Besonderes_Schalter_s2.jpg','bilder/Umgebung_Schlater_s2.jpg','bilder/Kontakt_Schalter_s2.jpg','bilder/Impressum_Schalter_s2.jpg');"><div id="apDiv1">
<form id="formmail" name="formmail" method="post" action="http://www.ferienwohnung-ueber-den-daechern.de/formmail.php">
<span id="nametextfeld">
<label for="name"></label>
<input type="text" name="name" id="name" />
<span class="textfieldRequiredMsg">Bitte geben Sie hier Ihren Namen ein.</span><span class="textfieldMaxCharsMsg">maximale Zeichenanzahl erreicht</span></span>
<p><span id="emailtextfeld">
<label for="email"></label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">Bitte geben Sie hier Ihre E-Mail-Adresse ein..</span><span class="textfieldInvalidFormatMsg">Bitte überprüfen Sie die E-Mail-Adresse.</span><span class="textfieldMinCharsMsg">Die mindestens erforderliche Zeichenanzahl wurde unterschritten</span><span class="textfieldMaxCharsMsg"> maximale Zeichenanzahl erreicht</span></span></p>
<p><span id="messagetextfeld">
<label for="message"></label>
<textarea name="message" id="message" cols="45" rows="7"></textarea>
<span class="textareaMaxCharsMsg">maximale Zeichenanzahl erreicht</span></span></p>
<p>&nbsp;</p>
<p>
<input type="submit" name="senden" id="senden" value="Nachricht senden" />
</p>
</form>
</div>
<div align="left">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1100">
<!-- fwtable fwsrc="13_Final_01.png" fwpage="Kontakt" fwbase="Kontakt.jpg" fwstyle="Dreamweaver" fwdocid = "118486262" fwnested="0" -->
<tr>
<td><img src="bilder/spacer.gif" width="50" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="56" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="34" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="72" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="151" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="576" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="140" height="1" border="0" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="9"><img name="Kontakt_r1_c1" src="bilder/Kontakt_r1_c1.jpg" width="1100" height="242" border="0" id="Kontakt_r1_c1" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="242" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="13"><img name="Kontakt_r2_c1" src="bilder/Kontakt_r2_c1.jpg" width="50" height="206" border="0" id="Kontakt_r2_c1" alt="" /></td>
<td><a href="Index.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Home_Schalter_s1','','bilder/Home_Schalter_s2.jpg',1);"><img name="Home_Schalter_s1" src="bilder/Home_Schalter_s1.jpg" width="56" height="16" border="0" id="Home_Schalter_s1" alt="" /></a></td>
<td rowspan="2" colspan="3"><img name="Kontakt_r2_c3" src="bilder/Kontakt_r2_c3.jpg" width="55" height="31" border="0" id="Kontakt_r2_c3" alt="" /></td>
<td rowspan="4"><img name="Kontakt_r2_c6" src="bilder/Kontakt_r2_c6.jpg" width="72" height="61" border="0" id="Kontakt_r2_c6" alt="" /></td>
<td rowspan="5" colspan="3"><img name="Kontakt_r2_c7" src="bilder/Kontakt_r2_c7.jpg" width="867" height="83" border="0" id="Kontakt_r2_c7" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="16" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="Kontakt_r3_c2" src="bilder/Kontakt_r3_c2.jpg" width="56" height="15" border="0" id="Kontakt_r3_c2" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="15" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><a href="Ausstattung.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Ausstattung_Schalter_s1','','bilder/Ausstattung_Schalter_s2.jpg',1);"><img name="Ausstattung_Schalter_s1" src="bilder/Ausstattung_Schalter_s1.jpg" width="111" height="21" border="0" id="Ausstattung_Schalter_s1" alt="" /></a></td>
<td><img src="bilder/spacer.gif" width="1" height="21" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="Kontakt_r5_c2" src="bilder/Kontakt_r5_c2.jpg" width="111" height="9" border="0" id="Kontakt_r5_c2" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="9" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><a href="Preise_Leistungen.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Peris_Leistung_Schalter_s1','','bild er/Peris_Leistung_Schalter_s2.jpg',1);"><img name="Peris_Leistung_Schalter_s1" src="bilder/Peris_Leistung_Schalter_s1.jpg" width="183" height="22" border="0" id="Peris_Leistung_Schalter_s1" alt="" /></a></td>
<td><img src="bilder/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img name="Kontakt_r7_c2" src="bilder/Kontakt_r7_c2.jpg" width="105" height="9" border="0" id="Kontakt_r7_c2" alt="" /></td>
<td rowspan="8" colspan="3"><img name="Kontakt_r7_c5" src="bilder/Kontakt_r7_c5.jpg" width="229" height="123" border="0" id="Kontakt_r7_c5" alt="" /></td>
<td rowspan="9"><img name="Kontakt_r7_c8" src="bilder/Kontakt_r7_c8.jpg" width="576" height="337" border="0" id="Kontakt_r7_c8" alt="" /></td>
<td rowspan="12"><img name="Kontakt_r7_c9" src="bilder/Kontakt_r7_c9.jpg" width="140" height="999" border="0" id="Kontakt_r7_c9" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="9" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="Besonderes.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Besonderes_Schalter_s1','','bilder/Besonderes_Schalter_s2.jpg',1);"><img name="Besonderes_Schalter_s1" src="bilder/Besonderes_Schalter_s1.jpg" width="105" height="17" border="0" id="Besonderes_Schalter_s1" alt="" /></a></td>
<td><img src="bilder/spacer.gif" width="1" height="17" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img name="Kontakt_r9_c2" src="bilder/Kontakt_r9_c2.jpg" width="105" height="14" border="0" id="Kontakt_r9_c2" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="14" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="Umgebung.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Umgebung_Schlater_s1','','bilder/Umgebung_Schlater_s2.jpg',1);"><img name="Umgebung_Schlater_s1" src="bilder/Umgebung_Schlater_s1.jpg" width="105" height="22" border="0" id="Umgebung_Schlater_s1" alt="" /></a></td>
<td><img src="bilder/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img name="Kontakt_r11_c2" src="bilder/Kontakt_r11_c2.jpg" width="105" height="9" border="0" id="Kontakt_r11_c2" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="9" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><a href="Kontakt.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Kontakt_Schalter_s1','','bilder/Kontakt_Schalter_s2.jpg',1);"><img name="Kontakt_Schalter_s1" src="bilder/Kontakt_Schalter_s1.jpg" width="71" height="17" border="0" id="Kontakt_Schalter_s1" alt="" /></a></td>
<td rowspan="2"><img name="Kontakt_r12_c4" src="bilder/Kontakt_r12_c4.jpg" width="34" height="32" border="0" id="Kontakt_r12_c4" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="17" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="Kontakt_r13_c2" src="bilder/Kontakt_r13_c2.jpg" width="71" height="15" border="0" id="Kontakt_r13_c2" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="15" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="Impressum.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Impressum_Schalter_s1','','bilder/Impressum_Schalter_s2.jpg',1);"><img name="Impressum_Schalter_s1" src="bilder/Impressum_Schalter_s1.jpg" width="105" height="20" border="0" id="Impressum_Schalter_s1" alt="" /></a></td>
<td><img src="bilder/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4" colspan="7"><img name="Kontakt_r15_c1" src="bilder/Kontakt_r15_c1.jpg" width="384" height="876" border="0" id="Kontakt_r15_c1" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="214" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="Kontakt_r16_c8" src="bilder/Kontakt_r16_c8.jpg" width="576" height="78" border="0" id="Kontakt_r16_c8" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="78" border="0" alt="" /></td>
</tr>
<tr>
<td valign="top"><iframe width="576" height="336" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Baumstra%C3%9 Fe+6+21335+L%C3%BCneburg&amp;sll=30.600094,56.074219&amp;s spn=97.62807,158.027344&amp;ie=UTF8&amp;hq=&amp;hnear=Baumstra %C3%9Fe+6,+L%C3%BCneburg+21335+L%C3%BCneburg,+Nied ersachsen&amp;ll=53.252274,10.410662&amp;spn=0.017203,0.04 9524&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.de/maps?f=q&amp;source=embed&amp;hl=de&amp;geocode=&amp;q=Baumstra%C3 %9Fe+6+21335+L%C3%BCneburg&amp;sll=30.600094,56.074219 &amp;sspn=97.62807,158.027344&amp;ie=UTF8&amp;hq=&amp;hnear=Baumst ra%C3%9Fe+6,+L%C3%BCneburg+21335+L%C3%BCneburg,+Ni edersachsen&amp;ll=53.252274,10.410662&amp;spn=0.017203,0. 049524&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small></td>
<td><img src="bilder/spacer.gif" width="1" height="357" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="Kontakt_r18_c8" src="bilder/Kontakt_r18_c8.jpg" width="576" height="227" border="0" id="Kontakt_r18_c8" alt="" /></td>
<td><img src="bilder/spacer.gif" width="1" height="227" border="0" alt="" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("nametextfeld", "none", {minChars:1, maxChars:50, hint:"Name", validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("emailtextfeld", "email", {validateOn:["blur"], minChars:1, maxChars:50, hint:"E-Mail-Adresse"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("messagetextfeld", {validateOn:["blur"], minChars:1, maxChars:600, hint:"Ihre Nachricht"});
</script>
</body>
</html>

edbr
07-15-2010, 01:35 AM
tables and absolute positioning , best recipe for layout problems.

make a wrapper div to hold your content then you ban position that and all the contained element will be consistent

and just to tidy

clean up the empty labels
you have some elements in <p> tags and some not . was that intentional? if not again make it consistent

cpschmieder
07-16-2010, 07:34 AM
Thank You! I'll try!

:-D

c