| Autor |
Nachricht |
MBT
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 12.03.2007 18:38
Titel Problem mit "position:absolute" |
  |
|
Hallo Freunde!
Ich habe langsam schon Kopfschmerzen.
Mein Problem:
Ich bin zu blöd +
Ich habe einen Kunden der ein dreispaltiges div-Layout mit Header und Footer möchte.
Der gesamte Seiteninhalt soll sich in der Mitte in einem 750px breiten div zentrieren.
Bis hier alles OK - ABER:
der Inhalt der Content-Spalte soll im Source direkt nach dem <body> stehen und
die 3 Spalten sollen je nach Befüllung den Footer abwärts rücken.
Jetzt muss ich um die korrekte Anzeigereihenfolge herzustellen die divs absolut positionieren.
Wenn ich das tue, rücken sie aber den Footer nicht mehr abwärts, sondern legen sich einfach darüber.
Der Typ möchte das ganze dynamisch aus irgendeiner Datenbank füttern, daher ist es ihm so wichtig, dass alle drei die Möglichkeit haben den Footer zu schubsen.
Hier mein Source:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="content">
</div>
<div id="header">
</div>
<div id="navigation">
</div>
<div id="banner">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
Und hier das CSS:
| Code: | #banner {
background-color: #666;
margin-left: 600px;
position: absolute;
text-align: center;
top: 100px;
width: 150px;
}
#content {
background-color: #999;
margin-left: 150px;
margin-top: 100px;
text-align: left;
width: 450px;
}
#footer {
background-color: #CCC;
height: 50px;
text-align: center;
width: 750px;
}
#header {
background-color: #CCC;
height: 100px;
position: absolute;
text-align: center;
top: 0px;
width: 750px;
}
#main {
margin: auto;
text-align: left;
width: 750px;
}
#navigation {
background-color: #666;
position: absolute;
text-align: center;
top: 100px;
width: 150px;
}
body {
background-color: #fff;
color: #000;
font-family: Arial,Helvetica,sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
} |
Hilfe... bitte...
Ich weiß nich mehr weiter.
Danke schonmal im Voraus.
|
|
| |
|
 |
konsumkünstler
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 13.03.2007 12:17
Titel
|
|
|
bitte schön:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
#banner {
background-color: #666;
text-align: center;
top: 100px;
width: 150px;
float:left;
}
#content {
background-color: #999;
text-align: left;
width: 450px;
float:left;
}
#footer {
background-color: #CCC;
height: 50px;
text-align: center;
width: 750px;
clear:both
}
#header {
background-color: #CCC;
height: 100px;
text-align: center;
width: 750px;
}
#main {
position:absolute;
left:50%;
margin-left:-375px;
width: 750px;
}
#navigation {
background-color: #666;
text-align: center;
width: 150px;
float:left;
}
body {
background-color: #fff;
color: #000;
font-family: Arial,Helvetica,sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="banner">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
Zuletzt bearbeitet von konsumkünstler am Di 13.03.2007 12:20, insgesamt 1-mal bearbeitet
|
|
| |
   |
|
|
Anzeige
|
|
|
MBT
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 13.03.2007 20:14
Titel
|
|
|
Donnerwetter!
Vielen lieben Dank...
 
... für den satten Support und Deine Zeit!!!
edit: Oje, hab grad gesehen... das mit dem Content DIV nach dem öffnenden BODY-Tag geht wahrscheinlich nicht, oder? 
Zuletzt bearbeitet von am Di 13.03.2007 20:34, insgesamt 2-mal bearbeitet
|
|
| |
|
|
konsumkünstler
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 13.03.2007 22:36
Titel
|
|
|
gern geschehen. 
| MBT hat geschrieben: | | das mit dem Content DIV nach dem öffnenden BODY-Tag geht wahrscheinlich nicht, oder? |
was genau meinst du damit? das "content" div aus dem "main" div rausnehmen und vor das "main" packen?
|
|
| |
|
|
MBT
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 14.03.2007 02:09
Titel
|
|
|
Hallihallo!
Naja, das soll so weit wie möglich nach oben.
Es soll irgendwie kein anderer Inhalt davor stehen...
also z.B.:
| Code: | <body>
<div id="main">
<div id="content">
Inhaltstext..... |
Ich meinte erst zu ihm, dass man die DIVs ja an beliebiger Stelle im Source platzieren kann. Allerdings habe ich nicht daran gedacht, dass absolute DIVs auf die folgenden ja keinen Einfluss haben.
Und scrollbar sollen die auch nicht sein, sonst hätte ich einfach eine Höhe festgelegt und dann overflow. Langsam glaube ich allerdings, es wäre besser ich versuche ihn da irgenwie zu überreden...
Ich bin mit meinem Latein total am Ende. Ich mag kaum fragen, da Du Dir ja schon die Zeit genommen hast, mir zu helfen. Aber hättest Du noch eine Idee für mich? Ist nicht so dass ich es nicht versucht hätte...
Vielen Dank nochmal!!
|
|
| |
|
|
konsumkünstler
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 14.03.2007 11:10
Titel
|
|
|
ich verstehe nicht ganz was es für einen sinn machen soll wo im quellcode die divs plaziert sind.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
#banner {
background-color: #666;
text-align: center;
top: 100px;
width: 150px;
float:right;
}
#content {
background-color: #999;
text-align: left;
width: 450px;
float:left;
position:absolute;
left:50%;
top:100px;
margin-left:-225px
}
#footer {
background-color: #CCC;
height: 50px;
text-align: center;
width: 750px;
clear:both
}
#header {
background-color: #CCC;
height: 100px;
text-align: center;
width: 750px;
}
#main {
position:absolute;
left:50%;
margin-left:-375px;
width: 750px;
}
#navigation {
background-color: #666;
text-align: center;
width: 150px;
float:left;
}
body {
background-color: #fff;
color: #000;
font-family: Arial,Helvetica,sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="main">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="banner">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|
damit hast du zwar das div#content direkt als erstes element, allerdings schiebt es den footer nicht nach unten. du mußt dann eben drauf achten, dass die navigation oder banner container immer höher sind als dein content.
grüße
|
|
| |
|
|
MBT
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 14.03.2007 12:25
Titel
|
|
|
| konsumkünstler hat geschrieben: | | ich verstehe nicht ganz was es für einen sinn machen soll wo im quellcode die divs plaziert sind. |
 wollte der Kunde so...
Obwohl ich das jetzt auch schon seit nem Jahr mache, gab es bis jetzt noch nie Vorgaben für die Formatierung des Quelltextes. Ich hoffe, sowas kommt so schnell nicht nochmal. 
Entschuldige die Umstände, die ich Dir gemacht habe und vielen, vielen Dank.
Du hast mir wirklich sehr geholfen und ich hoffe, ich kann mich mal revanchieren.
Viele liebe Grüße
Thomas
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Position:absolute Problem im Firefox
position absolute und footer problem
[css] safari und position: absolute;
[CSS] rotate + position fixed/absolute
jQuery - Absolute Position mit .offset() ermitteln?
mal wieder div position:absolute oder relative
|
|
Willkommen auf dem Portal für Mediengestalter
