nicht angemeldet
DIV Positionieren
Hallo,
ich versuche gerade ein paar DIV-Container zu positionieren. Dabei habe ich aber ein Problem:
Wie kann ich den Anfang eines DIV Bereichs von dem Ende eines anderen Div Bereichs abhängig machen? Die 2 Bereich sollen dann übereinander sein. Und der Obere hat eine Dynamische höhe.
Der COde dazu sieht so aus:
<!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>
<link href="template_css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="poslogin">poslogin</div>
<div id="altmenue">altmenue</div>
<div id="pospath">pospath</div>
<div id="obenuser1">obenuser1</div>
<div id="obenuser2">obenuser2<br>asdasdsd</div>
<div id="links">Links</div>
<div id="hauptteil">hauptteil<br>das muss man noch an den oberen<br>div ausrichten</div>
<div id="mitterechts">mitterechtsssss</div>
<div id="rechts">rechts</div>
<div id="untenuser1">untenuser1</div>
<div id="untenuser2">untenuser2<br>asdasdsd</div>
<div id="unten">unten</div>
</body>
</html>
Und die CSS Datei:
/*Formatierung für die DIV Kontainer*/
#poslogin {
position: absolute;
left: 520px;
top: 50px;
width: 400px;
height:60px;
background-color: blue;
}
#altmenue {
position: absolute;
left: 120px;
top: 110px;
width: 800px;
height:40px;
background-color: green;
}
#pospath {
position: absolute;
left: 120px;
top: 150px;
width: 800px;
height:30px;
background-color: blue;
}
#obenuser1 {
position: absolute;
left: 120px;
top: 180px;
width: 250px;
background-color: green;
}
#obenuser2 {
position: absolute;
left: 370px;
top: 180px;
width: 250px;
background-color: green;
}
#links {
position: absolute;
left:0px;
width: 120px;
top: 230px;
background-color: #000;
}
#hauptteil{
position: absolute;
left: 120px;
width: 500px;
background-color: gray;
}
#mitterechts {
position: absolute;
left: 620px;
width: 150px;
top: 180px;
background-color: red;
}
#rechts {
position: absolute;
left: 770px;
width: 150px;
top: 180px;
background-color: yellow;
}
#untenuser1 {
position: absolute;
left: 120px;
width: 250px;
bottom:25px;
background-color: red;
}
#untenuser2 {
position: absolute;
left: 370px;
width: 250px;
bottom:25px;
background-color: blue;
}
#unten {
position: absolute;
left: 0px;
width: 920px;
background-color: blue;
height:20px;
bottom:5px;
}
/*Box Border und Abstände werden in einer Zeile mitgegeben*/
#rechts,#mitterechts,#hauptteil,#links{
border: 0px solid #564b47;
padding:0px;
margin:0px;
}
/*Die Abstände vom Box-Rand zum Text werden über padding gersteuert. Sie werden dem p oder dem h1 tag mitgegeben.*/
p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}
Vielen Dank
Wortspiel
-
Hi,
Wie kann ich den Anfang eines DIV Bereichs von dem Ende eines anderen Div Bereichs abhängig machen?
nicht durch absolute Positionierung. Beschäftige Dich eher mit den Möglichkeiten, die float/clear Dir bietet.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi Joachim,
danke für die schnelle Antwort. Mir war nicht bewusst, dass ich mit float und clear die DIV Bereiche in der höhe verschieben kann. Ganz bin ich da auch noch nicht durchgestiegen.
Aber noch eine weitere Info. Ich möchte aus dieser CSS Formatierung dann ein Template für Joomla basteln. Für dieses CMS gibt es leider nur wenige die auf DIV's aufbauen, sondern auf Tabellen. Ich möchte mal ausprobieren, ob es auch mit DIV's geht.
Durch den kommenden Inhalt werden dann ja noch evtl. weitere DIV Bereiche mit eingefügt gibt es dann Probleme mit Vererbung oder so?mfg
Wortspiel-
hi,
Mir war nicht bewusst, dass ich mit float und clear die DIV Bereiche in der höhe verschieben kann.
Kannst du auch nicht.
Aber noch eine weitere Info. Ich möchte aus dieser CSS Formatierung dann ein Template für Joomla basteln. Für dieses CMS gibt es leider nur wenige die auf DIV's aufbauen, sondern auf Tabellen. Ich möchte mal ausprobieren, ob es auch mit DIV's geht.
Dann verzichte bitte auf absolute Positionierung.
Sie ist für Sonderfälle gedacht, aber nicht dafür jedes einzelne Element einer Seite auszurichten.Und das Anfänger, die ihre Auswirkungen noch gar nicht einschätzen können, besser die Finger davon lassen sollten, solange sie sich nicht intensiver damit beschäftigt haben, wurde hier auch schon des öfteren angeraten.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi
Wozu würdest du mir denn dann raten? Doch lieber Tabellen, oder feste Platzierungen? Das wiedrum spricht ja gegen eine Dynamische Seite ;-)
-
hi,
Wozu würdest du mir denn dann raten?
Zu strukturell sinnvollem HTML, auf dem dann CSS aufsetzt.
Doch lieber Tabellen, oder feste Platzierungen?
Weder noch.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Zu strukturell sinnvollem HTML, auf dem dann CSS aufsetzt.
Das klint gut. Hättest du auch ein konkretes Beispiel? Wie man das am besten macht. Wenn ich danach suche, bekomme ich eigentlich solche VOrlagen, wie ich sie erstellt habe. Aber diese behandeln natürlich nicht mein Problem.
-
-
-
-
-