• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS-Layout: Navigations-UL soll Content-Div überlappen

mit negativen margins zum beispiel
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<title>Testseite</title>
<style type="text/css">
h1{
 height:30px;
 width:100%;
 background-color: red;
 margin-bottom:40px;
 }
 
#content{
 width:100%;
 background-color:green;
 }
 
#navi{
 float:right;
 width:150px;
 margin-right:20px;
 margin-top:-20px;
 margin-bottom:-20px;
 background-color: blue;
 }
#foot{
 width:100%;
 height:20px;
 background-color: red;
 margin-top:40px;
 }
#clear{
 clear:right;
 }
</style>
</head>
<body>
<h1>HEAD</h1>
<div id="content">
 <div id="navi">
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
  <p>LINK</p>
 </div>
 Ich bin ein Blindtext. Von Geburt an. Es hat sehr lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deswegen ein schlechter Text? Ich weiss, dass ich niemals die Chance habe in einer grossen Zeitung zu erscheinen. Aber bin ich deswegen weniger wichtig? Ich bin blind! Aber ich bin gerne ein Text.
Und sollten Sie mich jetzt dennoch zu ende lesen, dann habe ich etwas geschafft, was den meisten normalen Texten nicht gelingt.
<div id="clear"></div>
</div>
<div id="foot">FOOT</div>
</body>
</html>

EDIT:
hmm...scheint nur im IE so zu funktionieren wie ich mir das gedacht hab.
der FF verhält sich völlig anders

EDIT 2:
vergessen zu clearen...depp ich.
so gehts nun
 
Zuletzt bearbeitet:
Hallo,

danke für deine Hilfe. Aber das bringt mir nichts: Die Navigationsliste ist keine Liste mehr, und die Größe hängt von der Anzahl der inkludierten Elemente ab. Genau das will ich nicht.

Ich habe meine Testseite etwas überarbeitet: Design-Test

Konkrete Frage: Wenn ich es schaffe, der <ul> die Höhe der <div id="Wrapper"> zuzuweisen, wäre alles ok. Wenn ich aber bei der ul
Code: 
height: 100%;
schreibe, werden die 100% auf den Viewport bezogen, eigentlich logisch. Aber auch ein
Code: 
height: inherit;
bringt nichts.

Wie bekomme ich die <ul> also dazu, die Höhe der "Wrapper"-Div zu übernehmen?

Gruß
Jens
 
Relative Angaben (etwa Prozent) für die Höhe funktionieren in CSS nur dann, wenn das umgebende Element eine absolute (etwa Pixel) Höhenangabe gesetzt hat. Durchsuche mal das Web nach "faux columns". Das ist im Normalfall (wenn die Bedingung aus dem ersten Satz nicht erfüllt ist) die beste Möglichkeit, zumindest den Eindruck von Elementen mit identischer Höhe zu vermitteln.

In deinem Fall könnte man vielleicht (!) mit absoluter Positionierung arbeiten:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test</title>
        <style type="text/css">

body {
    padding: 4em;
}

.pagebody {
    border: 1px solid #000;
    background: #eee;
    padding: 2em 0;
}

.content {
    position: relative;
    background: #00f;
    padding: .5em;
    padding-right: 11.5em;
    text-align: justify;
}

.navigation {
    position: absolute;
    top: -2em;
    bottom: -2em;
    right: 0;
    width: 10em;
    padding: .5em;
    background: #f00;
}

        </style>
    </head>

    <body>

        <div class="pagebody">

            <div class="content">
                <div class="navigation">
                    <p>Navigation</p>
                </div>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor mattis vulputate. Aenean pharetra vestibulum elementum. Sed non tellus sit amet nunc commodo volutpat bibendum eu dui. In in est pellentesque justo varius dapibus. Mauris tempus elit non erat consectetur in auctor massa pretium. Etiam in dapibus quam. Sed neque diam, molestie in dictum ac, gravida vitae dolor. Aliquam tempor massa et leo tempus laoreet. Vestibulum et est lacus. Praesent sed enim augue. Nulla consequat fermentum urna, a dignissim ipsum sagittis vel. Vivamus ipsum quam, gravida in ultricies in, tincidunt a risus. Sed adipiscing felis quis orci mattis commodo. Curabitur tristique vulputate leo eget aliquet.</p>

                <p>Curabitur eros mi, molestie vel ornare at, euismod id nisl. Proin id neque sit amet diam viverra luctus ultricies ut libero. Sed eleifend lectus et urna ornare placerat. Fusce ullamcorper dictum laoreet. Phasellus a enim eu purus dictum egestas. Pellentesque aliquam nibh massa, et cursus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus mauris sed sem egestas nec consectetur libero fermentum. Nullam tortor lectus, elementum eu cursus nec, hendrerit laoreet tellus. Curabitur sed diam sit amet eros eleifend commodo non eget elit. Integer cursus laoreet felis sit amet feugiat. Donec nec magna tellus. Donec vel aliquet ligula. Praesent aliquam laoreet iaculis. Mauris lobortis commodo elit accumsan consequat. Nunc dapibus orci sit amet ipsum auctor vel bibendum diam semper. </p>
            </div>

        </div>

    </body>

</html>

Im Firefox und IE8 sieht es bei mir okay aus, im IE6 dagegen überhaupt nicht. Ich kann nicht sagen, ob die Darstellungsabweichungen im IE6 zu beheben sind. Da müsste ich rumprobieren. Aber vielleicht hat ja jemand eine Idee. Negative Angaben sind in meiner Wahrnehmung immer schwierig.
 
Hallo,

danke für deine Antwort, aber wirklich fröhlich stimmt mich das nicht - denn ich finde es schade, dass da so rumgetrickst werden muss... Kann doch nicht im Sinne des Erfinders sein.

Deinen Lösungsvorschlag werde ich mir noch detailliert ansehen.

Gruß
Jens
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben