[Mauki]

Ich versuche auf meiner Webseite 2 verschiedene divs sich automatisch an den Content anpassen zu lassen. Das wäre die Navigation (box3) und der Content (box4).

Ich habe es mal mit height: 100%; probiert, das funktioniert aber nicht. Wie schaff ich es denn, das beide Inhalte immer gleich lang sind, auf jeden Fall so lang wie der Content ?

body {
	background-color: #CCCCCC;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:  #000000;
	}

#container {
	width: 968px;
	}

.box2{
        padding:5px 20px 5px 5px;
	background-color: #5B91AD;
	text-align: right;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
        }

.box3{

	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 2px;
	float:left;
	width:160px;
        height: 100%;
	background-color: #5B91AD;
	}

.box4{
	float:none;
	padding:15px 20px 10px 25px;
	margin: 0px 0px 0px 165px;
	line-height: normal;
	text-align: justify;
	background-color: #FFFFFF;
        height: 100%;
	}

[Tobit]

Hallo Mauki,

schau mal hier:

http://www.thestyleworks.de/tut-art/index.shtml

da wird auf das Layout mit Floats, etc. eingegangen. Da findet man auch genügend Informationen, die die Problematik von Floats beleuchten.

Gruß
Tobit

[Mauki]

Naja der Link ist sehr interessant, mir scheint aber das Float sich eigentlich nicht auf die Höhe bezieht oder ?

Wir macht ihr das den das die Seite immer von der Höhe schon an den Inhalt angepasst ist. Sicherlich arbeitet der ein oder andere auch mit DIVs ?

[Rowar]

Hallo,

also 2 bzw. 3 spaltige Layouts gehören zu den etwas fortgeschrittenen Themen bei den CSS Layouts.

- Hier sind jede menge super Lösungen: positioniseverything.net
- Hier ist DIE Lösung: Komplexe 3 Spalten Layout
- Und hier meine Lösung, der Trick mit dem Hintergrundbild: http://www.synapstix.de/

Das ist halt erstmal ein grundsetzliches Problem, das hat im Moment noch nichts mit Typo3 zu tun...

[Mauki]

Zitat von Tobit

http://www.thestyleworks.de/tut-art/index.shtml

da wird auf das Layout mit Floats, etc. eingegangen. Da findet man auch genügend Informationen, die die Problematik von Floats beleuchten.

Hab meinen Code nochmals angeschaut und ich layoute ja schon mit Float ???

Zitat von Rowar

- Und hier meine Lösung, der Trick mit dem Hintergrundbild: http://www.synapstix.de/

Was hast du da gemacht ?

[Rowar]

Hi,

schau doch einfach in meinen Code, ich habe alles gut kommentiert und noch dazu auf deutsch. Das haupt Problem ist, dass eine Seite mal länger oder kürzer ist. Du brauchst also ein gemeinsamen Nenner. Bei mir ist das dass

<div id="Anordung"></div>

Tag. Es beinhaltet sowohl die Navigation als auch den Text-Bereich.

In dem "Anordnungstag" hab ich ein Hintergrundbild (es ist 750 pixel Breit, also Navigation und Text bereich zusammen), das immer wiederholt wird. Dabei ist es Egal welcher Bereich (Navigation oder Text) gerade am längsten ist. Es sind ja beide Bereiche im "Anordnungstag".

Einziges Problem war die Fußzeile

<div id="Fuss"></div>

, die sich ebenfalls im "Anordnungstag" befindet. Da es nur eine Spalte hat, es aber immer unterhalb der längsten Spalte sein sollte benötigst du in der CSS-Datei einen kleinen Trick:

clear:both;

So, und damit verhält sich die Fußzeile so wie sie soll. Probiers einfach mal aus, wenn du noch Fragen hast, ich hab die E-mail Benachrichtigung an. Ich kann dir auch deine HTML seite mit CSS Datei so umbauen, das es klappen müsste.

--------------------
Gruß, Rowar


//ps.: Ich hätte starkes Interresse daran wie du das mit deiner Navigation im Typo3 Script gemacht hast. Vielleicht könntest den Teil des Navigations Scriptes mir zukommen lassen oder einfach kurz posten.

[Mauki]

Ich habe das so auch schon probiert, aber irgendwie funzt das nicht. Ich poste mal meinen Code, vielleicht hab ich ja nen Fehler drin.

<div class="hoehe"> <div class="box3">
###navi_links###

###termine###
 </div> <div class="box4">
###klickpfad###

###content###

###fuss###
</div> </div>

/* Stylesheets für Höhenanpassung*/

div.hoehe {
           width:968px;
           overflow:auto; /* Aufgrund des Floatens der Innencontainer */
           background: url(../fileadmin/images/faux_columns.jpg) 0 0 repeat-y; /* Der Fälscher tritt in Erscheinung */
           }

[Rowar]

Hi,
also ich habe mir das mal angeschaut: Du hast auf deiner Homepage das Div Tag eingefügt. Jedoch hast du in deinem CSS File auf dem Server die Änderung nicht eingespielt!

Ich habe nun zuhause mal schnell deine Seite geclont und etwas angepasst. Ich gehe mal davon aus, dass sie so aussehen sollte: http://www.synapstix.de/work/pages/vcp/

Für dieses Verhalten musst du nun dein "Hoehe-Tag" wieder aus deiner HTML Vorlage entfernen. Anschließend musst du nun folgende Zeilen aus Deiner CSS-Datei:

#container {
	width: 968px;
	}

Mit folgenden Zeilen ersetzen:

#container {
	width: 968px;
	background: url("../fileadmin/images/faux_columns.jpg") repeat-y;
	}

Die Anführungs-Striche im Bildpfad sind wichtig. Nun musst du nur noch folgendes Bild in deinen "images" Ordner hochladen: faux_columns.jpg.

Und das sollte es gewesen sein ^_^

[Mauki]

Zitat von Rowar

also ich habe mir das mal angeschaut: Du hast auf deiner Homepage das Div Tag eingefügt. Jedoch hast du in deinem CSS File auf dem Server die Änderung nicht eingespielt!

Änderungen sind drin, es wird aber trotzdem nicht korrekt angezeigt ?

Zitat von Rowar

Ich habe nun zuhause mal schnell deine Seite geclont und etwas angepasst. Ich gehe mal davon aus, dass sie so aussehen sollte: http://www.synapstix.de/work/pages/vcp/

Dieb

Zitat von Rowar

Für dieses Verhalten musst du nun dein "Hoehe-Tag" wieder aus deiner HTML Vorlage entfernen.

welches denn ?

[Mauki]

Achja mir fällt gerade was auf, wenn ich so den Quelltext anschaue. Mir scheint das da ein <div> fehlt. Ich habe aber keine Ahnung wie das passieren kann, den in meinem HTML Template sind ja alle <div> abgeschlossen ?