Ergebnis 1 bis 10 von 10

Thema: Div vertikal dehnen

  1. #1
    TP-Junior
    Registriert seit
    Jun 2006
    Ort
    Kempten
    Beiträge
    18

    Unhappy Div vertikal dehnen

    Hallo,

    ich hoffe mir kann jemand helfen, ich habe glaub schon das ganze Internet durchsucht, aber leider bis jetzt noch nichts gefunden.

    Ich will das mein rechter Rahmen bis nach ganz unten auf die Seite geht, leider ist aber das div immer nur so groß wie der Inhalt.
    Das tritt natürlich nur auf wenn der Inhalt nicht die ganze Seite füllt und man nicht scrollen muss, also bei größeren Auflösungen umso mehr.

    Bei dem übergeordnetem Div funktioniert das ganz wunderbar!?

    Ich hab für die Schatten zwei verschiedene Bilder, da ich gerne ein flexibles Layout hätte, wenn ich es fest machen würde, dann würde das mit einem Bild, welches beide Schatten hat auch funktionieren, aber das will ich eben nicht! :-)

    Ich hoffe ihr könnt mir weiterhelfen...

    Danke schon im voraus
    Dj-Harem

    Code:
    <div id="wrapper">
        <div id="page">
        <div id="header">
            <div id="menu">
                <ul id="pmenu">
    
                </ul>
            </div>
            <div id="logo"></div>
            <div id="logo_deko"></div>
            <div id="brotkrumen">
                <a href="../">Startseite</a> >> <a href="Ordner/">Ordner</a>  >> Seite2</div>
            </div>
    
            <div id="content">
    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 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 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. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
            </div>
            <!-- end #content -->
            <div id="sidebar">
    
    blub
    
            </div>
            <!-- end #sidebar -->
            <div style="clear: both; height: 1px;"></div>
        </div>
        <!-- end #page -->
    </div>
    <!-- end #wrapper -->
    <div id="footer">
            <p><a href="http://www.Test.Test/">Test</a></p>
    </div>
    Code:
    * {
    
    	margin: 0;
    	padding: 0;
    }
    
    html { height: 100%; }
    
    body {
    	margin: 0;
    	font: normal 13px Verdana, Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #EEE;
    	height: 100%;
    
    }
    
    #wrapper {
    	min-height: 100%;
    	margin: 0 auto;
    	width: 80%;
    	position: relative;
    	padding: 0 10px;
    	background: url(rl.gif) repeat-y left;
    }
    
    * html #wrapper {
    	height: 100%;
    }
    
    /* Page */
    
    
    #page
    {
    	min-height: 100%;
    	margin: 0 auto;
    	width: 100%;
    	position: relative;
    	padding-right: 10px;
    	padding-bottom: 3.5em;
    	text-align: left;
    	background: url(rr.gif) repeat-y right;
    }
    
    * html #page
    {
    	height: 100%;
    }
    
    p {
    	padding: 0.5em 0;
    	}
    
    /* Header */
    #header {
    	width: 100%;
    	height: 168px;
    	margin: 0 auto;
    }
    
    #brotkrumen {
    	position: absolute;
    	top: 130px;
    	padding: 1em;
    }
    
    /* Menu */
    #menu {
    	float: left;
    	width: 100%;
    	height: 30px;
    	position:relative;
    }
    
    /* Content */
    #content {
    	float: left;
    	width: 75%;
    	padding: 1em;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 18%;
    	padding-top: 20px;
    	padding: 1em 0.5em;
    }
    
    /* Footer */
    #footer {
    	width: 80%;
    	height: 3em;
    	margin: 0 auto;
    	padding-top: 0.5em;	
    	position: relative;
    	margin-top: -3.5em;
    }
    
    * html #footer {
    	margin-top: -3.4em;
    }
    
    #footer p {
    	text-align: center;
    	font-size: 77%;
    }
    Angehängte Grafiken Angehängte Grafiken   

  2. #2
    TP-Insider Avatar von Sascha79
    Registriert seit
    Jul 2008
    Ort
    Tübingen
    Beiträge
    674
    Hallo Dj-Harem,

    ich nehme mal an das du mit rechter Rahmen die sidebar meinst.
    Hast du es schonmal mit height:100%; ausprobiert. Hier sollte der Rahmen immer die Höhe des Bildschirms haben.
    Das Leben ist schön -
    Lehren ist die schönste Methode zu lernen.

  3. #3
    TP-Junior
    Registriert seit
    Jun 2006
    Ort
    Kempten
    Beiträge
    18
    Hallo Sascha,

    nein nein..dann hab ich mich falsch ausgedrückt, mir Rahmen meine ich die jeweils mit CSS zugewiesenen Hintergründe. Und bei height hatte ich schon ausprobiert, funktioniert aber leider nicht.
    In irgendeiner Konstellation hatte ich da Problem das height zwar die Höhe des Bildschirms nimmt, aber wenn der Text länger ist, dann verlängert der die Grafik nicht!

    MfG
    Dj-Harem

  4. #4
    TP-Insider Avatar von Sascha79
    Registriert seit
    Jul 2008
    Ort
    Tübingen
    Beiträge
    674
    versuch mal das hier in deinen #wrapper einzubauen

    Code:
    min-height: 100%; /* Mindesthöhe in modernen Browsern */
    height: auto !important; /* !important-Regel für moderne Browser */
    height: 100%; /* Mindesthöhe in IE (<7) */
    Das Leben ist schön -
    Lehren ist die schönste Methode zu lernen.

  5. #5
    TP-Junior
    Registriert seit
    Jun 2006
    Ort
    Kempten
    Beiträge
    18
    Hallo Sascha79,

    wie schon oben schon gemeint, aber nicht verständlich geschrieben.
    Der wrapper hat 100% Höhe, also das Hintergrundbild passt soweit.
    Nur das darunterliegende Div "page" bekommt keine 100% Höhe!?
    "page" passt sich immer nur dem Inhalt an, also ist auch nur mal die Hälfte vom Bildschirm.
    page und wrapper haben aber in css die selber definitionen!

    Beim IE scheint das ganze auch zu funktionieren außer das er mir den Footer unten rausschiebt, den ich jetzt wieder mit "margin-bottom: -3.5em;" hochgeholt habe.
    Da beim IE 100% immer die Bildschirmhöhe ist, also der Footer da noch nicht reinzählt.

    Wie gesagt im FF habe ich jetzt das Problem noch dass das Div "page" nicht passt.

    MfG
    Dj-Harem

  6. #6
    TP-Insider Avatar von Sascha79
    Registriert seit
    Jul 2008
    Ort
    Tübingen
    Beiträge
    674
    Hi,

    Du hast ein Semikolon nach background: url(rr.gif) vergessen und bei repeat-y fehlt der Doppelpunkt.
    Das Leben ist schön -
    Lehren ist die schönste Methode zu lernen.

  7. #7
    TP-Junior
    Registriert seit
    Jun 2006
    Ort
    Kempten
    Beiträge
    18
    Hi!?

    hä? ich versteh gar nix mehr....passt doch alles soweit!?
    ich hab doch nur alles auf einmal dem background zugewiesen,
    anstatt alles einzeln!
    siehe hier -> http://www.css4you.de/background.html

    sonst noch jemand eine Idee bzw. Anregung um das Ganze anderst zu lösen?

    greetz
    Dj-Harem

  8. #8
    TP-Insider Avatar von Sascha79
    Registriert seit
    Jul 2008
    Ort
    Tübingen
    Beiträge
    674
    Ich hab´s bei mir selbst mal mit dieser Variante ausprobiert. Hat nicht geklappt. Wenn du es einzeln angibst solltest du auf der sicheren Seite sein.
    Was ich etwas komisch fand; nachdem deine Variante nicht geklappt hat, habe ich das ganze mal mit repeat-x versucht, da hat´s dann geklappt und komischerweise als ich´s dann nochmal mit deiner Variante versucht habe, hat die plötzlich auch funktioniert.

    Keine Ahnung wieso, aber so wie ich das sehe lieg das Problem genau da.
    Geändert von Sascha79 (16.10.2008 um 19:30 Uhr)
    Das Leben ist schön -
    Lehren ist die schönste Methode zu lernen.

  9. #9
    TP-Junior
    Registriert seit
    Jun 2006
    Ort
    Kempten
    Beiträge
    18
    Hallo,

    also ich habe das jetzt mal so probiert, aber leider tut sich bei mir nichts :-(
    Hast du das im IE oder im FF ausprobiert?
    Kannst du bitte deine geänderte CSS Datei hier posten?

    MfG
    Dj-Harem

  10. #10
    TP-Insider Avatar von Sascha79
    Registriert seit
    Jul 2008
    Ort
    Tübingen
    Beiträge
    674
    Hi Harem,

    ...also ich hab die ganze Sache nur in Opera getestet. Leider hat es im ie und ff auch nicht funktioniert.

    Nun hab ich mich auch mal etwas genauer informiert und rausgefunden das der Prozentwert relativ zur Höhe des umschliesenden Blocks der erzeugten Box berechnet wird. D. h. ist die Höhe des umschliesenden Blocks nicht explizit angegeben, so wird der Prozentwert als auto definiert.

    Der #wrapper ist also mindestens 100% vom body hoch. Das klappt ja auch.
    ABER die Mindesthöhe von #page richtet sich nach der Höhe vom #wrapper, die aber nicht angegeben ist und somit wird sie als auto interpretiert.

    Du kannst das mal testen indem du dem #wrapper einfach height:800px; verpasst. Ich nehme an du wirst hierfür eine andere Lösung finden müssen.
    Aber vielleicht hat wirklich noch jemand anderes eine Lösung.

    Viel Erfolg
    Das Leben ist schön -
    Lehren ist die schönste Methode zu lernen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. [CSS] dynamisch dehnen
    Von naplike im Forum HTML & CSS
    Antworten: 3
    Letzter Beitrag: 15.02.2006, 14:52
  2. Schriftfamilie die man dehnen kann
    Von Philippp im Forum Typographie
    Antworten: 4
    Letzter Beitrag: 02.07.2005, 09:29
  3. Homepage dehnen
    Von Clone im Forum Dreamweaver & andere Webeditoren
    Antworten: 2
    Letzter Beitrag: 29.06.2005, 19:36
  4. Schrift wölben, dehnen oder biegen?
    Von kenny im Forum Photoshop
    Antworten: 8
    Letzter Beitrag: 08.02.2003, 09:35
  5. seite automatisch dehnen
    Von notator im Forum Dreamweaver & andere Webeditoren
    Antworten: 5
    Letzter Beitrag: 26.11.2002, 19:36

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51