Webdesign, Bildschirmauflösung Höhe

[LeanderAT]

Hallo!

Folgende Frage: Ich möchte meine Homepage überarbeiten. Sie ist momentan für 1024x768 ausgelegt, da ich Jahre nichts gemacht habe.

www.seelenpuls.at

Ich weiß, dass mein Design ungewöhnlich ist, aber möchte es so behalten. Sprich, der Hintergrund soll IMMER voll und ganz sichtbar sein und der Inhalt dann innerhalb des Hintergrunds scrollen. Der Hintergrund selber soll aber nicht scrollen. Deswegen ist es unweigerlich notwendig, dass der Hintergrund hinsichtlich der Höhe immer ganz angezeigt wird und reinpasst.

Für manche Bildschirmauflösungen ist mein Design passend, aber für 1920x1080 zu klein, weswegen ich es vergrößern möchte.

Meine Frage: Wieviel Pixel soll man hinsichtlich der Höhe von der eigentlichen Auflösung wegrechnen für die Menüleisten des Browsers oder Windowsleisten unten? Für eine Auflösung von 1024x768 hatte ich 580 höhe.

Oder hat jemand noch eine andere Idee?

 

[Zespire]

#center
{
background-color: #FFFFFF;
border: 2px solid black;
width: 960px;
height: 572px;
position: relative;
margin: 20px auto;
background-image: url(img/design_background_start.jpg);
background-repeat: no-repeat;
}

width und height durch

width: 100%; 
 height: 100%;

ersetzen.

 

[AMD4Ever]

Hi,
ich kann dir empfehlen, die Homepage für ein Responsive Design zu gestalten. Wie das geht, erfährst du unter: http://www.html-seminar.de/responsive-webdesign.htm

Ich bin gerade an der Homepage http://www.deluxe-kitchen.de beschäftigt und habe diese entsprechend auch für Mobil-Geräte also Smartphones und Tablets optimiert.

 

[WhiteShark]

Das was du vor hast, hat nichts mit gutem Webdesign zutun.
Der eine hat seine Startleiste dreizeilig, der andere hat vertikale Tabs, usw. Es gibt da zu viele unterschiedliche Auflösungen, um das so umzusetzen wie du es vor hast.

Wie wärs wenn du dein Background-image einfach fixed und contain machst?

body {
  background-size: contain;
  background-attachment: fixed;
  min-height: 100%;
}

.wrapper {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

In den Wrapper packst du dann dein Menu und Content, aber ohne eine Table zu benutzen.

 

[LeanderAT]

Danke für die Antworten!

Und ich nehme Mediaqueries je nachdem wieviel Platz ist? Dass unterschiedlich große Hintergründe geladen werden?

Man kann ja ein Bild eh mit Höhe und Breite definieren...kann man das gut und sicher erkennen lassen, wieviel Platz im Browser ist, auch ohne Javascript? Es gibt leider wenig Designs, die mir zusagen. Es gibt diese Fullscreensachen, wo ein Bild über den gesamten Bildschirm geht und mit paar Textbereichen, aber das gefällt mir nicht. Header mit Logo, unten Footer und dazwischen wird je nach verfügbarem Platz alles aufgefüllt ginge grundsätzlich, aber ich würde halt sehr gern mein Hintergrundbild komplett anzeigen lassen.