Xhtml Css Problem mit Breitenangabe

$mysql=

Ich möchte das des Layout überall verfügbar is:

Das Content Div sitzt nicht rechts von der steuerung, das sollte gerne so sein. Auch mit float: right oder anderen Breitenangaben erziele ich nicht den gewünschten Effekt

HTML

* {margin: 0; padding: 0;}
body {
color: #fff;
background: #627f7d;
font-size: 12px;
font-family: arial, sans-serif, verdana;
}
div#head {
height: 150px;
background: url(img/head.jpg) no-repeat;
}
#head h1 {
font-family: calibri;
color: #c0c0c0;
text-align: right;
margin: 30px 30px 0 0;
}
#head h2 {
font-family: arial;
color: #c0c0c0;
text-align: right;
text-decoration: underline;
margin: 30px 30px 0 0;
}
ul#steuerung {
width: 100px;
float: left;
margin: 50px 0 0 5%;
padding: 5px 0;
line-height: 28px;
list-style-type: none;
}
ul#steuerung li a {
width: 100%;
color: #c0c0c0;
background: #000;
font-weight: bold;
text-decoration: none;
display: block;
padding: 5px;
}
ul#steuerung li a:hover {
border-left: 20px solid #000;
color: #000;
background: #387b74;
text-decoration: underline;
}
div#content {
width: 20%;
background: #000;
float: left;
margin: 4em .8em 0 4em;
padding: 20px;
}
ul#footer {
width: 100%;
height: 30px;
color: #000;
text-align: center;
clear: both;
margin: 35px 0 0 0;
list-style-type: none;
line-height: 20px;
}
ul#footer li {
display: inline;
}
ul#footer li a {
color: #000;
padding: 3px;
text-decoration: underline;
border-right: 1px dotted #000;
}
ul#footer li a:hover {
text-decoration: none;
}
ul#footer li a.noborder {
border: none;
}

Alles anzeigen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Startseite - http://www.domain.info - Kurzhalten?</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
    <div id="head">
    <h1>Seitenname</h1>
        <h2>Kurze Überschrift</h2>
    </div>
 
    <ul id="steuerung">
        <li><a href="#index.php">Startseite</a></li>
        <li><a href="#">Testseite1</a></li>
    </ul>
 
    <div id="content">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <ul id="footer">
        <li><?php echo date('Y'); ?>&copy;Webseitenname</li>
        <li><a href="#">Informationen</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
     </ul>          
</body>
</html>

Alles anzeigen

threadi

Das als Link zu sehen wäre einfacher. Seltsam erscheint mir jedoch bei Dir diese Angabe beim #content:

Code

min-width: 20%;

20% von was? Normalerweise gibt das als "20 Prozent vom umliegenden Element" - das wäre body, aber der hat keine Breite. Was passiert wenn Du das weglässt?

Und diese margins im selben Element finde ich auch merkwürdig. 4em nach links - wieviel soll das sein? em ist eine relative Angabe.

$mysql=

habe nun alle em Angaben in margin und padding raus und durch pixel ersetzt. Auch die Breitenangabe des #contents ist raus. Nun springt das Content Fenster auch unter die Navigation und nimmt die gesamte Breite ein

Seite befindet sich noch in lokaler Entwicklung

threadi

Wenn Du floatest musst Du auch eine Breite angeben.

Dein Problem scheint aber zu sein, dass Du einen Contentbereich hast der die ganze Breite abzüglich der Breite der Navigation haben soll. Für den Fall wäre float evtl. auch ungeeignet. Vielleicht solltest Du die Navigation (so unschön es auch ist) absolut positionieren und dem Contentbereich (ebenfalls ohne float) einen padding von der Breite der Navigation geben. Wäre zumindest spontan meine Idee.

$mysql=

was mich nur wundert, warum kann ich nicht beides floaten(steuerung, content) und die breitenangaben 15%(steuerung) und 85%(content) ohne margin, padding-werte setzen. Das sollte logischerweise doch das gewünschte ergebnis erzielen, nur hauts nicht hin. Ich versuche nochmal ein divcontainer drumrum zu setzen, vielleicht klappt das ja so...

EDIT23:50Uhr
Rahmen mit width: 100%; klappt nicht, die unschöne Lösung lasse ich mal aussen vor. Weiß jemand noch eine Idee?

$mysql=

nun habe ich alle möglichkeiten durch, bester ausgangsstand ist noch immer der code im ersten post. Mein Ziel ist folgendermaßen:

body 100% des Bildschirms
head 100% des Bildschirms(bild ist 3500px breit)
navi_links 100px breit
content_rechts rest des bildschrims abzüglich der 100px
footer 100% des bildschirms

wenn ich aber navi_links und content_rechts float: left; gebe und footer clear: both; bricht der content bei auflösungsreduzierung trotzdem um. muss doch zu schaffen sein:-(

EDIT19:10Uhr: Ein Problem was ausserdem noch besteht, in meinem Editor (Webtocon Scriptly) zeigt er es anders an als wenn ich es auf meinem Server hochlade und im FF und IE anschaue

Tags