Ich habe zwei DIV-Container, wobei der zweite relativ zum ersten (darunter) positioniert werden soll.
Das Problem: Ich kann den zweiten Container nicht direkt nach dem ersten definieren. Es kann also vorkommen, das der zweite Container irgendwo definiert wird, nur nicht direkt am ersten Container. Ist das möglich?
Hallo.
Ja, das ist möglich.
Mehr kann ich vielleicht sagen wenn ich deinen Code gesehen habe.
Gruss
Elroy
Im Template steht folgendes. Ich habe mal alles Überflüssige weggelassen:
[HTML]
Eine zweite Variante, die mir gerade einfällt: Ich setze in das Template unter die Box right2 eine Box right3 und fülle die später mit Javascript, das ich in den Content für {CONTENT} schreibe. Das wäre aber eine unschöne Lösung.
Hallo.
Was ist das jetzt genau?
Selbst erstellter Code, ein Template, ein CMS oder was?
Das Aussehen deine Webseite wird mit CSS gemacht, wenn du also glaubst das dein CSS für die Problemmlösung überflüssig ist dann hast du den Sinn von CSS nicht verstanden.
Was ich jetzt nicht verstanden habe ist was du eigentlich willst.
Willst du noch eine Box unter der right2 haben oder willst du das die right2 direkt unter der right1 plaziert ist, oder etwas ganz anderes?
Gruss
Elroy
Was ist das jetzt genau?
Selbst erstellter Code, ein Template, ein CMS oder was?
So sieht’s aus, wenn ich mein Posting im Nachhinein betrachte. Für die Problemlösung ist das aber unerheblich.
Das Aussehen deine Webseite wird mit CSS gemacht, wenn du also glaubst das dein CSS für die Problemlösung überflüssig ist dann hast du den Sinn von CSS nicht verstanden.
Ich habe in meinem Posting bereits geschrieben, das das einzige für die Positionierung wichtige CSS float:left ist. Ich wüßte nicht was color, font-family, width etc. mit der Positionierung zu tun haben.
Was ich jetzt nicht verstanden habe ist was du eigentlich willst.
Willst du noch eine Box unter der right2 haben oder willst du das die right2 direkt unter der right1 plaziert ist, oder etwas ganz anderes?
Ich wiederhole noch einmal: „… eine DIV-Box einbinden, die dann unter der DIV-Box mit der ID right2 erscheinen soll …“. Ich glaube, ich hatte das klar genug ausgedrückt. Aber jetzt nochmal mit anderen Worten: Ich habe kein Problem mir right1 und right2, sondern will unter right2 eine weitere Box einbinden, die aber nicht dort definiert werden darf.
Zur Veranschaulichung eine Darstellung:
L1 R1
R2
R3L1 = Contentbox in der linken Spalte
R1 bis R3 = Contentboxen in der rechten Spalte
R3 kann durch das CMS bedingt, nur innerhalb der Contents für L1 erzeugt werden. Frag mich nicht warum. Es ist einfach so.
R3 würde also normalerweise innerhalb L1 liegen und sich entsprechend darin ausrichten. Ich will aber R3 unter R2 plazieren. Jetzt dachte ich, es gäbe vielleicht eine Referenz, so in der Form:
position:relative zu R2;Diese Lösung hattest Du mir in Deinem ersten Posting angeboten. Ich zitiere:
Ja, das ist möglich.
Nach Recherchen gibt es aber wohl nur Javascript-Lösungen. Die bekannteste ist die mit innerHTML. Dazu nehme ich meine bereits dargestellte Boxenanordnung
L1 R1
R2
R3und schreibe jetzt in den Content für die Box L1 einen Javascript-Befehl:
document.getElementById("R3").innerHTML = "Text";Das klappt soweit wunderbar, ist aber halt eine Javascript-Lösung und muß beim Laden der Seite mitgeladen (body onload) werden. Außerdem hat innerHTML ein Problem mit Zeilenumbrüchen und bei Benutzung von Anführungszeichen und Hochkommata muß man auch vorsichtig sein.
So. Und jetzt bin ich gespannt auf Deine CSS-Lösung!
Viele Grüße
Frank
Die du aber nicht bekommen wirst.
Ich will einen vollständigen HTML und CSS Code sehen, wenn das deiner Meinung nach unerheblich ist musst du eben deine Javascript Lösung nehmen.
Ich bin hier raus.
Gruss
Elroy
Wenn’s weiterhilft…
Das Template:
[HTML]
acronym { cursor: help; border-bottom: 1px dashed #999; }
a { text-decoration: none; color: #369; border-bottom: 1px dashed #369; }
a:hover { border-bottom: 1px dashed #49515C; color: #49515C; }
em { font-style:normal; }
.deadlink {
color:#aa0000;
text-decoration:line-through;
}
.highlight {
padding:0px 1px;
font-size:inherit;
background-color:#dd0000;
color:#ffffff;
font-size:inherit;
}
/------------------------------------------------------------
** Container
**------------------------------------------------------------*/
#container {
margin-left : auto;
margin-right : auto;
margin-top : 5px;
width : 980px;
background : transparent;
border : 1px solid #808080;
padding : 0px;
text-align : left;
}
/------------------------------------------------------------
** Header
**------------------------------------------------------------*/
#header {
background : url(…/grafiken/banner_wide.jpg) no-repeat;
padding : 0px;
height : 150px;
}
/------------------------------------------------------------
** Nav
**------------------------------------------------------------*/
#nav {
background : #858F9E;
border-bottom : 0px solid #fff;
margin : 0px;
padding : 0px;
}
#nav ul {
padding : 0px;
}
#nav li {
list-style-type : none;
display : inline;
line-height : 32px;
}
#nav li a {
text-transform : uppercase;
width : 140px;
height : 32px;
text-align : center;
text-decoration : none;
color : #ffffff;
line-height : 32px;
background : url(…/grafiken/navBlank.jpg);
font-family : Arial,Helvetica,sans-serif;
border : 0px;
padding : 0px;
font-size : 12px;
float : left;
}
#nav li a.menuactive {
color : black;
text-decoration : none;
background : url(…/grafiken/navBlank_a.jpg);
}
#nav li a:hover {
color : black;
text-decoration : none;
background : url(…/grafiken/navBlank_o.jpg);
}
#nav li a.on {
background-color: #49515C;
color: #C6C4C5;
}
/------------------------------------------------------------
** Galerie
*------------------------------------------------------------/
ul.gallerynumbermenu {
margin: 0px;
padding: 0px;
}
li.gallerynumbermenu {
display:inline;
padding-right: 7px;
}
/------------------------------------------------------------
** Side Bar
*------------------------------------------------------------/
#sidebar {
float: left;
width: 175px;
position: relative;
line-height: 20px;
word-spacing: 2px;
}
#sidebar div { background: #fff url(…/grafiken/para_bg.jpg) repeat-x; }
/------------------------------------------------------------
** Side Bar & Content
*------------------------------------------------------------/
#sidebar h3{
font-size: 1.1em;
color: #49515C;
margin: 0 10px 0 0;
cursor: default;
}
#sidebar div {
padding: 1px 0 10px 0;
border-top: 1px solid #ddd;
padding: 10px;
}
/------------------------------------------------------------
** Content
**------------------------------------------------------------*/
#content {
width : 617px;
float : left;
margin : 0px;
padding : 0px;
min-height : 300px;
}
#contenttop {
background-image : url(…/grafiken/leftBoxBackTop.png);
height : 10px;
display : block;
}
#contentbody {
background-image : url(…/grafiken/leftBoxBack.png);
padding-top : 1px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
#contentbottom {
background-image : url(…/grafiken/leftBoxFoot.png);
height : 10px;
display : block;
}
#gallerycontent {
float: left;
width: 550px;
position: relative;
margin-left: 15px;
line-height: 20px;
text-align: center;
word-spacing: 2px;
}
.embeddedgallery {
text-align:center;
}
/------------------------------------------------------------
** Rechte Sidebar
**------------------------------------------------------------*/
#right1 {
width : 360px;
float : right;
margin : 0px;
padding : 0px;
}
#righttop1 {
background-image : url(…/grafiken/rightBoxBackTop.png);
height : 10px;
display : block;
}
#rightbody1 {
background-image : url(…/grafiken/rightBoxBack.png);
padding-top : 1px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
#rightcontent1 {
background-image : url(…/grafiken/rightBoxBack.png);
padding-top : 1px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
#rightbottom1 {
background-image : url(…/grafiken/rightBoxFoot.png);
height : 10px;
display : block;
}
#right2 {
width : 360px;
float : right;
margin : 0px;
padding : 0px;
}
#righttop2 {
background-image : url(…/grafiken/rightBoxBackTop.png);
height : 10px;
display : block;
}
#rightbody2 {
background-image : url(…/grafiken/rightBoxBack.png);
padding-top : 1px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
#rightcontent2 {
background-image : url(…/grafiken/rightBoxBack.png);
padding-top : 1px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
#rightbottom2 {
background-image : url(…/grafiken/rightBoxFoot.png);
height : 10px;
display : block;
}
/------------------------------------------------------------
** Footer
**------------------------------------------------------------*/
#footer {
background: #49515C url(…/grafiken/header_right.gif) no-repeat 100% 0;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
#footer a { text-decoration: none; color: #A2AFBF; border-bottom: 1px dashed #A2AFBF; }
#footer a:hover { border-bottom: 1px dashed #fff; color: #fff; }
[/HTML]Der Platzhalter {CONTENT} wird zur Laufzeit mit (HTML-)Code gefüllt. An dieser Stelle würde auch die DIV-Box right3 definiert werden. Erscheinen soll sie aber unter der Box right2.
Das hier könnte klappen. Ich musste die Elemente aber arg verschieben. (Nur im Firefox getestet.)
Ich glaube, günstiger wäre es, wenn du dich in dem CMS umsiehst, ob es möglich ist, einen weiteren Platzhalter wie {CONTENT} zu definieren. So im Sinne von {RIGHT3}.
[html]
{WEBSITE_TITLE} #container { width: 600px; } #left1 { width: 600px; background: #ccc; } #left1-content { background: #c00; margin-right: 300px; height: 500px; } #right1, #right2 { float: right; clear: right; width: 300px; } #right1 { background: #0c0; height: 100px; } #right2 { background: #00c; height: 100px; } #right3 { background: #cc0; float: right; clear: right; width: 300px; }<div id="container">
<div id="right1">
#right1
</div>
<div id="right2">
#right2
</div>
<div id="left1">
<div id="right3">
#right3
</div>
<div id="left1-content">
#left1-content
</div>
</div>
</div>
Ich werde das mal bei Gelegenheit testen. Vielleicht ist das eine Variante die ich alternativ zur jetzt gemachten CMS-Lösung benutzen kann. Vielen Dank für Deine Mühe!
Für das von mir verwendete moziloCMS gibt es nur eine Plugin-Lösung. Dabei wird der zweite Contentbereich mit dem Inhalt einer versteckten Inhaltsseite gefüllt. Nicht ganz flexibel, aber erstmal ausreichend.