✔ Left right top Navigation mit css

Gladiator6 · 2. Februar 2006

Hi

Ich möchte eine Website machen, welche Rechts Links sowie oben eine Navigation hat.

Ganz oben mache ich mit css ein Element, 900 Pixel breit und 4 cm hoch.

Code:

#navigationtop { 
    width:900px; 
    height:4cm; 
    background-color:#999999; 
    position:absolute; 
}

Darunter die linke Navigation, 180 px breit und 800 px hoch.
Dann die Mitte, 540 px breit und 800 px hoch.
Zum schluss die rechte Navigation, wieder 180 px breit und 800 px hoch.

Nun möchte ich dass alles zentriert ist. Für 1024 px Auflösung kann ich einfach das ganze von Links um 62 Pixel oder 6.88 % einrücken.

Bei einer 1240er Auflösung sollte das ganze aber auch eingemittet sein.
Wie kann ich das realisieren?

hpvw · 2. Februar 2006

Ein Block-Element zentrieren:

CSS:

margin:0 auto;

Gruß hpvw

Gladiator6 · 2. Februar 2006

Mit einem div Element funktioniert das so.

Wie muss ich es einrichten, dass ich auch mehrere, nebeneinanderliegende Elemente zentrieren kann?

hpvw · 2. Februar 2006

Stecke Deine Elemente einfach in ein so positioniertes div.

Gruß hpvw

Gladiator6 · 2. Februar 2006

Ich hab das mal versucht, mir ist aber noch nicht klar, wie ich dann die "Divs" innerhalb des zentrierten Divs formatieren kann!

Habe folgendes versucht:

Code:

<style type="text/css">
<!--
div 
    {
        border:2x solid black;
    }

#zentriert 
    {
        width:900px; 
        height:800px; 
        background-color:#666666; 
        margin:0 auto;
    }

#navigation_top 
    {
        width:900px; 
        height:150px; 
        background-color:#000000; 
        position:relative;
    }

#navigation_left 
    {
        width:180px; 
        height:800px; 
        background-color:#000000; 
        position:relative;
    }

#body 
    {
        width:540px; 
        height:800px; 
        background-color:#ffffff; 
        position:relative; 
        left:180px; 
        top:-800px;
    }

#navigation_right 
    {
        width:180px; 
        height:800px; 
        background-color:#000000; 
        position:relative; 
        left:720px; 
        top:-1600px;
    }
//-->
</style>

HTML:

<body>
<div id="zentriert">
<div id="navigation_top"></div>
  <div id="navigation_left"></div>
  <div id="body"></div>
  <div id="navigation_right"></div>
</div>

</body>

Nun habe ich zwar die 4 Elemente so wie ich sie haben möchte, nur hat das 1. Div eine Höhe von 1600 px anstatt nur 800 px!

EDIT:

Merke grad, dass der Firefox meinen Code richtig interpretiert!
Der Internet Explorer 6 interpretiert ihn jedoch falsch.
Die Frage ist also, wie dass ich den Code ändern kann, damit ihn auch den IE (welcher ja von vielen leuten genutzt wird) richtig interpretiert?

hpvw · 3. Februar 2006

Hier ein Beispiel:

XML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Sample</title>
<style type="text/css" media="screen">
#zentriert
    {
        margin:0;
        padding:0;
        border:2px solid black;
        width:900px;
        background-color:#ff0;
        margin:0 auto;
    }

#navigation_top
    {
        margin:0;
        padding:0;
        border-bottom:2px solid black;
        height:150px;
        background-color:#f00;
    }

#navigation_left
    {
        float:left;
        margin:0;
        padding:0;
        border-right:2px solid black;
        width:180px;
        height:800px;
        background-color:#0f0;
    }

#body
    {
        margin:0;
        padding:0;
        height:800px;
    }

#navigation_right
    {
        float:right;
        margin:0;
        padding:0;
        border-left:2px solid black;
        width:180px;
        height:800px;
        background-color:#00f;
    }
</style>
</head>
<body>
<div id="zentriert">
  <div id="navigation_top">Aliquam consectetuer, libero a faucibus pellentesque, massa dui feugiat tellus, ac blandit nunc libero eu velit. Donec blandit dui eu turpis. Fusce pretium. Donec placerat, magna quis posuere dapibus, metus diam consequat massa, eu nonummy magna nisl at lacus. Nulla et tortor id purus hendrerit tincidunt. Nam non lacus. Vivamus in lectus a libero suscipit lobortis. Nulla volutpat mollis eros. Quisque id ligula. Cras ligula est, molestie sit amet, rutrum eu, scelerisque at, quam. Suspendisse vel ipsum. Proin ultrices, lectus ac rhoncus pulvinar, quam ligula posuere lectus, eu sodales nisi justo sed dui. Morbi porttitor ante. Nunc tincidunt enim. Donec urna. Cras in felis sed sem commodo feugiat. Etiam suscipit, nulla ut fermentum rutrum, libero nunc blandit felis, in pellentesque arcu velit eget magna. Donec imperdiet euismod neque. Quisque sed eros vel orci volutpat eleifend.</div>
  <div id="navigation_left">Aliquam consectetuer, libero a faucibus pellentesque, massa dui feugiat tellus, ac blandit nunc libero eu velit. Donec blandit dui eu turpis. Fusce pretium. Donec placerat, magna quis posuere dapibus, metus diam consequat massa, eu nonummy magna nisl at lacus. Nulla et tortor id purus hendrerit tincidunt. Nam non lacus. Vivamus in lectus a libero suscipit lobortis. Nulla volutpat mollis eros. Quisque id ligula. Cras ligula est, molestie sit amet, rutrum eu, scelerisque at, quam. Suspendisse vel ipsum. Proin ultrices, lectus ac rhoncus pulvinar, quam ligula posuere lectus, eu sodales nisi justo sed dui. Morbi porttitor ante. Nunc tincidunt enim. Donec urna. Cras in felis sed sem commodo feugiat. Etiam suscipit, nulla ut fermentum rutrum, libero nunc blandit felis, in pellentesque arcu velit eget magna. Donec imperdiet euismod neque. Quisque sed eros vel orci volutpat eleifend.</div>
  <div id="navigation_right">Aliquam consectetuer, libero a faucibus pellentesque, massa dui feugiat tellus, ac blandit nunc libero eu velit. Donec blandit dui eu turpis. Fusce pretium. Donec placerat, magna quis posuere dapibus, metus diam consequat massa, eu nonummy magna nisl at lacus. Nulla et tortor id purus hendrerit tincidunt. Nam non lacus. Vivamus in lectus a libero suscipit lobortis. Nulla volutpat mollis eros. Quisque id ligula. Cras ligula est, molestie sit amet, rutrum eu, scelerisque at, quam. Suspendisse vel ipsum. Proin ultrices, lectus ac rhoncus pulvinar, quam ligula posuere lectus, eu sodales nisi justo sed dui. Morbi porttitor ante. Nunc tincidunt enim. Donec urna. Cras in felis sed sem commodo feugiat. Etiam suscipit, nulla ut fermentum rutrum, libero nunc blandit felis, in pellentesque arcu velit eget magna. Donec imperdiet euismod neque. Quisque sed eros vel orci volutpat eleifend.</div>
  <div id="body">Aliquam consectetuer, libero a faucibus pellentesque, massa dui feugiat tellus, ac blandit nunc libero eu velit. Donec blandit dui eu turpis. Fusce pretium. Donec placerat, magna quis posuere dapibus, metus diam consequat massa, eu nonummy magna nisl at lacus. Nulla et tortor id purus hendrerit tincidunt. Nam non lacus. Vivamus in lectus a libero suscipit lobortis. Nulla volutpat mollis eros. Quisque id ligula. Cras ligula est, molestie sit amet, rutrum eu, scelerisque at, quam. Suspendisse vel ipsum. Proin ultrices, lectus ac rhoncus pulvinar, quam ligula posuere lectus, eu sodales nisi justo sed dui. Morbi porttitor ante. Nunc tincidunt enim. Donec urna. Cras in felis sed sem commodo feugiat. Etiam suscipit, nulla ut fermentum rutrum, libero nunc blandit felis, in pellentesque arcu velit eget magna. Donec imperdiet euismod neque. Quisque sed eros vel orci volutpat eleifend.</div>
</div>
</body>
</html>

Der IE stolpert hier allerdings über seinen 3px-Bug. Wenn das für Dein Layout störend ist, findest Du z.B. hier Hilfe.

Ein ähnliches, aber in der Höhe dynamisches Layout, findest Du bei Stu Nicholls.

Gruß hpvw

Gladiator6 · 3. Februar 2006

Habe das nun so gelöst:

Code:

<style type="text/css" media="screen">
<!--
div {border:0px solid black;}

#zentriert
    {
        margin:0;
        padding:0;
        border:0x solid black;
        width:900px;
        background-color:#cccccc;
        margin:0 auto;
    }
 
#navigation_top
    {
        margin:0;
        padding:0;
        border:0px solid black;
        width:900px;
        height:150px;
        background-color:#666666;
        margin:0 auto;
    }
    
#navigation_left
    {
        float:left;
        margin:0;
        padding:0;
        border-right: 0px solid black;
        width:180px;
        height:800px;
        background-color:#333333;
    }
 
#body
    {
        margin:0;
        padding:0;
        height:800px;
    }

#navigation_right
    {
        float:right;
        margin:0;
        padding:0;
        border-left:0px solid black;
        width:180px;
        height:800px;
        background-color:#999999;
    }
//-->
</style>

Es wird leider immer noch falsch interpretiert! Der Firefox und der IE zeigen es nicht richtig an! Inder Vorschau von Macromedia Dreamweaver wird das ganze noch einmal anders dargestellt!

Quaese · 3. Februar 2006

Hi,

änder mal die Reihenfolge der Container und setze die rechte Navigation vor das Element mit der ID body.

HTML:

<div id="zentriert">
  <div id="navigation_top"></div>
  <div id="navigation_left"></div>
  <div id="navigation_right"></div>
  <div id="body"></div>
</div>

Ciao
Quaese

Gladiator6 · 3. Februar 2006

@ Quaese

Hey vielen Dank!

Es funktioniert!

Gibt es dafür eine Erklärung? Wäre noch gut für die Zukunft!

Maik · 3. Februar 2006

Das Element, das ein anderes Element umfliessen soll, wird im Quelltext hinter / nach dem zu umfliessenden Element notiert.

✔ Left right top Navigation mit css

Gladiator6

Erfahrenes Mitglied

hpvw

Erfahrenes Mitglied

Gladiator6

Erfahrenes Mitglied

hpvw

Erfahrenes Mitglied

Gladiator6

Erfahrenes Mitglied

hpvw

Erfahrenes Mitglied

Gladiator6

Erfahrenes Mitglied

Anhänge

Quaese

Moderator

Gladiator6

Erfahrenes Mitglied

Maik

Neue Beiträge