kostenloser Webspace werbefrei: lima-city


Darstellungsproblem mit CSS

lima-cityForumDie eigene HomepageGrafikdesign

  1. Autor dieses Themas

    computerfreak1

    Kostenloser Webspace von computerfreak1

    computerfreak1 hat kostenlosen Webspace.

    Hi,
    ich hab 3 div-Elemente nebeneinander:
    1. Navigation
    2. Content
    3. News

    Die div-Elemente "Navigation" und "News" haben eine festgelegte Breite. Nur das div-Element "Content" nicht, damit dieser Bereich seine Breite so anpasst, dass am Ende der ganze Bildschirm mit der Seite gefüllt ist.

    Allerding "rutscht" das div-Element "News" nach unten, wenn der Text im Content so lang wird, sodass er das div-Element "News" überdecken würde. Anstatt einen Zeilenumbruch zu machen. (http://computerfreak1.lima-city.de/sonstiges/fehler.gif). Eigentlich sollte es so sein (http://computerfreak1.lima-city.de/sonstiges/richtig.gif). Aber eben, dass wenn man weiter schreibt, das dann ein Zeilenumbruch gemacht wird und der Newsbereich rechts erhalten bleibt und nicht nach unten rutscht.
    Was muss ich verändern? :confused:
    HTML Quellcode:

    <html>
    <head>
    <title>Programmer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body leftmargin="0" rightmargin="0" topmargin="0">


    <div id="body">
    <div id="nav-boarder">
    <div id="nav">
    <table height="30"><tr><td></td></tr></table>
    <a href="index.php" class="nav">HOME</a>
    <a href="tut/" class="nav">TUTORIALS</a>
    <a href="kontakt.php" class="nav">KONTAKT</a>
    <a href="impressum" class="nav">IMPRESSUM</a>
    </div>
    </div>
    <div id="content">
    Lorem ipsum malis dolorem nostrum ex nec, adhuc errem intellegebat usu an, aperiri impedit noluisse ei sit. Mel alienum expetenda suscipiantur ut.
    </div>
    <div id="news">
    News
    </div>
    </div>
    <div id="copyright">Copyright © 2008 Programmer | <a href="impressum.php" class="link">Impressum</a> | <a href="admin/index.php" class="link">Administration</a></div>
    </body>
    </html>

    Style:

    #body{
    margin-top: 20;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
    height:300;
    }

    #nav-boarder {
    float:left;
    margin-top: 0;
    width:208;
    }

    #nav{
    }

    a.nav {
    margin-top: 20;
    margin-left: 50;
    margin-right:50;
    border-bottom:1px solid #CCCCCC;
    padding:2px 0 0 0;
    color: black;
    text-decoration:none;
    font-size:16px;
    display:block;
    }

    a.nav:hover {
    margin-top: 20;
    margin-left: 50;
    margin-right: 50;
    padding-left:15px;
    color:#FFCC00;
    text-decoration:none;
    border-bottom:1px solid #FFCC00 ;
    }


    #content{
    float:left;
    border-left:1px solid #CCCCCC;
    height:300;
    }

    #news{
    float:right;
    border-left:1px solid #CCCCCC;
    width:150;
    height:300;
    }

    #copyright{
    color:#999999;
    text-align: center;
    }

    #link{
    }

    a.link{
    text-decoration:none;
    color:#999999;
    }

    a.link:hover{
    color:#000000;
    text-decoration:underline;
    }

    Ansonsten könnt ihr euch es auch mal direkt auf der HP anschauen: http://computerfreak1.lima-city.de/
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. Du müsstest es mal mit float probieren.
    Hier die nötigen details: http://de.selfhtml.org/css/layouts/mehrspaltige.htm
  4. Autor dieses Themas

    computerfreak1

    Kostenloser Webspace von computerfreak1

    computerfreak1 hat kostenlosen Webspace.

    So, habs jetzt mit float und ein wenig rumprobieren doch noch hinbekommen. Danke für die Antwort! :thumb:
  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!