[CSS] Fixe Überschrift und Menüleiste

echter Troll

Hallo zusammen,

Folgendes: Ich möchte mit CSS eine Überschrift und Menüleiste fest auf der Webseite positionieren (ganz ganz oben). Dazu habe ich folgenden Code erzeugt:

<!-- HTML -->
<h1>echterTroll.gov</h1>
<p class="menue">
  <a href="thema1.html">Thema1</a>
  <a href="thame2.html">Thema2</a>
</p>
<p>
   Willkommen bla bla bla 
</p>

<!-- Dazugehöriges CSS (in extra Datei) -->
h1 {position : fixed}

.menue { 
    background : rgb(230,230,230); 
    font-weight: bold;
    position   : fixed;
}

Mein Problem ist nun, dass beim Scrollen der Haupttext durch die Überschrift und durch das Menü scrollt. Das sieht nicht gerade schön aus.

Wie kann ich das sauber lösen?

1ntrud0r

bei mir scrollt da nix durch ..

Henno

Deine Überschrift braucht einen Hintergrund... oder habe ich das falsch verstanden?

Intrudor: Du hast auch keinen vernünftigen Browser

echter Troll

Habe die CSS-Datei wie folgt abgewandelt:

.menue {  
    font-weight: bold; 
    position   : fixed;
    width: 100%; 
    left: 0px; 
    top: 40px;
    background-color: rgb(230,230,230);
}
h1 {
    position   : fixed;
    width: 100%; 
    left: 0px; 
    top: 0px;
    height: 40px
    background-color: rgb(255,255,255);
}

IE kann mit fixed nicht umgehen,

Opera 7.11 zeigt es ordentlich an

Mozilla läßt eine unschöne Lücke zwischen Seitenbeginn und der Überschrift

@Intrudor: Welcher Browser?

edit: 100x Code korrigiert ...

1ntrud0r

ie5

1ntrud0r

echter Troll schrieb:

Mozilla läßt eine unschöne Lücke zwischen Seitenbeginn und der Überschrift

versuch ma noch padding und spacing auf 0 zu setzen ..

Henno

body {
   margin:0px;
   padding:0px;
}

vielleicht

echter Troll

Hat leider nichts gebracht.

Mozilla rückt zwar nach links ein, aber nicht hach oben.

1ntrud0r

echter Troll schrieb:

Hat leider nichts gebracht.

Mozilla rückt zwar nach links ein, aber nicht hach oben.

das spacing auf 0 zu setzen hat auch nichts geholfen ?

echter Troll

Negativ.

BTW: "spacing" gibts doch in diesem Sinne nicht, oder?
Ich kenn da nur "word-spacing" und "letter-spacing".

1ntrud0r

hmm jo manchmal hilft auch sowas ...
btw ich meine das word und lettre spacing

echter Troll

Naja, dann schreib ich halt drunter, dass die Website für Opera 7 optimiert ist

1ntrud0r

hmm eine letzte möglichkeit vielleicht ... dieses verwenden ?
leftmargin="0" topmargin="0"

Henno

body {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   bottom:0px;
}

Wenn das nicht geht, lade mal ein Beispiel hoch, bei mir geht das normalerweise immer.

echter Troll

Mozilla mag in der Hinsicht nicht.

Ich werde es heute evt.Abend oder Morgen noch mal versuchen (mit www zum angucken)

Danke schon mal soweit

echter Troll

Mozilla macht das hier:

http://www.mynetcologne.de/~nc-lorbacda/image2.jpg

flenders

Was gefällt dir daran nicht? Ich nehme an, dass der Text fixed positioniert ist und die Smilies im body stehen (sieht doch eigentlich ganz korrekt aus - und der graue Balken sollte dann eben beim Scrollen nicht mitwandern

echter Troll

@flenders:
Mozilla läßt eine unschöne Lücke zwischen Seitenbeginn und der Überschrift

flenders

So wie es aussieht wird der Spalt durch das h1 verursacht, das über dem <p class="menue"> steht, wenn ich das rausnehme, oder darunter setzt sieht bei mir alles korrekt aus

echter Troll

Also duch die ganze Fummelei bin ich mittlerweile hier rausgekommen:

CSS:
===
body { 
   position:absolute; 
   left:0px; 
   right:0px; 
   top:0px; 
   bottom:0px; 
}

.fest {
    padding:0px; 
    position: fixed; 
    width: 100%; 
    left:0px; 
    top:0px;
    background-color: rgb(200,200,200);
}

HTML:
=====
<html>
<head>
        <!-- Stylesheet laden -->
        <link rel="stylesheet" type="text/css" href="test.css">

    </head>

<body>
    <p class="fest">sdkweodjweiodjiweo</p>
    <p>
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />
        :-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />:-)<br />      
</p>
</body>
</html>

Ich bekomms mit dem Mozilla einfach nicht hin

@Flenders: Was hast Du denn genau anders als ich (anhand meines Codes)?