Seitenhöhe automatisch verlängern

[Chacky]

Hallo,

folgendes Problem:

Wie schaffe ich es, dass Sich die Seite automatisch verlängert wenn ich mehrere Artikel hinzufüge ? Und sich die Fußzeile weiter runter schiebt.

Bei meiner Seite sind die Seiten leider unterschiedlich lang.

Meine Lösung bisher war es, für jede Seite eine eigene css zu schreiben und ein eigenes Layout zu erstellen um damit einen Div am Rand und die #main höhe der richtigen größe anzupassen.

Leider ist diese Lösung nicht sehr Kundenfreundlich, es gibt zuviele css Dateien ,welche man bearbeiten muss.


Mfg Chacky

[MacKP]

Hallo Chacky,
ist jetzt der Footer nicht an der Richtigen Stelle oder willst du die Spalten im Hauptbereich immer gleich groß erscheinen lassen?
Der Footer an sich sollte sich dem ganzen eigentlich schon anpassen...
Für letzteres kannst du das hier nehmen: http://www.alistapart.com/articles/fauxcolumns/

Wenn du mehr wissen willst brauchen wir einen Link zu der Seite mit dem Problem.

Viele Grüße

[Chacky]

Danke für die Antwort,

einen Link kann ich leider nicht angeben.

Ein Problem habe ich bereits gelöst,

#main hatte in der css eine Höhenangabe, somit hatte dieser sich beim einfügen eines Artikels nicht verschoben.

Nun das andere Problem ist, dass ein Div auf der linken Seite 100% des Mainbereiches ausfüllen muss.

Danke für den Link, ich werde mich mal daran versuchen.

mfg Chacky

[Chacky]

Mhh.. leider funtioniert das nicht ganz....

Momentan sieht die css so aus:

.background_left2 soll eine Höhe von 100% des Mains haben. :/

.background_left2
{
width:163px;
height:100%;
position:absolute;
margin-top:243px;
margin-left:37px;
background:#e1e3e8;
z-index:8;
}



#main
{
min-height:550px;
padding-right:20px;
padding-left:20px;
}

[Chacky]

Beispiel im Anhang: Div muss 100% bis zum Footer reichen.

[tblumrich]

Hi.

Und genau das löst du mit Fauxcolumns, wie im Link von MacKP gepostet.
Dazu findet man sicher auch einiges in der Boardsuche.

Gruß
Thomas

[Chacky]

Ja, dass hab ichs chon gelesen.. aber leider verstehe ich es nicht ganz :/

[tblumrich]

Hi.

Vielleicht hilft dir die Erklärung von Peter in seinen Little Boxes:
http://little-boxes.de/lb1/16.1.6-sc...avigation.html

Besser als er kann das nun wirklich kaum jemand erklären.

Gruß
Thomas

[Chacky]

Super, hat gut funktioniert =)

Nur leider gibt es dadurch wieder ein neues Problem ^^

Der Bereich mit der Hintergrundgrafik überlappt nun den Navi Bereich.

Auch mit z-index leider nicht zu korrigieren.

Main:

#main
{
	width:720px;
	margin:10px auto;
	color: black;
	background: white url(leiste.jpg) repeat-y left top;
z-index:0;
}

Navigation:

#left {z-index:1;}



.level_1
{
	z-index:1;
}

#left .mod_navigation
{
	margin-top:23px;
	margin-left:-3px;
	z-index:1;
}

#left a
{
	text-decoration:none;
	z-index:1;
}

#left ul li
{
	width:180px;
	display:block;
	z-index:1;
}

#left .level_1 a,
#left .level_1 span
{
	display:block;
	padding:5px 0 6px 20px;
	border-bottom:3px solid #fff;
	font-weight:normal;
	line-height:19px;
	color:#002338 !important;
	background:#e1e3e8;
	z-index:1;
}

#left .level_1 li.submenu:after
{
	width:0px;
	height:0px;
	position:absolute;
	display:block;
	margin-top:-26px;
	margin-left:140px;
	font-weight:bold;
	color:#002338;
	content:'>';
	z-index:1;
}

#left ul li:hover a
{
	font-weight:normal;
	color:#fff !important;
	background:#37286d url('arrows_startseite.gif') no-repeat 0 -300px;
	z-index:1;
}

#left .level_1 span,
#left .level_1 li.active a
{
	font-weight:bold;
	color:#fff !important;
	background:#37286d url('arrows_startseite.gif') no-repeat 0 -300px;
	z-index:1;
}

#left .level_1 li.trail a
{
	font-weight:bold;
	color:#fff !important;
	background:#37286d url('arrows_startseite.gif') no-repeat 0 -300px;
	z-index:1;
}

/* level_2 / Ebene 2 Links - normal */
#left ul li:hover .level_2 a,
#left ul li .level_2 a
{
	font-weight:normal;
	background:#444443;
	color:#fff !important;
	z-index:1;
}

/* level_2 / Ebene 2 :hover, :focus */
#left ul li:hover .level_2 a:hover,
#left ul li:hover .level_2 a:focus,
#left ul li:hover .level_2 li:hover a
{
	background:#37286d url('arrows_startseite.gif') no-repeat 0 -300px;
}

/* level_2 / Ebene 2 aktiv, ge */
#left ul li:hover .level_2 span
{
	font-weight:bold;
	background:#37286d url('arrows_startseite.gif') no-repeat 0 -300px;
}

.level_2 li
{
	border:none;
}

.level_2
{
	width:0;
	height:0;
	position:absolute;
	overflow:hidden;
	margin-left:100px;
	padding-top:-50px;
	padding-left:68px;
	text-align:left;
	z-index:1;
}

li:hover .level_2
{
	width:auto;
	height:auto;
	left:auto;
	margin-top:-33px;
	min-width: 10px;
}

[Chacky]

So jetzt geht alles perfekt, vielen dank für eure Hilfe =)

#main {z-index:-69;} hat funktioniert ^^

(Warum auch immer)

mfg Chacky

[tblumrich]

Hi.

Ohne ein wenig von deinem Grundgerüst zusehen, wird das schwierig mit einer Analyse. Verwendest du das Seitenlayout von Contao? Wenn ich das richtig sehen, hast du #main in Hintergrundbild gegeben. Main ist aber der Hauptspaltenbereich, der sollte garnichts mit #left zu tun haben, weil dir eigentlich nebeneinander liegen. FauxColumns besagt ja eigentlich das die Grafik in einen umschließenden Container muss.
Und z-index ist eigentlich auch nur relevant für positionierte Elemente... und und und...

Tja, wie gesagt, ist etwas Raterei.

Gruß
Thomas

//edit
OK, aber ziemlich seltsam ist das.

[Chacky]

Mhhh... leider funktionieren nun Links im Main bereich nicht mehr :/ ..

[tblumrich]

Mhhh... leider funktionieren nun Links im Main bereich nicht mehr :/ ..

Nimms mir nicht übel, aber wer soll mit dieser Aussage irgendwas anfangen?
Ich schrieb es ja schon... zum Helfen musst du konkreter werden... und zumindest Screenshot und Code der Seite liefern, wenn du das Ding schon nicht zeigen kannst oder willst.

Gruß
Thomas

[Chacky]

Ja hast ja recht ^^

So, ich hab den background nun auf den #container gelegt.

Damit funktioniert alles wie es sein soll.

mfg Chacky