• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Container gehören zusammen, werden aber separat definiert. Möglich?

Samson1964

Samson1964

Neues Mitglied
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?
 
Werbung:
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: 
<div id="container">
  <!-- Beginn linke Spalte -->
  <div id="nav">
    {MAINMENU}
  </div>
  <div id="content">
    {CONTENT}
  </div>   
  <!-- Ende linke Spalte -->
  <!-- Beginn rechte Spalte -->
  <div id="right1">
    {SEARCH}
  </div>   
  <div id="right2">
    {DETAILMENU}
  </div>   
  <!-- Ende rechte Spalte -->
</div>
Ich glaube der dazugehörende CSS-Code ist überflüssig. Die Elemente in der rechten Spalte floaten alle left und sind nicht weiter positioniert.
Das CMS füllt die Platzhalter u.a. {CONTENT}. Nür über diesen Platzhalter kann ich den Code für eine DIV-Box einbinden, die dann unter der DIV-Box mit der ID right2 erscheinen soll. Du schreibst, dafür gibt es eine Lösung. Ich bin gespannt!

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.
 
Werbung:
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?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
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:
Code: 
L1 R1
   R2
   R3
L1 = 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:
Code: 
position:relative zu R2;
Diese Lösung hattest Du mir in Deinem ersten Posting angeboten. Ich zitiere:
Ja, das ist möglich.
Zum Vergrößern anklicken....

Nach Recherchen gibt es aber wohl nur Javascript-Lösungen. Die bekannteste ist die mit innerHTML. Dazu nehme ich meine bereits dargestellte Boxenanordnung
Code: 
L1 R1
   R2
   R3
und schreibe jetzt in den Content für die Box L1 einen Javascript-Befehl:
Code: 
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
 
Werbung:
Wenn's weiterhilft...
Das Template:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="{WEBSITE_KEYWORDS}" />
<meta name="description" content="{WEBSITE_DESCRIPTION}" />
<link href="{LAYOUT_DIR}/css/style.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="{LAYOUT_DIR}/favicon.ico" />
<title>{WEBSITE_TITLE}</title>
</head>
<body>

  <div id="container">
    <div id="header"></div>
    <div id="nav">
      {MAINMENU}
    </div>
    <div id="content">
      <div id="contenttop"></div>
      <div id="contentbody">
        {CONTENT}
      </div>
      <div id="contentbottom"></div>
    </div>  
    <div id="right1">
      <div id="righttop1"></div>
      <div id="rightbody1">{SEARCH}</div>
      <div id="rightbottom1"></div>
    </div>  
    <div id="right2">
      <div id="righttop2"></div>
      <div id="rightbody2">{DETAILMENU}</div>
      <div id="rightbottom2"></div>
    </div>  
    <div id="footer">
      <a href="" title="" target="_blank"></a> | 
       [mail|] |
      <a href="" title="" target="_blank"></a> |
      {CMSINFO} | {SITEMAPLINK}</div>
  </div>

</body>
</html>
Inhalt von style.css:
HTML: 
/*------------------------------------------------------------*
**  Global
**------------------------------------------------------------*/
body {
  background            : #ffffff url(../grafiken/schachfiguren.jpg);
  font-family           : Bitstream Vera Sans,Verdana,Arial,Helvetica,sans-serif;
  font-size             : 13px;
  text-align            : center;
  margin                : 0px;
  color                 : #000000;
}

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; }
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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>{WEBSITE_TITLE}</title>

<style type="text/css">

#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; }


</style>

</head>
<body>

    <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>

</body>
</html>
 
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.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben