LinkBack URL
About LinkBacks
Div-Container in Div-Container anordnen
Hallo,
nach über 10 Jahren habe ich die Entwicklung verschlafen und fange jetzt erst an mich mit den Div-Container ausgibig zu befassen. Früher, oder bis vor kurzem habe ich noch alles mit Tabellen gemacht, wie es noch vor über 10 Jahren üblich war. Als die Entwicklung sich Richtung DIV statt Tabellen bewegte, habe ich mich nicht mit dem Thema befasst, vorallem weil ich nicht mehr in dieser Branche tätig war. :(
Jahrelang hatte ich eine nicht ausgereifte Version von IP-CMS, deren Lizenz ich mal günstig gekauft hatte. Doch da diese Version nicht ausgereift ist und ich schon seit einigen Jahren Joomla beobachte, musste natürlich irgendwann der Tag kommen, an dem ich mich mit Joomla befasse. Heute oder seit einigen Tagen, ist es soweit.
Ich arbeite an einem Template und bin langsam am verzweifeln. Ich möchte im Header zwei Container rechts unten anordnen in einem anderen Container. Das habe ich wie folgt versucht:
index.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/templates/betriebsschliessung_ws/css/template.css" />
</head>
<body>
<div id="all" align="center">
<div id="Teil1">
<div id="Logo"><!--<img src="/templates/betriebsschliessung_ws/img/likedeeler-skull_banner.gif" border="0" />-->
<div id="Menue">Menue</div>
<div id="User">Benutzeranmeldung</div>
</div></div>
<div id=Teil2>Hauptbereich
<div id="Content">Inhalt</div>
</div>
<div id="Teil3">
<div id="Footer">Fusszeile</div>
</div>
</div>
</body>
</html>
Der Div-Container Logo soll rechts unten die Container Menue und User beherbergen. betriebsschliessung_ws-header.jpg
Die CSS-Datei (template.css) sieht wie folgt aus:
...
body {
background-image: url(/templates/betriebsschliessung_ws/img/background.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#Teil1 { /*header*/
width: 100%;
height: 140px;
}
#Teil2 { /*main*/
background-color: #FFFFFF;
height: 18em;
width: 100%;
border:1px solid black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#Teil3 { /*footer*/
width: 100%;
height: 18em;
}
#all { /*gesamtbereich*/
width: 740px;
position:fixed;
position:absolute; left:50%; margin-left:-370px;
}
#Logo { /*Logo*/
background-image:url(/templates/betriebsschliessung_ws/img/likedeeler-skull_banner.gif);
border: 2px dotted #30C;
width: 740px;
height: 138px;
}
#Menue { /*oben links*/
border: 2px dotted #FF0;
float:left;
width: 400px;
position: relative; left: 140px; bottom: 0px;
}
#User { /*oben rechts*/
border: 2px dotted #390;
float: right;
width: 200px;
position: relative; bottom: 0px;
}
#Content { /*linke Seite*/
margin: 0 auto;
clear: both;
width: 660px;
background-color: lightgrey;
}
#Footer { /*Fusszeile / Footer*/
width: 740;
}
Zu erreichen ist die Website unter: www.betriebsschliessung.ws.
Leider habe ich keine Idee, was ich falsch gemacht habe, schließlich habe ich in der CSS-Datei den Containern Menue und User die Position: relative; bottom:0px; gegeben und sie hängen trotzdem rechts oben.
Den Code für die Joomla-Sachen habe ich noch nicht drinn, weil ich erstmal dieses Problem lösen muss. Ich hoffe, ich finde hier jemannden, der mir weiterhelfen kann.
LG Sashi
Zitieren
Ich habe mir auch Dein Link angesehen und mir "positionieren" durchgelesen und stolpere noch immer nicht über den Fehler.
Lesezeichen