Ergebnis 1 bis 5 von 5

Thema: Homepage mit CSS

  1. #1
    HTML Newbie
    Registriert seit
    27.12.2004
    Ort
    nähe Hamburg
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Homepage mit CSS

    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;


    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;
    
    }

    Freue mich auf hilfreiche Antworten...
    MfG Fluse
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    -=Cogito ergo sum=-

  2. #2
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.12.2004
    Ort
    nähe Hamburg
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das sieht so aus, hab die unwichtigen Sachen rausgenommen;

    Code:
    <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>[*]Menüpunkt 1[*]Menüpunkt 2[*]Menüpunkt 3[*]Menüpunkt 4[*]Menüpunkt 5[/list]
    </div>
    </div>
    <div id="content">
    TEXT
    <div id="footer">
    <div id="submenu">
    <ul>[*]Impressum[*]AGB[*]Design by[/list]
    </div>
    </div>
    
    </body>
    
    </html>
    -=Cogito ergo sum=-

  4. #4
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    Die CSS

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

    Code:
    <!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>[*]Menüpunkt 1[*]Menüpunkt 2[*]Menüpunkt 3[*]Menüpunkt 4[*]Menüpunkt 5[/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>[*]Impressum[*]AGB[*]Design by[/list]
    </div>
    </div>
    </div>
    
    </div>
    </body>
    
    </html>
    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.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

Ähnliche Themen

  1. Homepage für Webmaster > [url]www.project-homepage.de[/url]
    Von vidioh im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 25.07.2005, 20:49

Stichworte

Berechtigungen

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