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

Geschlossen
  1. #1
    User Pic
    chaela Mitglied
    Registriert seit
    05.03.2008
    Beiträge
    20
    Beitragswertungen
    0 Beitragspunkte
    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? sauer

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

    Weiß da irgendwer vielleicht eine Lösung? lächeln


    verwendete ilchClan Version: 1.1

    betroffene Homepage: aa.chaela.info/index.php?start
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Hintergrund von Navi und Content als ein Bild und dann dem #wrapper als Hintergrund geben zunge

    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
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    chaela Mitglied
    Registriert seit
    05.03.2008
    Beiträge
    20
    Beitragswertungen
    0 Beitragspunkte
    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... traurig
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    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.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  6. #6
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    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.
  7. #7
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    ZitatZitat 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.
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    ZitatZitat 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.
  9. #9
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Und jetzt setz mal einen Header darüber ;-)
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  11. #11
    User Pic
    chaela Mitglied
    Registriert seit
    05.03.2008
    Beiträge
    20
    Beitragswertungen
    0 Beitragspunkte
    Danke es funktioniert! Vielen vielen Dank! lächeln
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    ZitatZitat 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.
  13. #13
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    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... ;-)
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten