Formular verschiebt padding!

Status
Nicht offen für weitere Antworten.
F

FXSR

Mitglied
Hi,

bei meiner Seite ist soll das Formular Linksbündig mit 85px sein, es verschiebt sich aber Automatisch ganz an den Rand....

Hier ist mal der Code, von der Seite mit Formular
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to www.GO-FASTER.de</title>

<style type="text/css">
body {
background: url("bsp Kopie.jpg") no-repeat center top;
}
p {
padding-left:85px;
}
p {
padding-right:85px;
}
.Stil2 {
	font-size: 12px;
	font-weight: bold;
}
</style>

<script type="text/javascript">
<!--
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];}}
}
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_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];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Button, Header/Catamaran_gelb.gif','Button, Header/Class One_gelb.gif','Button, Header/Home_gelb.gif','Button, Header/Kontakt_gelb.gif','Button, Header/V-Rumps_gelb.gif','Button, Header/Über uns_gelb.gif','Button, Header/Yacht_gelb.gif')">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="îndex.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Button, Header/Home_gelb.gif',1)"><img src="Button, Header/Home.gif" alt="Home" name="Home" width="150" height="35" border="0" id="Home" /></a><a href="class-one.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Class-One','','Button, Header/Class One_gelb.gif',1)"><img src="Button, Header/Class One.gif" alt="Class-One" name="Class-One" width="150" height="35" border="0" id="Class-One" /></a><a href="catamaran.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Catamaran','','Button, Header/Catamaran_gelb.gif',1)"><img src="Button, Header/Catamaran.gif" alt="Catamaran" name="Catamaran" width="150" height="35" border="0" id="Catamaran" /></a><a href="v-rumpf.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('V-Rumpf','','Button, Header/V-Rumps_gelb.gif',1)"><img src="Button, Header/V-Rumpf.gif" alt="V-Rumpf" name="V-Rumpf" width="150" height="35" border="0" id="V-Rumpf" /></a><a href="yacht.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Yacht','','Button, Header/Yacht_gelb.gif',1)"><img src="Button, Header/Yacht.gif" name="Yacht" width="150" height="35" border="0" id="Yacht" /></a><a href="über uns.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Über uns','','Button, Header/Über uns_gelb.gif',1)"><img src="Button, Header/Über uns.gif" name="Über uns" width="150" height="35" border="0" id="Über uns" /></a><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Button, Header/Kontakt_gelb.gif',1)"><img src="Button, Header/Kontakt.gif" alt="Kontakt" name="Kontakt" width="150" height="35" border="0" id="Kontakt" /></a></p>
<p align="left">&nbsp;</p>
<form id="form1" name="form1" method="post" action="">
  <div align="left">
    <table width="200" border="0">
      <tr>
        <th width="67" scope="col"><div align="left">Anrede</div></th>
        <th width="123" scope="col"><input type="radio" name="radio" id="Herr" value="Herr" />
        Herr 
          <input type="radio" name="radio" id="Frau" value="Frau" />
        Frau</th>
      </tr>
      <tr>
        <th scope="row"><div align="left">Name*</div></th>
        <td><input type="text" name="Name" id="Name" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Vorname*</div></th>
        <td><input type="text" name="Vorname" id="Vorname" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Firma</div></th>
        <td><input type="text" name="Firma" id="Firma" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Straße</div></th>
        <td><div align="left">
          <input type="text" name="Straße" id="Straße" />
        </div></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">PLZ</div></th>
        <td><div align="left">
          <input type="text" name="PLZ" id="PLZ" />
        </div></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Ort</div></th>
        <td><input type="text" name="Ort" id="Ort" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Land</div></th>
        <td><input type="text" name="Land" id="Land" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Telefon</div></th>
        <td><input type="text" name="Telefon" id="Telefon" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">Fax</div></th>
        <td><input type="text" name="Fax" id="Fax" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left">E-Mail*</div></th>
        <td><input type="text" name="E-Mail" id="E-Mail" /></td>
      </tr>
      <tr>
        <th scope="row"><div align="left"><strong>Anfrage</strong>*</div></th>
        <td><textarea name="Anfrage" id="Anfrage" cols="45" rows="5"></textarea></td>
      </tr>
      </table>
    <span class="Stil2"><br />
  Alle mit * gekennzeichneten Felder sollten ausgefüllt werden.</span></div>
</form>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
was muss ich ändern das Ich einen Abstand von 85px erhalte?
mfg
 
Hi,

erweiter einfach die vorhandene Regel im Stylesheet für das form-Element, denn ohne die entsprechende CSS-Formatierung richtet sich ein HTML-Element nunmal immer unmittelbar am linken Fensterrand aus.

Oder anders ausgedrückt: die derzeitige Regel gilt ausschliesslich für das p-Element, das einen Textabsatz auszeichnet, folglich verschiebt das Formular da keinen Innenabstand, da es überhaupt keinen besitzt.

Code: 
p, form {
padding-left:85px;
}
mfg Maik
 
Grundsätzlich funktioniert es beispielsweise so:

Code: 
img {
float:left;
}
form {
margin-left:80px; /* entspricht der Grafikbreite  */
}
Code: 
<img src="..." alt="...">
<form>...</form>
mfg Maik
 
Firmenlogo links in der Tableiste?

Du sprichst dann wohl von einem Favicon.

Code: 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Das Favicon befindet sich in diesem Beispiel im Rootverzeichnis.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück