1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Homepage mit CSS

  • Flusenkopf
  • 14. Juli 2007 um 21:59
  • Flusenkopf
    Anfänger
    Beiträge
    6
    • 14. Juli 2007 um 21:59
    • #1

    Hi,
    ich bastel grad an einer Homepage und die soll von der Aufteilung so aussehen:
    oben Header
    dann Content, in dem Content ein Menü und unten kommt der Footer
    Das Menü soll aber bis unten zum Footer gehen, im Moment ist das noch vom Text eingeschlossen;
    [Blockierte Grafik: http://img186.imagevenue.com/loc423/th_42482_Untitled-2_122_423lo.jpg]

    Aber der Text soll wie gesagt nur linear nach unten fließen...weiß jemand, wie ich das hinbekommen kann?

    Die css-Datei sieht im Moment so aus:

    Code
    /*-- Bodylayout--*/
    
    
    
    
    
    
    #body {
    
    
    	font-family: Verdana;
    
    
    	margin-bottom:0px;
    
    
    	margin-top:0px;
    
    
    	margin-left:0px;
    
    
    	margin-right:0px;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    /*-- Header--*/
    
    
    
    
    
    
    #header {
    
    
    	width:750px;
    
    
    	height:80px;
    
    
    	line-height:80px;
    
    
    	margin:auto;
    
    
    	background-color:#003333;
    
    
    }
    
    
    
    
    
    
    /*-- Menu--*/
    
    
    
    
    
    
    #menu {
    
    
    	width:190px;
    
    
    	float:left;
    
    
    	margin:auto;
    
    
    }
    
    
    
    
    
    
    #menu ul li{
    
    
    	list-style-type:none;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    #menu ul li:hover {
    
    
    	text-decoration:overline;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    
    
    /*-- Content--*/
    
    
    
    
    
    
    #content {
    
    
    	width:750px;
    
    
    	margin:auto;
    
    
    }
    
    
    
    
    
    
    /*-- Footer--*/
    
    
    
    
    
    
    #footer {
    
    
    	width:750px;
    
    
    	margin:auto;
    
    
    	background-color:#000000;
    
    
    
    
    }
    
    
    
    
    
    
    /*-- Submenu--*/
    
    
    
    
    
    
    #submenu {
    
    
    	padding:0px;
    
    
    	margin:0px;
    
    
    	
    
    
    }
    
    
    
    
    
    
    #submenu ul li{
    
    
    	list-style-type:none;
    
    
    	list-style-position:inside;
    
    
    	float:left;
    
    
    
    
    }
    
    
    
    
    
    
    
    
    a.submenu {
    
    	padding-left: 10px;	
    
    
    	color:#000099;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    a.submenu:hover {
    
    
    	color:#FF00FF;
    
    
    }
    
    
    
    
    
    
    #placeholder
    {
    
    
    	width:190px;
    
    
    	float:left;
    
    
    	margin:auto;
    
    
    }
    Alles anzeigen


    Freue mich auf hilfreiche Antworten...
    MfG Fluse

    -=Cogito ergo sum=-

  • K.Y.L.T.
    König(in)
    Beiträge
    1.015
    • 14. Juli 2007 um 22:02
    • #2

    Zeig mal wie du die Container benutzt bitte, also deinen hp Code

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  • Flusenkopf
    Anfänger
    Beiträge
    6
    • 14. Juli 2007 um 22:06
    • #3

    Das sieht so aus, hab die unwichtigen Sachen rausgenommen;

    HTML
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body id="body">
    <div id="header"></div>
    <div id="content">
    <div id="menu" height="100%">
    <ul>
            [*][url='#']Menüpunkt 1[/url]
            [*][url='#']Menüpunkt 2[/url]
            [*][url='#']Menüpunkt 3[/url]
            [*][url='#']Menüpunkt 4[/url]
            [*][url='#']Menüpunkt 5[/url]
    [/list]
    </div>
    </div>
    <div id="content">
    TEXT
    <div id="footer">
    <div id="submenu">
    <ul>
            [*][url='#']Impressum[/url]
            [*][url='#']AGB[/url]
            [*][url='#']Design by[/url]
    [/list]
    </div>
    </div>
    
    
    </body>
    
    
    </html>
    Alles anzeigen

    -=Cogito ergo sum=-

  • K.Y.L.T.
    König(in)
    Beiträge
    1.015
    • 14. Juli 2007 um 22:39
    • #4

    Hier das wäre eine Lösungsidee, ist noch nicht ganz ausgereift, kannst du ja mal testen.

    Die CSS

    Code
    *-- Bodylayout--*/
    
    
    
    
    
    
    #body {
    
    
       font-family: Verdana;
    
    
       margin-bottom:0px;
    
    
       margin-top:0px;
    
    
       margin-left:0px;
    
    
       margin-right:0px;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    /*-- Header--*/
    
    
    
    
    
    
    #header {
    
    
       width:750px;
    
    
       height:80px;
    
    
       line-height:80px;
    
    
       margin:auto;
    
    
       background-color:#003333;
    
    
       position:absolute;
       left:25%;
       top:0;
    }
    
    
    
    
    
    
    /*-- Menu--*/
    
    
    
    
    
    
    #menu {
    
    
       width:190px;
    
    
       float:left;
    
    
       margin:auto;
    
    
    }
    
    
    
    
    
    
    #menu ul li{
    
    
       list-style-type:none;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    #menu ul li:hover {
    
    
       text-decoration:overline;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    
    
    /*-- Content--*/
    
    
    
    
    
    
    #content {
    
    
       width:750px;
       height:100%;
    
       margin:auto;
       position:absolute;
       left:25%;
       top:81px;
    }
    
    
    #content_menu {
    
    
       width:190px;
    
    
       margin:0;
    
    
       position:absolute;
       left:0px;
       top: 15px;
    }
    #content_text {
    
    
       width:560px;
       max-width:560px;
       margin:0;
    
    
       position:absolute;
       left:190px;
       right: 2px;
       top: 15px;
    }
    
    
    
    
    
    
    /*-- Footer--*/
    
    
    
    
    
    
    #footer {
    
    
       width:750px;
    
    
       margin:auto;
    
    
       background-color:#000000;
    
    
       position:absolute;
    
    
       right: 0px;
       bottom: 0px;
    
    
    }
    
    
    
    
    
    
    /*-- Submenu--*/
    
    
    
    
    
    
    #submenu {
    
    
       padding:0px;
    
    
       margin:0px;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    #submenu ul li{
    
    
       list-style-type:none;
    
    
       list-style-position:inside;
    
    
       float:left;
    
    
    
    
    }
    
    
    
    
    
    
    
    
    a.submenu {
    
    
       padding-left: 10px;
    
    
       color:#000099;
    
    
    
    
    
    
    }
    
    
    
    
    
    
    a.submenu:hover {
    
    
       color:#FF00FF;
    
    
    }
    
    
    
    
    
    
    #placeholder
    {
    
    
       width:190px;
    
    
       float:left;
    
    
       margin:auto;
    
    
    }
    Alles anzeigen

    Die HP

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
    <html>
      <head>
        <title>Untitled</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
    <link href="style.css" rel="stylesheet" type="text/css" /> 
      </head>
      <body id="body">
    <div id="header"></div>
        <div id="content">
            <div id="content_menu">
            <div id="menu" height="100%">
    <ul>
            [*][url='#']Menüpunkt 1[/url]
            [*][url='#']Menüpunkt 2[/url]
            [*][url='#']Menüpunkt 3[/url]
            [*][url='#']Menüpunkt 4[/url]
            [*][url='#']Menüpunkt 5[/url]
    [/list]
    </div> </div>
    
    
    <div id="content_text">
    TEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXT
    TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    
    
    <div id="footer">
    <div id="submenu">
    <ul>
            [*][url='#']Impressum[/url]
            [*][url='#']AGB[/url]
            [*][url='#']Design by[/url]
    [/list]
    </div>
    </div>
    </div>
    
    
    </div>
    </body>
    
    
    </html>
    Alles anzeigen

    Das Problem: Es ist im Moment noch an die Menge des Textes gebunden. Ich bin davon ausgegangen, dass du immer soviel Text hast, dass es mehr Zeilen als die Navi hat. Alternativ kann ich mir nur eine Lösung mit nem komplett neuem Modell oder ner gefixten Pixelanzahl vorstellen- bin aber auch noch nicht so der Fachmann.

    Vie Spaß damit, getestet auf FF 2 , IE 7 und Opera

    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.
    [Blockierte Grafik: http://www.snippr.de/social/img/logo.png]
    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 14. Juli 2007 um 22:48
    • #5

    div's sollten nur einmal auf der Seite vorkommen. Dein content erscheint jedoch zweimal. Das solltest du ändern.
    Setz mal in der Reihenfolge das menue nach dem header und danach den content. Diesen versehe mal noch mit einem float:left;.
    Beim footer gib noch clear:both; ein.
    Wenn's dann noch nicht hinhaut poste nochmal den CSS und HTML Code.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

Tags

  • homepage
  • html
  • color
  • http
  • style
  • jpg
  • text
  • img
  • code
  • auto
  • datei
  • bot
  • bottom
  • position
  • css
  • side
  • header
  • hover
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern