Probleme mit padding

Status
Nicht offen für weitere Antworten.
S

schiese

Erfahrenes Mitglied
Hallo, ich habe folgenden Code, funktioniert auch super, nur wenn ich jetzt will, dass die Anmeldeboxen nach oben, unten und nach rechts 4px Abstand haben, haut es nicht hin, da die Box insgesamt breiter wird und nach unten habe ich mehr als 4px.

Code: 
<html>
<head>
<title></title>
<style type="text/css">
<!--

#rechtsoben{
width:100%;
padding:3;
background-color:rgb(204,0,0);
text-align:right;
}

.loginfelder{
width:78px;
height:16px;
font-size:8pt;
font-family:Arial;
border:1px solid black;
}

#loginbutton{
width:40px;
height:16px;
font-size:8pt;
font-family:Arial;
border:1px solid black;
background-color:rgb(230,230,230);
}

//-->
</style>
</head>
<body>


  <div id="rechtsoben">
  <form method="post" action="login.php"><input class="loginfelder" type="text" name="loginname" maxlength="10"> &nbsp; <input class="loginfelder" type="text" name="loginpasswort" maxlength="10"> &nbsp; <input id="loginbutton" type="submit" value="Go"></form>
  </div>


</body>
</html>

Hat vielleicht jemand eine Idee?

schiese
 
Setz mal die Polsterungseigenschaften des Formulars auf null, entferne die erzwungenen Leerzeichen &nbsp; zwischen den input-Elementen und definiere stattdessen einen rechten Außenabstand für die Klasse .loginfelder.

Code: 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#rechtsoben{
width:100%;
padding:4px;
background-color:rgb(204,0,0);
text-align:right;
}

form {
margin: 0;
padding: 0;
}

.loginfelder{
width:78px;
height:16px;
font-size:8pt;
font-family:Arial;
border:1px solid black;
margin-right:4px;
}

#loginbutton{
width:40px;
height:16px;
font-size:8pt;
font-family:Arial;
border:1px solid black;
background-color:rgb(230,230,230);
}
-->
</style>
</head>
<body>

<div id="rechtsoben">
  <form method="post" action="login.php">
        <input class="loginfelder" type="text" name="loginname" maxlength="10"><input class="loginfelder" type="text" name="loginpasswort" maxlength="10"><input id="loginbutton" type="submit" value="Go">
  </form>
</div>

</body>
</html>
 
Danke, funktioniert bestens. Habe nur die Breite von 100% auf 640px geändert, sodass er nicht in die nächste Tabelle ragt.

schiese
 
Habe jetzt doch noch ein Problem festgestellt, also mit dem IE zeigt er es richtig an, aber mit Firefox ist das div zu breit.

css.css
Code: 
body{
margin:5px;
font-size:10pt;
font-family:Arial, sans-serif;
}

table.haupt{
border-collapse:collapse;
border:1px solid black;
}

table.haupttabellerechts{
border-collapse:collapse;
margin:0;
width:100%;
}

td.haupttdrechts{
width:650px;
}

td.haupttdlinks{
width:150px;
border-right:1px solid black;
}

.loginfelder{
width:78px;
height:16px;
font-size:8pt;
font-family:Arial, sans-serif;
border:1px solid black;
margin-right:4px;
}

#loginbutton{
width:40px;
height:16px;
font-size:8pt;
font-family:Arial, sans-serif;
border:1px solid black;
background-color:rgb(230,230,230);
color:rgb(0,0,0);
}

#rechtsoben{
width:100%;
padding:4px;
background-color:rgb(150,0,0);
text-align:right;
color:rgb(0,0,0);
}

form {
margin: 0;
padding: 0;
}

index.php
Code: 
<?php
include("config.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="menu.js"></script>
</head>
<body>



<table border="0" class="haupt">
 <tr>
  <td class="haupttdlinks" valign="top">

<table border="0" class="haupttabellelinks">
 <tr>
  <td><?php include("menu.php"); ?></td>
 </tr>
</table>

  </td>
  <td class="haupttdrechts" valign="top">

<table border="0" class="haupttabellerechts">
 <tr>
  <td>

  <div id="rechtsoben">
  <form method="post" action="login.php"><input class="loginfelder" type="text" name="loginname" maxlength="20" value="Benutzername" onFocus="if(this.value=='Benutzername')this.value=''" onBlur="if(this.value=='')this.value='Benutzername'"> <input class="loginfelder" type="password" name="loginpasswort" maxlength="10" value="Passwort" onFocus="if(this.value=='Passwort')this.value=''" onBlur="if(this.value=='')this.value='Passwort'"> <input id="loginbutton" type="submit" value="Go"></form>
  </div>


  </td>
 </tr>
</table>

  </td>
 </tr>
 <tr>
  <td colspan="2" align="center" style="font-size:8pt; font-family:Arial, sans-serif; border-top:1px solid black; background-color:rgb(120,120,120); color:white;"><?php include("zeileunten.php"); ?></td>
 </tr>
</table>


</body>
</html>

Hat vielleicht jemand eine Idee?

schiese
 

Anhänge

  • 26787attachment.jpg
    26787attachment.jpg
    7,5 KB · Aufrufe: 14
  • 26788attachment.jpg
    26788attachment.jpg
    7,8 KB · Aufrufe: 10
Gemäß dem Boxmodell wird die padding-Eigenschaft zur Breiten- / Höhenangabe eines Elements hinzuaddiert und ergibt so die tatsächliche Elementbreite / -höhe.

Der von dir verwendete Doctype versetzt den IE aber in den sog. Quirksmodus, weshalb er das Boxmodell falsch interpretiert und das DIV #rechtsoben zu schmal darstellt, Firefox hingegen interpretiert das Stylesheet korrekt.
 
So, jetzt funktionierts. Habe dazu der Box einen festen Wert gegeben und den Doc-Type geändert.

Code: 
#rechtsoben{
width:642;
padding:4px;
background-color:rgb(150,0,0);
text-align:right;
color:rgb(0,0,0);
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Das einzige, was mir jetzt noch komisch vorkommt ist, dass der Button und die Input-Felder eine unterschiedliche Höhe haben, obwohl beide eigentlich 16px hoch sein sollten.

schiese
 
Ich empfehle dir, auf die Höhenangabe für die Eingabefelder und den Submit-Button zu verzichten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück