4. [CSS] Fixe Überschrift und Menüleiste

[CSS] Fixe Überschrift und Menüleiste

  • E

    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?

    0
  • 1

    bei mir scrollt da nix durch .. 🙄

    0
  • H

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

    Intrudor: Du hast auch keinen vernünftigen Browser 😉

    0
  • E

    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 ...

    0
  • 1

    ie5

    0
  • 1

    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 ..

    0
  • H
     

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

    vielleicht 🙂

    0
  • E

    Hat leider nichts gebracht.

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

    0
  • 1

    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 ?

    0
  • E

    Negativ.

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

    0
  • 1

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

    0
  • E

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

    0
  • 1

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

    0
  • H
     

    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.

    0
  • E

    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

    0
  • E

    Mozilla macht das hier:

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

    0
  • F

    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 🙄

    0
  • E

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

    0
  • F

    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 🙂

    0
  • E

    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)?

    0
  • H

    Folgendes geht bei mir:

    <?xml version="1.0"?>
<!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="de" lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
</head>
<body>
<p style="position:fixed;left:0px;top:0px;right:0px;bottom:80%;background-color:rgb(245,245,245);margin:0px;">Inhalt</p>
<p>blubasdlfjka alsdfjk aöajkdf</p>
<p>asödkfj öalks fa  </p>
<p>aösldfjk</p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>aösldfjk</p>
<p>asdlfkj </p>
<p>asdlfkj </p>
</body>
</html>
    0
Anmelden zum Antworten