[html] Grafik unabhängig der Auflösung ausrichten

Londarus Trentos · 5. August 2007

Hi,

solangsam könnten wir einen Sammelthread mit meinen Problemen aufmachen, aber ich glaube, ich belasses mal bei einzelnen Threads :-D

Also:
Wie der Titel schon sagt, möchte ich eine Grafik unabhängig der Auflösung ausrichten.
Die Grafik ist in dem Fall ein Button, der später noch verlinkt wird.
Bei meiner Auflösung (1280x1024) klappt alles wunderbar. Bei zB 1024x768 oder gar 800x600 ist die Grafik aber verschoben.
Hier mal Screens:

Bei 1280x1024: Alles prima

Bei 800x600: Bääääh

Dann hier der Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Daswüsstestdugerne - Home</title>

<meta name="Author" content="Der Computer">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

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

#UpperBannerBereich {
   background-image: url(images/UpperBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}

#PlatzhalterBereich {
   background-image: url(images/Platzhalter.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:50px;
   background-position: center;
}

#IndexUpperBereich {
   background-image: url(images/IndexUpper.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:500px;
   background-position: center;
}

#IndexLowerBereich {
   background-image: url(images/IndexLower.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:100px;
   background-position: center;
}

#LowerBannerBereich {
   background-image: url(images/LowerBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}
</style>

</head>

<body margin="0">

<div id="UpperBannerBereich"></div>
<div id="PlatzhalterBereich"></div>
<div id="IndexUpperBereich">
<img src="images/HomeButton.jpg" height="30px" width="90px" alt="HomeButton" style="margin-left:22.5%; margin-top:8%" >
</div>
<div id="IndexLowerBereich"></div>
<div id="LowerBannerBereich"></div>

</body>

</html>

Joar, ich glaub das ist selbsterklärend

Ich hoffe mir kann wieder wer helfen =)

mfG L

Jubidu · 5. August 2007

Das erste was mir auffällt:

Code:

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

Da gehört die geschweifte Klammer auf vor die Token margin:0.

Weiterhin sind Prozentangaben für eine derartige Positionierung vielleicht nicht so gut geeignet, könnte sein, dass deine Probleme daher rühren. Mach mal Pixelangaben für den Außenabstand der Grafik.

Außerdem ist

HTML:

<body margin="0">

natürlich kein valides HTML. Du meinst vermutlich

HTML:

<body style="margin: 0px;">

, wobei die Angabe redundant mit dem Stylesheet wäre, sofern selbiges korrekt wäre.

Ich möchte dich bitten, bevor du das nächste Problem hier lösen lassen willst, für validen Code zu sorgen.

Londarus Trentos · 5. August 2007

Naja, lösen lassen ist falsch ausgedrückt. Weiß Gott durch wieviel Foren ich mich durchgewühlt hab... :roll:

Nun gut, hab jetzt ein paar Änderungen gemacht und diese Seite hier:
http://validator.w3.org/
sagt mir nun auch das die Seite "valid" ist.

Allerdings ist es doch falsch px Angaben zu nehmen, oder? Das hatte ich nämlich vorher ausprobiert und da waren die Verschiebungen noch größer...

Nun gut hier erstmal der Code, der nach der oben gennanten Seite valid ist:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Oblivion 2D Source - Home</title>

<meta name="Author" content="Oblivion 2D Source">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

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

#UpperBannerBereich {
   background-image: url(images/UpperBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}

#PlatzhalterBereich {
   background-image: url(images/Platzhalter.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:50px;
   background-position: center;
}

#IndexUpperBereich {
   background-image: url(images/IndexUpper.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:500px;
   background-position: center;
}

#IndexLowerBereich {
   background-image: url(images/IndexLower.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:100px;
   background-position: center;
}

#LowerBannerBereich {
   background-image: url(images/LowerBanner.jpg);
   background-repeat: no-repeat;
   Width:100%;
   Height:200px;
   background-position: center;
}
</style>

</head>

<body>

<div id="UpperBannerBereich"></div>
<div id="PlatzhalterBereich"></div>
<div id="IndexUpperBereich">
<img src="images/HomeButton.jpg" height="30px" width="90px" alt="HomeButton" style="margin-left:22.5%; margin-top:8%" >
</div>
<div id="IndexLowerBereich"></div>
<div id="LowerBannerBereich"></div>

</body>

</html>

Ich hoff mal jetzt ist alles richtig...

Jubidu · 5. August 2007

Ich nehm eigentlich nie Prozentangaben, wenn ich Elemente platziere. Die sind mir viel zu problematisch.

Nehmen wir zum Beispiel mal dein "margin-left: 22.5%;". Bei einer Breite des Elternelements, die der Breite des sichtbaren Bereichs eines maximierten Fensters entspricht, hast du bei einer Bildschirmauflösung von 1280*1024 einen linken Außenabstand von ungefähr 1240px * 0.225 = 279px. Bei einer Bildschirmauflösung von 800*600 ergibt sich unter ansonsten gleichen Bedingungen ein linker Außenabstand von 760px * 0.225 = 171px. Das ergibt einen Unterschied von 108px. Ach ja, bevor du dich über die Werte 1240 und 760 wunderst: ich habe jeweils 40px für Fensterrahmen und Bildlaufleiste veranschlagt.

Ich hoffe, dass du durch diese Beispielrechnung besser verstehst, weshalb ich von prozentualen Angaben abrate.

Cheecat · 5. August 2007

Londarus Trentos schrieb:
HTML:

.. html, { body margin:0; height: 100%; width: 100%; }

Ich hoff mal jetzt ist alles richtig...

Nein.

HTML:

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

Londarus Trentos · 5. August 2007

Danke Cheecat...

Aber wenn ich nun px Angaben mache bringt das ja auch nichts. Bei meiner Auflösung passen 290px genau, aber bei zB 800x600 ist die Grafik viel zu weit rechts...

Cheecat · 5. August 2007

Warum willst du die Seite so einschränken und in die Mitte setzen. Du könntest die Grafiken viel kleiner halten und dem Nutzer überlassen, wie breit er die Seite sehen will.
Des weiteren haben deine divs eine breite von 100%. Hast du schon mal Text dazwischen geschrieben? Der beginnt ganz brav am linken Rand des Browserfensters. Nicht dort wo du ihn haben willst.

Schon mal angesehen?: http://de.selfhtml.org/css/layouts/index.htm
Aber verwende am besten keine fixen Bereiche, die machen leider mehr Probleme als sie nützen. Und bau die Seite so, dass du keine Browserweichen brauchst.
Ansonsten könnte auch das für dich interessant sein: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Londarus Trentos · 5. August 2007

Warum willst du die Seite so einschränken und in die Mitte setzen.

Weils mir gefällt :-D

Du könntest die Grafiken viel kleiner halten und dem Nutzer überlassen, wie breit er die Seite sehen will.

Bitte mal genauer erklären =)

mfG L

Cheecat · 5. August 2007

Nun, bei einer Auflösung von über 1600px in der Breite wirkt das nicht mehr so toll. Das wirkt trotz des vielen Schwarz verloren.
Um den Nutzer entscheiden zu lassen, wie breit er die Seite sehen will: nutz die gesamte Breite aus, der User kann das Browserfenster schmaler machen. Aber deine schmale Konstruktion bekommt er nicht breiter.
Ich will dich nicht von der mittigen Konstruktion abhalten, aber so wie du es gemacht hast, wird es schwierig alles ordentlich hinzubekommen. Wenn, dann mach ein div mit konkreter Breitenangabe um alles ringsrum und setz das mittig.

Erstell am besten erst mal ein leeres Layout. Link hab ich dir oben gegeben.
Lass die Hintergrundbilder weg und schreib in die Bereiche nur den Namen was es sein soll rein, und füg denen erst mal nur einen dünnen Rahmen ringsrum ein, so dass man sieht, wie große ein Bereich ist.

Effizientere Hintergrundbildnutzung erklär ich dir, wenn du ein ordentliches Grundlayout hast.

Suche

Suche

[html] Grafik unabhängig der Auflösung ausrichten

Londarus Trentos

Ehrbarer Bürger

Jubidu

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Jubidu

Hausvetter

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Londarus Trentos

Ehrbarer Bürger

Cheecat

Hausvetter

Ähnliche Themen