Content auf Browserlänge?

Gehe zu Seite:

Geschlossen

Sa. 07.05.2011 13:43 Uhr #1

chaela Mitglied

Registriert seit
05.03.2008

Beiträge
20

Beitragswertungen

Hallo zusammen,

nachdem ich jetzt für Ilch Jahrelang nur Layouts mit Tabellen gebaut habe, wollte ich gern auf Divs umsteigen. Hat auch bisher soweit ganz gut funktioniert. Jetzt hänge ich aber an einer Stelle und werkle seit ein paar Stunden daran herum, probiere Dinge aus und durchforste Google, aber nichts bringt den gewünschten Effekt.

Es ist an sich ganz einfach: Ich habe einen Header, eine linke Navigationsleiste, einen Contentbereich und einen Footer. Die linke Navi ist sehr lang, der Contentbereich bleibt aber einfach dann stehen, wenn er keinen Inhalt mehr hat.
Ich nehme an, wenn der Footer nicht fix wäre, würde sich der Contentbereich bis zu ihm nach unten ziehen - jetzt will ich den Footer aber fix haben. Es muss doch eine Möglichkeit geben, dem Browser zu sagen, dass er den Contentbereich trotzdem bis nach unten an den Rand ziehen soll?

Ich hab schon mit hight, min-height und paddings rumprobiert, aber nichts hat wirklich funktioniert. =/

Weiß da irgendwer vielleicht eine Lösung?

verwendete ilchClan Version: 1.1

betroffene Homepage: aa.chaela.info/index.php?start
0 Mitglieder finden den Beitrag gut.
- zitieren
Sa. 07.05.2011 13:54 Uhr #2

dastiii Mitglied

Registriert seit
27.12.2005

Beiträge
2.354

Beitragswertungen

Hintergrund von Navi und Content als ein Bild und dann dem #wrapper als Hintergrund geben

EDIT: Hab dir die Arbeit mal soweit abgenommen. Mit folgendem Bild findest du den Link zum Hintergrundbild (hab ich dir mal erstellt) und wie du es einbindest.

template-factory.net/files/loesung.jpg

Musst jetzt nur noch das Hintergrundbild vom Content entfernen.

Zuletzt modifiziert von DaStIaC am 07.05.2011 - 14:07:40

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 08.05.2011 01:51 Uhr #3

chaela Mitglied

Registriert seit
05.03.2008

Beiträge
20

Beitragswertungen

Dankeschön.
Ich hab heute alles umgestellt, bevor ich dein Edit bemerkt habe.
Ich hab auch eine Grafik erstellt (heisst zwar genau wie deine, ist aber nicht deine) und sie eingebunden. Leider funktioniert es noch immer nocht...
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 08.05.2011 02:19 Uhr #4

dastiii Mitglied

Registriert seit
27.12.2005

Beiträge
2.354

Beitragswertungen

Dein <div id="clear"></div> kommt auch zu früh, schieb das mal ne Zeile runter, also mit dem schließenden </div> von <div id="main"> austauschen.

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 08.05.2011 04:01 Uhr #5

Ra- Mitglied

ich habe diesbezüglich auch noch eine Frage. Was ist wenn ich das nicht mit einem Bild machen will sondern mit Frabe?

Klar ich könnte dem wrapper die Farbe geben aber mein content und mein Menü haben unterschiedliche Farben, geht also nicht.

Um zu veranschaulichen was ich meine habe ich mal ein Beispiel geschrieben:

<style>
body {
margin:0;
}
#test {
width:996px;
background:#000000;
border:2px solid #9f0100;
}
#text {
background:#ffffff;
margin:3px 0px 3px 3px;
padding:4px 4px 4px 4px;
float:left;
width:650px;
}
#text2 {
margin:3px 3px 3px 0px;
padding:4px 4px 4px 4px;
float:left;
color:#FFFFFF;
width:324px;
}
</style>
<body>
<div id="test">
 <div id="text">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita   kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 </div>
 <div id="text2">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita   kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 </div>
 <br clear="all">
</div>
</body>
 
währe nett wenn man mir da weiterhelfen könnte.

0 Mitglieder finden den Beitrag gut.

zitieren

So. 08.05.2011 09:32 Uhr #6

Jan Hall Of Fame

Registriert seit
17.01.2007

Beiträge
3.646

Beitragswertungen

Ich habe das Thema nur schnell überflogen, aber das müsste dir weiterhelfen können: externer Link
oder externer Link

Liebe Grüße
Jan
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 08.05.2011 11:35 Uhr #7

dastiii Mitglied

Registriert seit
27.12.2005

Beiträge
2.354

Beitragswertungen

Zitat geschrieben von Ra-

ich habe diesbezüglich auch noch eine Frage. Was ist wenn ich das nicht mit einem Bild machen will sondern mit Frabe?

Einfach ein Bild mit der Farbe mit der gewünschten Breite und 1px Höhe.

Anders geht das glaub ich nicht, zumindest nicht so, dass es jeder Browser kapiert.

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 08.05.2011 11:48 Uhr #8

Jan Hall Of Fame

Zitat geschrieben von DaStIaC

Anders geht das glaub ich nicht, zumindest nicht so, dass es jeder Browser kapiert.

So funktioniert es sogar im IE6:

<html>
    <head>
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                height: 100%;
                text-align: center; /* Seite in älteren Browsern zentrieren */
            }
            #center {
                height: 100%;
                margin: 0 auto;
                text-align: left; /* text-align:center aufheben */
                width: 800px;
            }
            #links, #rechts {
                float: left;
                height: 100%;
            }
            #links {
                background: orange;
                width: 150px;
            }
            #rechts {
                background: pink;
                width: 650px;
            }
        </style>
    </head>
<body>
<div id="center">
    <div id="links">LINKS</div>
    <div id="rechts">RECHTS</div>
</div>
</body> 
</html>

0 Mitglieder finden den Beitrag gut.

zitieren

So. 08.05.2011 12:33 Uhr #9

dastiii Mitglied

Registriert seit
27.12.2005

Beiträge
2.354

Beitragswertungen

Und jetzt setz mal einen Header darüber ;-)

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 08.05.2011 13:02 Uhr #10

Ra- Mitglied

Registriert seit
01.05.2011

Beiträge
317

Beitragswertungen

also bei mir funktioniert das nicht denn er verlängert sich ja direkt über die komplette länge, ich wollte das eher so das sich der content und das menü gegen seitig anpassen.
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 08.05.2011 17:36 Uhr #11

chaela Mitglied

Registriert seit
05.03.2008

Beiträge
20

Beitragswertungen

Danke es funktioniert! Vielen vielen Dank!
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 08.05.2011 19:24 Uhr #12

Jan Hall Of Fame

Zitat geschrieben von DaStIaC

Und jetzt setz mal einen Header darüber ;-)

Hab das nur mal ganz fix gemacht, daher bitte nicht rummeckern, wenn noch etwas optimiert werden kann. lächeln

Aber ansich kein Problem:

<html>
    <head>
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                height: 100%;
                text-align: center; /* Seite in älteren Browsern zentrieren */
            }
            #center {
                height: 100%;
                margin: 0 auto;
                text-align: left; /* text-align:center aufheben */
                width: 800px;
            }
            #header {
                background: lightgray;
                height: 150px;
                left: 0;
                position: absolute;
                width: 100%;
            }
            #links, #rechts {
                float: left;
                height: 100%;
            }
            #links2, #rechts2{
                padding: 150px 0 0;
            }
            #links, #links2 {
                background: orange;
                width: 150px;
            }
            #rechts, #rechts2 {
                background: pink;
                width: 650px;
            }
        </style>
    </head>
<body>
<div id="header"><h1>bla bla bla ...</h1></div>
<div id="center">
    <div id="links">
        <div id="links2">LINKS</div>
    </div>
    <div id="rechts">
        <div id="rechts2">RECHTS</div>
    </div>
</div>
</body>
</html>

0 Mitglieder finden den Beitrag gut.

zitieren

So. 08.05.2011 19:51 Uhr #13

dastiii Mitglied

Registriert seit
27.12.2005

Beiträge
2.354

Beitragswertungen

Du solltest es schon vorher mal testen, wenn du nen Code postest... Klar, ohne Inhalt funktionierts.

Mach doch mal die linke Spalte voll ohne Ende... ;-)

externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Content auf Browserlänge?