textarea ragt raus

nieselfriem · 18 Oktober 2007

hallo ich habe folgenden html code

Code:

<html>
<head>
<title>Blabla</title>
 <link rel="stylesheet" type="text/css" href="css/format.css"/>
</head>
<body class="bg">
<div class="simpleaskset">
<p class="verd">blabla?</p>
       <span class="flow1"><input type = radio name="x151"  value="1" <?   if ($x151==1){echo "checked";}?>/>ja </span>   
       <span class="flow2"><input type = radio name="x151"  value="2" <?   if ($x151==2){echo "checked";}?>/>nein</span></p><br/>
         <span class="flow1">
         <textarea rows="8"  cols=" 70"  name="x4"><?    if ($_REQUEST && (strlen($x4)>1)) { echo "$x4"; } ?></textarea> </span>
         
    </div>
</body>
</html>

und folgendes einfaches CSS

Code:

div.simpleaskset

{
    border:thin solid grey;
    padding:10pt;
    padding-bottom:20pt;
    font-family:Verdana;
    font-size:small;
}

h2.uebschr
{
    text-align:center;
    font-family:Verdana;
}

h1.uebschr
{
    text-align:center;
    font-family:Verdana;
}



div.multiaskset

{
font-family:Verdana;
    border:thin solid grey;

    padding:10pt;

    padding-bottom:20pt;
font-size:small;
}



span.multiasktext

{

position:absolute; left:20pt;
font-family:Verdana;
font-size:small;
}

span.multiaskscale0
{

    position:absolute; left:100pt;
    font-family:Verdana;
    font-size:small;
}

span.multiaskscale1
{
    font-family:Verdana;
    position:absolute; left:300pt;
    font-size:small;
}

span.multiaskscale2
{
    position:absolute; left:360pt;
    font-family:Verdana;
    font-size:small;
}

span.multiaskscale3
{
    font-family:Verdana;
    font-size:small;
    position:absolute; left:420pt;
}

span.multiaskscale4
{
    position:absolute; left:480pt;
    font-family:Verdana;
    font-size:small;
}

span.multiaskscale5
{
    position:absolute; left:540pt;
    font-family:Verdana;
    font-size:small;
}



span.multiaskscale6
{
    position:absolute; left:600pt;
    font-family:Verdana;
    font-size:small;
}

img.right
{
    float:right;
}

img.left
{
    float:left;
}

div.bild
{
	padding-bottom:50pt;
	margin-bottom:10pt;
}











span.flow1
{
    position:absolute; left:20pt;
    font-family:Verdana;
    font-size:small;
}



span.flow2
{
    position:absolute; left:160pt;
    font-family:Verdana;
    font-size:small;
}

span.flow3
{
    position:absolute; left:300pt;
    font-family:Verdana;
    font-size:small;
}

span.flow4
{

    position:absolute; left:440pt;
    font-family:Verdana;
    font-size:small;
}



span.flow5
{

    position:absolute; left:600pt;
    font-family:Verdana;
    font-size:small;
}



span.flow6
{
    position:absolute; left:80pt;
    font-family:Verdana;
    font-size:small;
}

p.verd
{
    font-family:Verdana;
    font-size:small;
    font-weight:bold;
}

span.flow7
{

    position:absolute; left:500pt;
    font-family:Verdana;
    font-size:small;
}	

body.bg
{
    background-color:aliceblue;
}

nur leider ragt das textfeld immer aus der umrahmung heraus.

Was läuft da schief? und wie kann man das vermeiden?

Gruß niesel

Blacky · 19 Oktober 2007

Das liegt daran, dass du absolut positionierst.
Beheben kannst du das, indem du nicht absolut positionierst, sondern relativ.
Das bedeutet, dass sich alle Elemente aufeinander beziehen und das brauchst du auch.
Damit du meine Hilfe nachvollziehen kannst, entferne einfach nur die Anweisung "position: absolute;" aus flow1 und flow2.

Desweiteren empfehle ich dir dringend, mal ein wenig über "position: absolute" und "position: relative" in Erfahrung zu bringen.
Relativ wird allerdings auch ohne die Angabe "position: relative" gearbeitet, weil es standard ist.

Als letztes möchte ich dir ans Herz legen, deine Codes zu optimieren.
Vorallem dein Stylesheet ist richtig ... schlimm.
Such mal bei Google nach Stylesheet optimieren etc.

textarea ragt raus

nieselfriem

Mitglied

Blacky

Neues Mitglied

Neueste Beiträge