Hilfe beim Header

07/07/2013 17:52 invicous#1
Hallo Com,

ich bin noch Anfänger im Webdesignen und habe nun, bei meiner ersten größeren Homepage die ich mache, ein paar Fragen:

1. Header
Ich habe einen Header, der von links und rechts jeweils am Bildschirmrand anliegt. In diesem Header ist ein Bild, in der in der Mitte das Logo sein soll und drumherum der Bildhintergrund der Hintergrund des kompletten Containers ist.
Hier ein Screen:
Wie gesagt, dabei ist das schwarze nicht "background-color:black; sondern der Bildhintergrund (das wird später natürlich geändert, ist nur ein Testheader).

Aber nun zu meinem Problem: Ich möchte, dass sich das Logo immer in die Mitte schiebt, also auch auf kleineren Bildschirmauflösungen in der Mitte bleibt.

Wo wir nun zu meiner zweiten Frage kämen:
Wie bekomme ich es hin, dass meine Website immer einen optisch passenden Abstand zu den Bildschirmrändern hat? Bisher habe ich die Website immer an meinem 1920x1080 Bildschirm (23'') gemacht, als ich sie dann mit einem älteren PC mit einer niedrigeren Auflösung angeschaut habe, war alles total am falschen Platz.. Wie kann ich meine Website für alle Auflösung ansprechend Gestalten? Bzw. Wie muss ich die Website grundlegend aufbauen, um sie auf ziemlich allen Bildschirmvarianten gut aussehen zu lassen?

Danke für die Hilfen und schönen Sonntag noch.
07/07/2013 17:56 Evolutio#2
Du kannst dem header mit dem schwarzen Bild eine width:100% geben, dann machst du noch einen weiteren div z.B. mit der ID Logo, den gibst du eine Breite von 960px (Im Web-Design/Web-Development arbeitet man Standardgemäß mit 960px Breite) und gibst dem Logo diesen Stylewert: margin: 0 auto; damit ist das ganze schonmal mittig. Jetzt kannst du das noch mit position: relative; und top,left,right,bottom positionieren.
07/07/2013 18:59 ExChill#3
Du hast unten vergessen den Link zu übermalen...
07/07/2013 19:38 invicous#4
@Evolutio: Okay danke, werde ich gleich testen, eine Frage: Wieso genau 960px?

@ExChill: Mist, wollte eigentlich nicht, dass die Domain public wird, aber egal ^^ Hab solange ne Umleitung gemacht :P
07/07/2013 22:28 Evolutio#5
Weil 960px Problemlos auf jedem Desktop-PC dargestellt werden können :)
07/08/2013 18:06 xEncounter#6
Wenn du mit absolute positionierten Div's arbeitet sollte es eig überall gleich aussehen.

Bzw. bei align="center" wird es immer zentriert angezeigt.
07/08/2013 21:26 Evolutio#7
Quote:
Originally Posted by xEncounter View Post
Wenn du mit absolute positionierten Div's arbeitet sollte es eig überall gleich aussehen.

Bzw. bei align="center" wird es immer zentriert angezeigt.
Das ist aber nicht gerade schön gelöst..
07/08/2013 21:29 mastermo#8
Alternativ kann man im CSS auch mit "background-position" arbeiten ;)
07/08/2013 22:02 A1C3A1B2#9
Quote:
Originally Posted by Evolutio View Post
(Im Web-Design/Web-Development arbeitet man Standardgemäß mit 960px Breite)
Da stell ich doch glatt mal ne zwischenfrage gilt das für den Content bereich oder für den kompletten Bereich für die Webseite also incl. Hintergrund.