Darstellungsproblem mit CSS
lima-city → Forum → Die eigene Homepage → Grafikdesign
administration
antwort
bildschirm
boarder
center
copyright
display
element
elemente
kontakt
margin
navigation
nebeneinander
none
nostrum
recht
right
tutorial
zeilenumbruch
berdecke
-
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?
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/ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du müsstest es mal mit float probieren.
Hier die nötigen details: http://de.selfhtml.org/css/layouts/mehrspaltige.htm -
So, habs jetzt mit float und ein wenig rumprobieren doch noch hinbekommen. Danke für die Antwort!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
