kostenloser Webspace werbefrei: lima-city


DIV Container füllend anzeigen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    spitzei

    Kostenloser Webspace von spitzei

    spitzei hat kostenlosen Webspace.

    Hallo
    ich Arbeite zur Zeit an einer neuen Hompage dabei bin ich auf ein paar Probleme gestoßen.
    Die 2 mittleren Divs wollen den restlichen Raum nicht ausfüllen.
    Wie kann ich dieses Problem beheben?

    Spitzei

    HTML:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Homepage</title>
    		<meta name="robots" 	content="all">
    		<meta name="author" 	content="Daniel Bacher">
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    		<link rel="stylesheet" type"text/css" href="css/page.css">
    
    	</head>
    
    	<body>
    		<div id="page">
    				<div id="logo"></div>
    				<div id="head"></div>
    				<div id="menu">Hallo</div>
    				<div id="content">Hallo</div>
    				<div id="footer">Test</div>
    		</div>
    	</body>
    </html>


    CSS:
    html, body {
    	height:100%;
    	margin: 0;
    }
    
    #page {
    	background-color:black;
    	min-height:100%;
    	width:100%;
    	position:absolute;
    }
    
    #logo {
    	background-color:yellow;
    	min-height:150px;
    	max-height:150px;
    	width:15%;
    	float:left;
    }
    
    #head {
    	background-color:blue;
    	max-height:150px;
    	min-height:150px;
    	width:85%;
    	float:right;
    }
    
    #menu {
    	background-color:green;
    	width:15%;
    	min-height:100%;
    	max-height:100%;
    	float:left;
    }
    
    #content {
    	background-color:white;
    	width:85%;
    	float:right;
    	min-height:100%;
    	max-height:100%;
    }
    
    #footer {
    	position:absolute;
    	bottom:0px;
    	background-color:gray;
    	width:100%;
    	min-height:20px;
    	max-height:20px;
    }
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hi,

    wenn ich dich richtig verstehe, möchtest Du das eine DIV (Menu) auf 100% breite und das 2te (Content) dann wohl auf 100% Höhe. Dazu musst Du die Angaben im CSS anpassen.

    Bei Menu musst Du die
    width:15%
    auf 100% setzen, dann passt es sich auf die Seite an. Die Angaben
    min-hight
    und
    max-hight
    sind da überflüssig würde ich sagen.

    #menu {
    	background-color:green;
    	width:100%;
    	float:left;
    }


    Beim Content DIV musst Du entweder Inhalt in das DIV setzen, also mehr als eine Zeile, dann passt es sich halt an deren Höhe an oder Du gibst in Pixel an wie hoch es sein soll. Wobei Du dann aufpassen musst das Dein Inhalt nicht Höher als die angegebenen Pixel sind.

    #content {
    	background-color:white;
    	width:500px;
    	float:right;
    }


    Vielleicht ist das ja Dein Problem, falls nicht solltest Du etwas genauer beschreiben was Du meinst.

    LG Marco
  4. Mal eben von #page das min-height zu height geändert, zeigt der Firefox die beiden Boxen mit 100% Höhe an. Allerdings bedeuten 100% Höhe, dass die Divs dann unter dem Fensterrand weiter gehen, aso größer als deine aktuelle Ansicht ist. Wenn du so Prozentural arbeitest und nicht scrollen willst, solltest du wohl die Prozente nochmal anpassen bzw allgemein nochmal über dein Größenangabe nachdenken.
    Aber allgemein kannst du - soweit ich gesehen hab - deine min- und max-height komplett durch normale height Angaben ersetzen, für mehr Kompatibilität - wie du am Firefox schon siehst.
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!