✔ Frage zur Menupositionierung

Status
Nicht offen für weitere Antworten.
G

godfather_al

Mitglied
Hallo zusammen,

ich bin bei einer Testseite und komme leider nicht weiter, HTML und CSS - Dokumente habe ich Euch unten eingefügt. Meine Frage ist, was muss ich im Code ändern, damit das zweite Menü (div #kopf2 genannt) genau über dem Inhalt und nicht nach links versetzt dazu erscheint und nicht mehr scrollt ?

Vielen Dank vorab für Euere Hilfe.

Viele Grüße
Godfather


HTML-Dokument:
Code: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>godfathers Testseite</title>
  <style type="text/css"> @import url(layout_neu.css);</style>
</head>


<body>
    
    <body style="overflow-x: hidden; overflow-y: hidden">

<body style="padding : 0px; 
margin : 0px; 
height : 100% ; 
width : 100% ; 
overflow : auto;">

    <div id="kopf"><h1>Godfathers Testseite für ganz Deutschland</h1></div>

    <div id="kopf2"><h1>zweites Menu</h1></div>
    
    <div id="navigation">
    <ul>
      <li><a href="#">Uebersicht </a></li></br>
      <li><a href="#">Menu 1 </a></li></br>
      <li><a href="#">Menu 2 </a></li></br>
      <li><a href="#">Menu 3 </a></li></br>
      <li><a href="#">Menu 4 </a></li></br>
      <li><a href="#">Menu 5 </a></li></br>
      <li><a href="#">Menu 6 </a></li></br>
    </ul>
    </div>

    <div id="inhalt"><h1>Inhalt</h1>
      <p>Willkommen bei Godfathers Testseite für ganz Deutschland.</br></br></br></br></br></br>
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 

testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 

testtest testext testtest testext testtest testext </br></br></p>
    </div>

  
</body>

</html>


CSS-Dokument:


Code: 
body, html, #navigation, #container, #inhalt { 
margin : 0;
padding : 0;
} 
html { 
height : 100%;
max-height : 100%;
padding : 0;
margin : 0;
border : 0;
background : #fff;
font-size : 100%;
font-family : georgia, palatino linotype, times new roman, serif;
overflow : hidden;
} 
body { 
height : 100%;
max-height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
border : 0;
font : 100.01% sans-serif;
margin : auto;
background-color : #e6dccf;
} 
#centerBox { 
width : 100%;
height : 100%;
border : 1px solid #000;
overflow : auto;
} 
#kopf { 
position : fixed;
width : 100%;
height : 70px;
min-height : 70px;
border : 0 solid #000;
background-color : rgb(207, 48, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
overflow : auto;
} 
#kopf2 { 
position : fixed;
width : 80%;
height : 30px;
min-height : 30px;
left : 20%;
top : 70px;
border : 0 solid #000;
background-color : rgb(207, 150, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
overflow : auto;
} 
#navigation { 
position : fixed;
margin-top : 0;
width : 20%;
min-width : 170px;
height : 100%;
border : 0 solid #000;
background-color : #e6b873;
color : #3054bf;
z-index : 3;
text-align : left;
} 
#inhalt { 
overflow : auto;
position : absolute;
z-index : 2;
top : 105px;
bottom : 0;
left : 20%;
right : 0;
width : 100%;
} 
* html #inhalt { 
top : 105px;
left : 20%;
right : 0;
bottom : 0;
height : 90%;
max-height : 90%;
width : 80%;
overflow : auto;
position : absolute;
z-index : 2;
border-left : 0 solid #fff;
border-right : 0 solid #fff;
} 
#inhalt p { 
padding : 0;
} 
#inhalt h1 { 
padding : 0;
} 
p { 
margin : 25px 25px 0 25px;
} 
p1 { 
font-size : 1em;
} 
h1 { 
margin : 0 25px;
padding : 25px 0 0;
font-size : 1.3em;
} 
#navigation ul { 
list-style-type : none;
margin : 25px 0 0 0;
padding : 0;
} 
#navigation a:link, #navigation a:visited { 
text-decoration : none;
color : #806640;
display : block;
font-weight : bold;
padding : 2px;
border-left : 23px solid #e6b873;
background-color : #e6b873;
color : #3054bf;
} 
#navigation a:hover { 
color : #3054bf;
background-color : #e6dccf;
border-left : 23px solid white;
color : #806640;
}
 
Hi,

probier es mal hiermit:

Code: 
#kopf2 {
position : absolute;
width : 80%;
min-height : 30px;
height:auto !important;
height : 30px;
left : 20%;
top : 70px;
border : 0 solid #000;
background-color : rgb(207, 150, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
}
#navigation {
position : absolute;
top : 70px;
width : 20%;
min-width : 170px;
height : 100%;
border : 0 solid #000;
background-color : #e6b873;
color : #3054bf;
z-index : 3;
text-align : left;
}
#inhalt {
overflow : auto;
position : absolute;
z-index : 2;
top : 120px;
bottom : 0;
left : 20%;
right : 0;
width : 100%;
}
* html #inhalt {
top : 120px;
left : 20%;
right : 0;
bottom : 0;
height : 90%;
max-height : 90%;
width : 80%;
overflow : auto;
position : absolute;
z-index : 2;
border-left : 0 solid #fff;
border-right : 0 solid #fff;
}

und verwende das body-Element nur einmal in dem Dokument:

Code: 
<body style="padding:0px;margin:0px;height:100%;width:100%;overflow:auto;overflow-x:hidden;overflow-y:hidden">
 
Hi,

vielen Dank für die geänderten Zeilen, aber leider hat das bei mir keine Änderung bewirkt, zum Anschauen nehme ich derzeit den IE7, kann es sein dass es am Browser liegt ?

Viele Grüße
Godfather


EDIT: Sorry jetzt gehts, vielen Dank sieht super aus so !
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück