Antworten zum Thema „Joomla 1.5: Containertext nicht im Container“

alexh69 · 08.04.2009

Hallo,

ich hab hier ein recht merkwürdiges Problem. Ich habe 2 Container nebeneinander (so wie ich es gemacht habe ist es wahrscheinlich schon falsch) und vom Container 2 ist der Inhalt nicht im Container sonder darunter. Ich hab euch hier mal ein Bild gemacht, wie es z.Z. aussieht:

Hier habe ich auch mal nen Codeteil der index.php und der template.css (ich hoffe ihr schlagt nicht gleich die Hände über dem Kopf zusammen wenn ihr das seht

)

index.php:

Code:

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $path ?>/css/template.css" type="text/css" />

</head>
<body>
<center></center>
<div id="centrecontainer">
  <div id="outercontainer">
    <div id="header">
      
      <div id="headertitle">
        <a href="index.php"><img src="<?php echo $[B]this[/B]->baseurl ?>/templates/paradise/images/logo.png" border="0" alt="<?php echo JText::_[I]([/I]'Pearl Logo'[I])[/I]; ?>" width="280" height="50" /></a>
      </div>
      
      <div id="headermenu">
      <?php [B]if[/B] [I]([/I]$[B]this[/B]->countModules[I]([/I] 'user3' [I])[/I][I])[/I] : ?>
        <div id="show">
            <jdoc:include type="modules" name="user3" style="xhtml" />
        </div>
      <?php endif; ?>
      </div>
      
    </div>
    <div id="container">
      <div id="containertext">
        <jdoc:include type="component" />
      </div>
    </div>

    <div id="container2">
      <div id="containertext2">
        <jdoc:include type="component" />
      </div>
    </div>

template.css:

Code:

body
[I]{[/I]
    padding: 0;
    margin: 0;
[I]/*
        background: #FFFFFF url[I]([/I]'../images/logo3.png'[I])[/I];
*/[/I]
        background-repeat: no-repeat;
        color: #333333;
    font-family: arial, verdana, helvetica, tahoma, sans-serif;
    font-size: 80%;
[I]}[/I]

a
[I]{[/I]
    text-decoration: none;
    color: #333333;
[I]}[/I]

a:hover
[I]{[/I]
    text-decoration: none;
    color: #000;
[I]}[/I]

#centrecontainer
[I]{[/I]
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
[I]}[/I]

#outercontainer
[I]{[/I]
    margin-left: -490px;
    position: absolute;
    top: -220px;
    left: 50%;
[I]}[/I]

#header
[I]{[/I]
        margin-left: 34px;
    width: 780px;
    height: 50px;
    background-image: url[I]([/I]'../images/header-background.png'[I])[/I];
    background-repeat: no-repeat;
[I]}[/I]

#headertitle
[I]{[/I]
    [B]float[/B]: left;
    width: 280px;
    height: 50px;
[I]}[/I]

#header h1
[I]{[/I]
    margin: 0;
    padding: 11px 0 0 10px;
    color: #2F2F2F;
    font-size: 200%;
    letter-spacing: -2px;
    font-weight: normal;
[I]}[/I]

#header sup
[I]{[/I]
    color: #FFF;
    letter-spacing: -1px;
[I]}[/I]

#headermenu
[I]{[/I]
    [B]float[/B]: right;
    width: 500px;
    height: 50px;
[I]}[/I]

#menu ul
[I]{[/I]
    margin: 20px 0 0 0;
    padding: 0;
    text-align: right;
    font-size: 120%;
    font-weight: bold;
    letter-spacing: -1px;
[I]}[/I]

#headermenu li
[I]{[/I]
    display: inline;
    margin-left: 20px;
[I]}[/I]

#headermenu li a
[I]{[/I]
    text-decoration: none;
        font-size: 100%;
        font-weight: bold;
    color: #999;
[I]}[/I]

#headermenu li a:hover
[I]{[/I]
    text-decoration: none;
        font-size: 100%;
        font-weight: bold;
    color: #999;
[I]}[/I]

#container    
[I]{[/I]
    [B]float[/B]: left;
        margin-left: 341px;
    border: 1px solid #000000;
    width: 550px;
    height: 400px;
[I]}[/I]

#containertext
[I]{[/I]
    overflow: hidden;
    padding: 15px;
    width: 525px;
    height: 350px;
    line-height: 120%;
[I]}[/I]

#containertext p
[I]{[/I]
    margin: 0 0 10px 0;
    padding: 0;
    color: #CCC;
[I]}[/I]

#containertext h1, #containertext h2, #containertext h3
[I]{[/I]
    margin: 10px 0;
    padding: 0px;
    color: #FFF;
    font-size: 175%;
    letter-spacing: -1px;
    font-weight: normal;
[I]}[/I]

#container2    
[I]{[/I]
    margin-left: 40px;
        border: 1px solid #000000;
    width: 300px;
    height: 400px;
[I]}[/I]

#containertext2
[I]{[/I]
    overflow: hidden;
    padding: 25px;
    width: 220px;
    height: 323px;
    line-height: 120%;
[I]}[/I]

#containertext2 p
[I]{[/I]
    margin: 0 0 10px 0;
    padding: 0;
    color: #CCC;
[I]}[/I]

#containertext2 h1, #containertext2 h2, #containertext2 h3
[I]{[/I]
    margin: 10px 0;
    padding: 0px;
    color: #FFF;
    font-size: 175%;
    letter-spacing: -1px;
    font-weight: normal;
[I]}[/I]

Wie krieg ich jetzt den Containertext 2 in seinen Container?

Gruß Alex

sfischer · 08.04.2009

AW: Joomla 1.5: Containertext nicht im Container

hallo,

hast du mal einen link, dann ist es einfacher zu testen!

gruß sfischer

alexh69 · 08.04.2009

AW: Joomla 1.5: Containertext nicht im Container

gerne: Willkommen auf der Startseite

Engholm · 08.04.2009

AW: Joomla 1.5: Containertext nicht im Container

Da ist einiges völlig durcheinander: Du hast den rechten #container als erstes aufgerufen, den dann links gefloatet und anschließend #container2 gesetzt, ohne float. Grundsätzlich: Der browser parst den Quelltext beginned oben links, nach rechts und arbeitet sich dann Zeile für Zeile runter. Entsprechend sollten auch container angeordnet sein. Sprich erst #container (weil links) dann #container2 (weil rechts daneben)

Den linken container würde ich #container_left bezeichnen. Diesen dann float:left; da er linksbündig sein soll. Anschließend den rechten container als #container_right aufrufen welcher float:right; als Eigenschaft haben muss. Im folgenden Container musst Du die floats mit clear:both; wieder aufheben.

Gruß
Engholm

alexh69 · 08.04.2009

AW: Joomla 1.5: Containertext nicht im Container

werd ich mal versuchen. Ich hab mir gedacht es wäre egal, wie ich die container setze. Wenn ich den (sichtbar) 1. momentan mit einem float belege, setzt er sich nämlich da hin, wo momentan sein Terxtinhalt steht, nämlich nach unten. Ich bau das jetzt mal so um wie du mir geraten hast. Vielleicht hätt ich das ganze Ding von vorne aufbauen sollen und nicht versuchen, ein vorhandenes Template umzuformen.

Edit: Hab ich jetzt umgebaut. Jetzt sitzt der rechte Container unten und den footer hat es mir drübergeschoben. Ich hab mit diesem clear: both noch ein Problem. Wo soll ich das einbauen?

Im folgenden Container musst Du die floats mit clear:both; wieder aufheben

Welcher nachfolgende Container. Wenn ich es in den footer einbaue, hab ich den zumindest wieder unterhalb der beiden Container. Versetzt bleicben sie aber trotzdem.

Engholm · 08.04.2009

AW: Joomla 1.5: Containertext nicht im Container

alexh69 schrieb:
Vielleicht hätt ich das ganze Ding von vorne aufbauen sollen und nicht versuchen, ein vorhandenes Template umzuformen.

Ist oftmals einfacher als an einem vorhandenen herumzuschrauben, da man auf verschiedenen Wegen zum gleichen Ziel kommt und jeder seine eigenen Stile und Methoden entwickelt etwas darzustellen.