✔ Feldunten immer unter Textfeld

Status
Nicht offen für weitere Antworten.
4

4udesigns

Erfahrenes Mitglied
Hallo,
Wie bekomme ich es hin, dass das #Feldunten immer 50px unter #Textfeld ist, egal wie lang das Textfeld ist?
 
Ja und was soll ich dann mit Feldunten machen?
Schließlich würde es ja bleiben wo es ist.
Wie bekomme ich es nach unten?
 
Wenn es dir an der Vorstellungskraft fehlt, wie sich die beiden Boxen zueinander verhalten, wenn für #Textfeld ein unterer bzw. für #Feldunten ein oberer Außenabstand eingerichtet wird, schau dir entweder einfach mal die Beispiele zu meinen beiden genannten Links an, oder lade dieses Modell in den Browser deines Vertrauens, und befülle #Textfeld mit einem beliebig langen Text.

Code: 
<div id="Textfeld">...</div>
<div id="Feldunten">...</div>
Code: 
#Textfeld {
margin-bottom:50px;
border:1px solid #000;
}

#Feldunten {
border:1px solid #000;
}
Soviel sei hier aber verraten: Mit jeder Zeile, die das Textfeld durch seinen enthaltenden Text an Höhe gewinnt, verschiebt sich #Feldunten automatisch nach unten.

mfg Maik
 
Aber bei diesem Code ist das Feldunten, ganz oben.
Code: 
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
#Header_oben {
position: absolute;
left: 105px;
top: 40px;
height: 145px;
width: 800px;
background-color: #ffffff;
background-image:url();
color: #EBB000;
border: 1px solid #888888;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;}

body {background-color: #dddddd;background-image:url();}

a{color:#ff00cc; font-size: 15px; text-decoration: none;}

a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

#nav_container {
position: absolute;
left: 105px;
top: 186px;
width: 800px;
height: 52px;
background-color: #xxx;
color: #ff00cc;
border: 0px solid #888888;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;overflow:auto;
background-image: url();}

#Textfeld {
position: absolute;
left: 105px;
top: 200px;
width: 610px;
background-color: #ffffff;
color: #ff00cc;
background-image: url();
border: 1px solid #888888;
margin-bottom: 50px;
padding: 10px 10px 0px 10px;
display: inline;
float: left;}

#sidebar_container {position: absolute;
left: 752px;
top: 200px;
width: 143px;
height: 450px;
background-color: #ffffff;
color: #ff00cc;
border: 1px solid #888888;
margin-bottom: 50px;
padding: 0px 0px 0px 0px;
float: left;overflow:auto;
background-image: url();}

#Feld_unten {
width: 780px;
background-color: #ffffff;
color: #ff00cc;
clear: both;
border: 1px solid #888888;
padding: 10px;}
</style>
</head>
<body>

<div id="Header_oben">Der Header</div>

<div id="nav_container"></div>

<div id="sidebar_container">Hier die rechten Boxen</div>

<div id="Textfeld">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div id="Feld_unten">Hier die Fußzeile</div>

</body>
</html>
 
Sorry, aber du bist schon auf eine gewisse Art ein Spaßvogel :rolleyes:

Woher soll ich denn bitte wissen, dass du die ganze Zeit von einem konkret vorliegenden Seitenlayout sprichst?

Dass #Feld_unten in der Seite ganz oben ausgerichtet wird, liegt einfach an der Tatsache, dass alle übrigen Seitenbereiche mit ihrer absoluten Positionierung aus dem normalen Textfluss herausgenommen wurden, und das nicht-positionierte Element somit automatisch nach oben rutscht.

mfg Maik
 
Ja, das Element kann ich ja positionieren(top:..)
Aber Ich weiß nich wie ich es immer unter das Textfeld bekomme.Also egal wie lang das Textfeld ist.
 
Indem du einfach die absoluten Positionierungen im Dokument aufhebst:

Code: 
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body {background-color: #dddddd;background-image:url();}

a{color:#ff00cc; font-size: 15px; text-decoration: none;}

a:hover {color: #ff99ff; font-size: 15px; text-decoration: none;}

a:link {color: #ff00ff; font-size: 15px; text-decoration: none;}

a:active {color: #cc00cc; font-size: 15px; text-decoration: none;}

a:visited {color: #9900cc; font-size: 15px; text-decoration: none;}

#Wrapper {
width:800px;
margin-left:145px;
}

#Header_oben {
margin-top: 40px;
height: 145px;
width: 800px;
background-color: #ffffff;
background-image:url();
color: #EBB000;
border: 1px solid #888888;
padding: 0px;
}

#nav_container {
margin-top: 1px;
width: 800px;
height: 52px;
background-color: #fff;
color: #ff00cc;
border: 0px solid #888888;
padding: 0px 0px 0px 0px;
overflow:auto;
background-image: url();
}

#Textfeld {
width: 610px;
background-color: #ffffff;
color: #ff00cc;
background-image: url();
border: 1px solid #888888;
margin-bottom: 50px;
padding: 10px 10px 0px 10px;
display: inline;
float: left;
}

#sidebar_container {
width: 143px;
height: 450px;
background-color: #ffffff;
color: #ff00cc;
border: 1px solid #888888;
margin-bottom: 50px;
padding: 0px 0px 0px 0px;
float:right;
overflow:auto;
background-image: url();
}

#Feld_unten {
width: 780px;
background-color: #ffffff;
color: #ff00cc;
clear: both;
border: 1px solid #888888;
padding: 10px;
}
</style>
</head>
<body>

<div id="Wrapper">
     <div id="Header_oben">Der Header</div>
     <div id="nav_container">nav_container</div>
     <div id="Textfeld">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
      <div id="sidebar_container">Hier die rechten Boxen</div>
      <div id="Feld_unten">Hier die Fußzeile</div>
</div><!-- // ENDE #Wrapper -->

</body>
</html>
Ein eventuell erforderliches "Feintuning" darfst du dann selber vornehmen ;-)

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück