Ergebnis 1 bis 3 von 3

Thema: Header/Footer Hintergrund

  1. #1
    Youngster
    Registriert seit
    16.04.2015
    Beiträge
    14
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard Header/Footer Hintergrund

    Hallo zusammen,

    ich habe schon einiges im Internet gefunden, aber nichts hat mich wirklich weiter gebracht. Ich möchte gerne ein Image ganz oben (auch Header) wiederholen lassen (repeat-x). Diesen Hintergrund habe ich mit Photoshop erstellt und die unteren ca. 50 px sind als Navigationshintergrund gedacht. Mittlerweile habe ich es zwar geschafft die beiden Backgrounds für Header und Footer anzeigen zu lassen, aber nicht optimal, es bestehen kleine weisse Balken zu "left", "right" and "top". Wenn ich "position: fixed" eingebe und "left", "right" and "top" auf "0px" setzte, verschwindet zwar der Rand, aber der Hintergrund passt sich nicht mehr der Länge des Inhaltes an. Zudem bekomme ich es nicht hin, die Navi auf diese "Header" zu ziehen.
    Ich würde auch gerne eine kleine auflistung mit Links im Footer erstellen, aber daran bin ich komplett gescheitert.

    Hier mal der Code:

    HTML
    Code:
    <!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>Homepage Neu</title>
        <meta name="keywords" content="Lustig, Video, Test, use">
        <meta name="description" content="Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.">
        <link href="style.css" type="text/css" rel="stylesheet">
        </head>
        
    <body>
        <div id="Header">
    </div> 
        
        <div id="Navigation">
        <li><a href="#">Test</a></li>
        <li><a href="#">Test2</a></li>    
        <li><a href="#">Test3</a></li>
        <li><a href="#">Test4</a></li>    
    </div>
        
        <div id="Main">
        <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.         Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein          unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um       ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</a>
    </div>
        
        <div id="Bilder">
        <a href="#"><img class="position" src="images/Beispiel%201.jpg"></a>
        <a href="#"><img class="position" src="images/Beispiel2.jpg"></a>
        <a href="#"><img class="position" src="images/Beispiel3.jpg"></a>
        <a href="#"><img class="position" src="images/Beispiel4.jpg"></a>
    </div>
    
    
        <div id="Footer">
        <a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
    </div>
    CSS
    Code:
    #Header {    text-align:center;
        height: 423px;
        background-image: url(images/Test01.png);
        background-repeat: repeat-x;
    }
    
    
    #Navigation li {
        display: inline-block;
        padding-top: 200px;
        width: 150px;
        }
    
    
    #Navigation {
        text-align: center;
        font-family: Calibri;
        font-size: 130%;
        letter-spacing: 4px;
        }
    #Main {
        width: 850px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        font-family: Calibri;
        font-size: 90%;
        letter-spacing: 1px;
        }
    #Bilder img{    
        border: 5px solid rgba(0, 0, 0, 0.12);    
        border-radius: 4px;    
        display: inline-block;    
        margin-top: 10px;    
        }
    
    
    img.position {
        margin-left: 100px;
        margin-right: auto;
        }   
    #Footer {
        position: fixed;
        bottom:0px; left:0px; right:0px;
        background-image: url(images/Test04.png);
        background-repeat: repeat-x;
        text-align:center;
        padding:0px;
        height:150px;
    }

    Ich hoffe es ist kein Problem, wenn ich so viel Frage, es gibt ja leider Foren, in denen das nicht wirklich gern gesehen wird, aber möchte halt gerne weiter kommen und dazu lernen.
    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
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Header/Footer Hintergrund

    Hallo

    Ich hoffe es ist kein Problem, wenn ich so viel Frage, es gibt ja leider Foren, in denen das nicht wirklich gern gesehen wird, aber möchte halt gerne weiter kommen und dazu lernen.
    Fragen kannst du gerne. Es ist nur schwierig dir zu helfen wenn wichtige Informationen von dir fehlen. Wenn du Fragen zu Bildern hast brauchen wir auch einen Link zu den Bildern.

    Gruss

    MrMurphy

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    16.04.2015
    Beiträge
    14
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Header/Footer Hintergrund

    Zitat Zitat von MrMurphy Beitrag anzeigen
    Hallo



    Fragen kannst du gerne. Es ist nur schwierig dir zu helfen wenn wichtige Informationen von dir fehlen. Wenn du Fragen zu Bildern hast brauchen wir auch einen Link zu den Bildern.

    Gruss

    MrMurphy
    Ok das tut mir natürlich leid, ich hoffe mit dem Bild verstehst du was ich meine, oder wolltest du ein anderes Foto?

    Unbenannt-1.png

    Die beiden Zahlen 1 und 2 (in rot markiert), habe ich mit Photoshop gescliced, d.h. dies sind die Bilder, welche ich dann mit "repeat-x" von links nach rechts wiederholen möchte.

    Wie man sieht, ist ein Bereich im Header etwas dunkler, dies soll der Bereich sein, wo die Navigation drauf kommt, aber bei meiner momentanen Methode, funktioniert das nicht.

Ähnliche Themen

  1. Header/Footer Problem
    Von Semi8 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.08.2013, 11:26
  2. Footer-Hintergrund verschwnden, wenn Elemente position:absolute
    Von Franzi2704 im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 07.11.2012, 16:55
  3. header und footer in html
    Von soup im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 19
    Letzter Beitrag: 21.08.2012, 14:29
  4. Prob mit Hintergrund bzw header
    Von Falgen im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 23.09.2006, 20:58
  5. header und footer bei html
    Von im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 31.01.2005, 20:18

Stichworte

Berechtigungen

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