Delphi-PRAXiS - [CSS] Abschnitt soll den Rest der Seite ausfüllen

Seite 1 von 2

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [CSS] Abschnitt soll den Rest der Seite ausfüllen (https://www.delphipraxis.net/62668-%5Bcss%5D-abschnitt-soll-den-rest-der-seite-ausfuellen.html)

[CSS] Abschnitt soll den Rest der Seite ausfüllen

Hi,

die Webseite (siehe Anhang) funktioniert so: Navigation und Hauptteil sind je ein DIV-Abschnitt, der per CSS positioniert wird. Wie man sieht, funktioniert das.

Ich will jetzt dass sich die Hauptseite bis zum rechten Seitenrand erstreckt, auch wenn der Text nicht so breit ist.
Mit anderen Worten: Breite der Hauptseite = 100% - Breite der Navigation.

Wie mache ich das mit CSS?
Wenn ich ein Hintergrundbild hätte, könnte ich einfach background-repeat anwenden. Ich hab aber keins.

mfg. Tubos

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Wenn du die Navigation per float:left links verankerst und die Contentbox nicht positionierst oder ihre Größe festlegst, wird die Contentbox automatisch den Rest einnehmen.

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Danke erstmal, das hat das Problem behoben :thumb:

Eine Frage noch:
Ich möchte jetzt haben, dass die Navigation genauso weit nach unten geht wie die Hauptseite.
Vermutlich kann ich das durch ein Hintergrundbild und background-repeat erreichen, aber momentan ist in der Navigation noch kein Hintergrundbild gesetzt.

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Wenn die Contentbox nach der Navigation wieder die volle Breite einnimmt, kannst du das durch Addieren der Navigationsbox-Breite zum margin-left der Contentbox beheben.

Soweit ich weiß ist ein Hintergrundbild die einzige Möglichkeit jetzt noch sauber beide Spalten gleich hoch zu bekommen (

Faux Columns).

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Sehr gut, jetzt sieht alles perfekt aus!
Danke!

Den Artikel Faux Colums kenne ich, den hab ich schon mal während der Arbeit an meiner letzten Webseite überflogen. Hatte aber keinen Link gespeichert.

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Hast du dir die Seite auch mit dem IE angesehen?

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Ja. Da funktioniert es auch.

Das mit dem Hintergrundbild hab ich noch nicht ausprobiert, aber jetzt erinnere ich mich dass ich das ein anderes Mal genauso gemacht habe - und das hat in allen Browsern funktioniert.

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Du kannst dir ja auch mal [google]YAML "Yet another multicolumn layout"[/google] angucken. Die haben da die Nav afaik auch bis ganz runter gezogen. Musst dir dann nur noch abgucken. Wie genau das nun läuft kann ich dir aber jetzt auch nich sagen...

mfg, mh166

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Nach einer mehrtägigen Pause setzte ich die Arbeit an der Seite fort.
Leider funktioniert das mit dem Hintergrundbild auf der Navigation nicht. Die Navigation geht nur so weit nach unten wie die Buttons Platz beanspruchen.
Und das, obwohl ich dieselbe Methode anwende wie bei meinem vorherigen Webseiten-Projekt. Dort funktioniert es ja

wie man sieht.

HTML-Code:

Code:

			   
<html>

<head>

<link rel="stylesheet" type="text/css" href="./main.css">

</head>

<body>

<div class="navigation"> Die Navigation </div>

<div class="page"> Hier kommt die Hauptseite, die im echten Code ca. 1,5 Seiten lang ist. </div>

</body>

</html>

main.css:

Code:

			body

{

margin: 0px;

padding: 0px;

}

.navigation

{

  margin-top: 0px;

  margin-bottom: 0px;

  padding-bottom: 0px;

  float:left;

  width: auto;

  background-image:url(./gfx/navigation-background.png);

  background-repeat: repeat-y 0 0;

}

.page

{

   padding-left:10px;

   margin-left: 160px;

   background-color:#C8E9F7;

}

Die Grafik ./gfx/navigation-background.png existiert und wird auch korrekt angezeigt. Es soll aber ganz nach unten gehen, und das tut es trotz repeat-y nicht.

Laut W3C-Validator habe ich keine schließenden Tags vergessen oder andere blöde Fehler begangen.

mfg. Tubos

Re: [CSS] Abschnitt soll den Rest der Seite ausfüllen

Da ich noch keine Lösung gefunden habe, hole ich den Thread wieder hoch.

Seite 1 von 2