#right außerhalb des Containers, #main zu breit (dynamisches Layout)

[Ben22]

Hallo,

eine Frage bezüglich dem Layout, das ich für meine Seite umsetzen möchte. Im Anhang layout.png ist es so, wie ich es gern haben möchte. Das habe ich lokal mit HTML- und CSS-Dateien umgesetzt. Wenn ich die CSS-Eigenschaften davon in Contao übernehme, wird es jedoch anders ausgegeben (siehe aktuell.png im Anhang). Die rechte Spalte ist nicht sichtbar, wird auch im Quellcode nicht angezeigt. Siehe Anhang css_contao.png für meine CSS-Einstellungen in Contao. An der fe-Page habe ich nichts geändert; #right ist also im #container drin. Ein weiteres Problem wäre die Fußleiste, die bei mir derzeit noch unter dem Header hängt.

Ich habe ein dynamisches Layout, kein statisches.


Danke im Voraus,
Ben.

[mike_mcfly]

Ahoi Ben22,

vielleicht so:

#header {
width: 980px;
height:180px;
margin: 0 auto; /* zentriert das div */
}

#container {
width: 980px;
margin: 0 auto; /* zentriert das div */
min-height:1200px;
margin-top:100px; /* könnte man auch mit padding-top machen */
background-color:#f7f7f7;
border:1px solid #d4d4d4;
}

#right {
float:right;
width: 30%;
padding: 10px 1% 10px 1%; /* padding wird dem container hinzugerechnet, da main und right zusammen 100% breite haben kommt das padding von 10px, also insgesamt 40px hinzu - besser in der horizontalen auch mit prozentwerten arbeiten */ 
}

#main {
float:left;
width: 66%;
padding: 10px 1% 10px 1%;
}

#footer {
clear:both;
height:100px;
width: 980px;
margin: 0 auto; /* zentriert das div */
background: url("../layout/header_bg.png") repeat;
}

[Kasey]

Ich habe das gleiche Problem mit einem statischen Layout. Die rechte Spalte ist da, befindet sich aber ausserhalb meines Layouts, obwohl sie eigentlich im Container eingeschlossen sein müsste. Und eigentlich sollte der Layout-Builder das ja kontrollieren. Weiss jemand weiter?

[Kasey]

Hab's gefunden. Hatte in einem eigenen CSS eine Anweisung die das ausgelöst hat.

[Ben22]

Hi,

danke erstmal für deine Antwort. Habe das (fast*) alles so umgesetzt, wie von dir vorgeschlagen. Leider ist der Container nun mittig und nicht mehr teilweise über dem Header. Die rechte Spalte ist noch immer außerhalb des Containers. Das ist mir am meisten unklar, weil ich das zweispaltige Layout gewählt hab mit #main und #right?!

*Die Breite im Header und Footer möchte ich nicht angeben, weil die dann nicht mehr über die gesamte Breite gehen. Der Footer ist nun über die ganze Breite und unten. So wie's sein soll!

@Kasey: Verrätst du mir, welche Anweisung das war bzw. ob die bei mir auch vorhanden ist?

Gruß,
Ben

EDIT: Habe nun ein margin: -80px 0 0 420px; reingehauen und das margin:0 auto; entfernt. Ist nun wieder an Ort und Stelle. Das mit der rechten Spalte... krieg ich aber nicht hin.

Mal der Inhalt der fe_page innerhalb des wrapper.

<div id="wrapper">
<?php if ($this->header): ?>

<div id="header">
<div class="inside">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

<div id="container">

<div id="main">
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
</div>
<?php if ($this->left): ?>

<div id="left">
<div class="inside">
<?php echo $this->left; ?> 
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?> 
</div>
</div>
<?php endif; ?>

</div>
<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>

<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>
</div>
<?php endif; ?>

</div>

[hofff]

Hallo,

hast du vielleicht einen Link? Am Live-Beispiel kann man meist schneller eine Lösung finden! ;-)


fg
nicky

... von meinem iPhone mit Tapatalk gesendet!

[Ben22]

Ich arbeite derzeit nur lokal, deshalb kein Link. Sorry.

[Kasey]

Habe mir Dein CSS angesehen, aber die Anweisung die bei mir den Fehler verursacht hat (div#main .ce_text und dort ein margin-right: -40px nirgends gesehen. Versuchs doch mal damit Deine eigenen CSS abzuschalten und eins nach dem anderen wieder einzufügen. So habe ich den Fehler gefunden.
Hoffe Du hast Erfolg.
Gruss Kasey

[Ben22]

Habe das float sowohl im #right als auch im #main entfernt. Nun gehts..