Wie man responsive Festen Header mit CSS 3 und html5

Ich versuche, eine einfache und ansprechende Gestaltung. Ich bin in der Lage, um das #container und #content reaktionsschnell Weg, aber der Feste #header bleibt im Ort und überläufe beim ändern der Größe des browser-Fensters. Gibt es trotzdem eine zentriert, fixiert, header auf eine bestimmte Länge, die responsive ist? Wenn Sie die Größe des browser-Fensters, indem Sie Sie nach Links, sehen Sie, was ich bin reden über. Ich fühle mich wie die Lösung ist einfach und erfordert nur CSS?

Hier ist die Beispiel-web-Seite Beispiel-Website

Auch, Seite Frage: Wenn ich ein Bild hinzufügen in der Kopfzeile möchte die gleiche (potenzielle) Lösung anwenden?

InformationsquelleAutor Ravi Kumar | 2015-02-07
  1. 1

    Der einzige Weg, fand ich, dass das arbeiten mit css, indem Sie entsprechende Links und rechts Attribut zum header.

    #header {
position: fixed;
top: 0;
text-align:center;
background-color: grey;
right:10%;
left:10%;
}

    Könnte dies nicht genau das, was du suchst, aber könnte hilfreich sein.

    Hier ist der link zu jsfiddle

    • danke adam für die demo-link funktioniert Es.
    InformationsquelleAutor
  2. 0

    Hier ist der code für meine jüngste reaktionsschnell festen header. Ich hoffe, das hilft.

    HTML

      <div id="header">
      <p id="headerp">Ryan Noack</p>
    <table id="table">
         <tr>
          <td id="headertd1"><a href="bio.html">Bio</a></td>
          <td id="headertd2"><a href="Video.html">Videos</a></td>
          <td id="headertd3"><a href="https://www.google.com/calendar/render?mode=day&date=20150205T165337&pli=1#h%7Cmonth-3+23105+23132+23109" >Calendar</a>
          </td>
        </tr>
    </table>
  </div>

    CSS

    @media only screen and (min-width: 1800px) and (max-width: 2250px) {

body{
    background-image: url(abstract_0014.jpg);
    background-size: cover;
    postition: relative;
    align: center;
    margin: auto;
    height: 100%;
    max-width: 1950px;

}

    Beachten Sie die max-Breite von 1950px. Dies wird halten Sie Ihren Kopf immer zu gestreckt aus auf dem größeren Bildschirm Größen.
    Der Körper als container, header span gesamte Breite des Körpers. 

    #header{

    position: relative;
    background-size: 100%;
    border-radius: 20px;
    margin: 0 auto;
    padding-bottom: 1%;
    padding-top: 1%;

}
}
    • vielen Dank patrick für deinen Beispiel-code.
    InformationsquelleAutor Patrick Falvey
Schreibe einen Kommentar