Breite vom Header an Bildschirm anpassen

Kevin von Nebenan

Sehr geehrte Community,

ich möchte gerne einen Header für meine Seite machen. Dabei tritt aber folgendes Problem auf.
Ich habe zwei Computer, einen Laptop mit der Auflösung 1366x768 und einen Computer mit Bildschirm mit der Auflösung 1920x1080.
Coden tue ich auch meinem Computer (1920x1080).
Wenn ich die Seite mit meinem kleineren Bildschirm aufrufe, kann man nacht Links und Rechts scrollen. (s. Bild1)
Bei dem anderen Bildschirm ist es genau angepasst und man kann auch nicht nach Links und Rechts scrollen, was ja auch so sein soll.
Seht selbst: KLICK
Und bei kleineren Monitoren geht es dann halt nicht so weit in die Breite.
Meine Frage jetzt: Wie kann ich einstellen, dass der Header sich an jeden Bildschirm anpasst?
CSS Code:

CSS

#header {
    background-color: #2980b9;
    height: 100px;
    width: 1920px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    margin: 0px auto;
}

Liebe Grüße;

P.S. Bild1: http://prntscr.com/9r6byl

Aaron Rodriguez

Wonach du suchst, nennt sich Responsive Web Design. Es gibt für CSS Spezielle Queries, womit du bestimmen kannst, wie die breite bei Handys, Tablets, Laptops und große Bildschirme anwenden kannst.

Google nach Responsive Web Design Media Queries.

Swift

mach es einfach so:
width: 100%;

und nicht:
width: 1920px;

Freundliche Grüsse

ich bin alexander ryck

beim header:
width: 100%;

bei body:
overflow-x: hidden;

Kevin von Nebenan

Habe trotzdem noch einen Bereich zum scrollen. Der ist zwar sehr klein aber trotzdem da.

**^MODSirSonay** · *- manatee, 03.12.2016*

Versuch mal @media zu nutzen.

Aaron Rodriguez

Setz in der CSS-Datei von deiner Webseite ganz oben das ein:

html, body {
padding: 0px;
margin: 0px;
width: 100%
}

Shxy

Ich bevorzuge den hier: * { margin: 0; padding: 0; } , aber ist Ja Jedem selbst überlassen.

Bei deinem Header würde Ich es so machen:

#header {
background-color: #2980B9;
height: 100px;
width: 100%;
}

und dann den Padding ggf. im Container platzieren:

#header_container {
width: 960px;
margin: 0 auto;
padding: 6px;
}

Aber wie schon erwähnt, ist Jedem selbst überlassen. = )

Jetzt mitmachen!