Ergebnis 1 bis 4 von 4

Thema: Bilder hinter Kopfzeile

  1. #1
    Teeny
    Registriert seit
    21.12.2014
    Beiträge
    30
    Danke
    14
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bilder hinter Kopfzeile

    Hallo Freunde,
    bei mir ergibt sich folgendes Problem:

    ich habe eine Kopfzeile und eine Menüzeile mit Position: fixed fest verankert.

    Darunter befinden sich Bilder mit einem Text darunter. Wenn ich nun die Seite scrolle, laufen Bilder und Text über die Kopfzeile und Menüzeile.

    Das sieht schlecht aus und ist nicht gewollt. Ich möchte erreichen das die Bilder und der Text hinter den beiden Zeilen nach oben verschwinden.

    Ich habe folgendes programmiert:

    In HTML


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Vorstand</title>
        <link href="vorstand.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <img src="HTML Seite/Images/Kopfzeile.jpeg" width="1000" height="100" style="border: 0px;" />
          <div id="Menu">
          <a href="home.html">Home</a>
          <a href="kontakt.html">Kontakte</a>
          <a href="#">Kontaktformular</a>
          <a href="#">Anfahrt</a>
          <a href="#">Gästeliste</a>
          <a href="#">Chronik</a>
          <a href="#">Impressum</a>
        </div>
     
        <h1>Unser Vorstand</h1>
     
        <img id="hermann"  src="HTML Seite/Images/Hermann.png" title="" width="105" height="157" style="border: 0px;" />
            <ul id="vors1">
                <li>1.Vorsitzender</li>
                <li>Hermann v.d. Heide</li>
                <li>Tel: xxx xxxxxxx</li>
                <li>Parzelle </li>
                <li><a href="mailto:1vorsitz@kgv-diekmoor401.de">e-Mail an<br /> 1.Vorsitzenden<a/>
            </ul>
     
        <img id="juergen"  src="HTML Seite/Images/Jürgen.png" title="" width="105" height="157" style="border: 0px;" />
            <ul id="vors2">
                <li>2.Vorsitzender</li>
                <li>Jürgen Steinbach</li>
                <li>Tel: 040 38 28 85</li>
                <li>Parzelle 69</li>
                <li><a href="mailto:2vorsitz@kgv-diekmoor401.de">e-Mail an<br /> 2.Vorsitzenden<a/>
            </ul>
    </body>
    <html>
    und in CSS

    Code:
    img
    {
    position: fixed;
    /*top: 15px;
    left: 25px; */
    margin: 0px 60px;
    }
    body
    {
    background: #008000;
    height: 2000px;
    }
     
    #Menu
    {
    position: fixed;
    width: 980px;
    top: 120px;
    left: 10px;
    margin: 10px 60px;
    padding: 2pt 5pt;
    border: 1.5pt solid #448844;
    background: #aaffaa;
    font: bold 11pt arial, sans-serif;
    font-variant: small-caps;
    letter-spacing: 1pt;
    text-align: center;
     
    }
    #Menu a
    {
    color: #000000;
    text-decoration : none;
    margin-right: 5pt;
    padding: 2pt 2pt;
    border-left: 1.5pt solid #aaffaa;
    border-right: 1.5pt solid #aaffaa;
    }
    #Menu a:hover
    {
    color: #ee1111;
    text-decoration: none;
    background: #ffffcc;
    padding: 2pt 2pt;
    border-left: 1.5pt solid #448844;
    border-right: 1.5pt solid #448844;
    }
     
    H1
    {
    position: absolute; top: 160px; left: 400px;
    color: #ffffcc;
     
    }
     
    #hermann
    {
    position: absolute;  top: 250px; left:10px;
    padding: 0px;
    }
     
    #vors1
    {
    width: 200px;
    padding: 0px;
    position: absolute;
    list-style-type: none;
    font-size: 10pt;
    top: 410px;
    left:70px;
    background: #008000;
    color: #ffffcc;
     
    }
    #vors1 a:hover
    {
    text-decoration: none; background: #99dd99;
    }
     
    #juergen
    {
    position: absolute;  top: 250px; left:285px;
    margin: 0px ;
    padding: 0px;
    }
    #vors2
    {
    width: 200px;
    margin: auto;
    padding: 0px;
    position: absolute;
    list-style-type: none;
    font-size: 10pt;
    top: 410px;
    left:285px;
    background: #008000;
    color: #ffffcc;
    }
    #vors2 a:hover
    {
    text-decoration: none; background: #99dd99;
    }
    Was habe ich übersehen oder was weiß ich nicht?

    Ich hoffe eine(r) von euch hat eine Lösung für mich

    LG
    willytyp
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Bilder hinter Kopfzeile


  3. Folgende User finden die Antwort von Bandit gut:


  4. #3
    Teeny
    Themenstarter

    Registriert seit
    21.12.2014
    Beiträge
    30
    Danke
    14
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder hinter Kopfzeile

    Hallo Bandit,
    danke für den Hinweis.
    Den z-Index habe ich als erstes versucht.
    Kopfzeile und Menüzeile = z-Index 10
    Die Bilder auf z-Index 8
    Das klappt aber nicht, die Bilder laufen vorne überweg.
    Hast noch einen anderen Tipp?
    LG
    willytyp

  5. #4
    Teeny
    Themenstarter

    Registriert seit
    21.12.2014
    Beiträge
    30
    Danke
    14
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder hinter Kopfzeile

    Hallo Bandit,
    du hattest recht, es war der z-Index. Ich hatte ihn nur falsch platziert.

    Nochzmals vielen Dank

    LG
    willytyp

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 14.07.2011, 00:41
  2. Bild mit Link in Kopfzeile
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.06.2010, 08:09
  3. doppelte Kopfzeile
    Von Gast im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 27.11.2006, 14:37
  4. kopfzeile der hompage abändern
    Von tschukl im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.09.2006, 22:55
  5. kopfzeile in tabellen
    Von ina im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 17.03.2005, 19:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •