nicht angemeldet
Grafik mittig ausrichten, unabhängig von der Auflösung
Hallo zusammen,
wie richte ich eine Grafik mittig, wenn ich egal bei welcher Auflösung den Bildschirm in der Höhe durch die Grafik füllen möchte, sie aber in der Breie ohne Verzerrung mittig ausrichten möchte?
Hier mein Code, ich hoffe, dass sich ein Experte findet, der mir helfen kann.
Den Code habe ich von www.html-seminar.de, weiß aber einfach nicht, wie ich anpassen muss.
Danke für die Hilfe im Voraus,
Cheers
Caipurinho
<html>
<head>
<title>Bild auf ganzen Hintergrund aufspannen</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
body {
font-family:sans-serif;
}
#hintergrund {
position:absolute;
height:100%;
z-index:1;
}
#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}
#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}
</style>
</head>
<body>
<div>
<img id="hintergrund" src="whatever" />
</div>
<div id="scrollbereich">
<div id="inhalt">
<p>test</p>
</div>
-
Hallo.
Eine horizontale Zentrierung ist grundsätzlich mit margin-left(bzw. right):auto; zu erreichen.
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalteMfG, Kungschu.
--
Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. -
Hallo Caipurinho!
wie richte ich eine Grafik mittig, wenn ich egal bei welcher Auflösung
nicht Auflösung, sondern Viewportgröße
den Bildschirm
den Viewport (s.o.)
in der Höhe durch die Grafik füllen möchte, sie aber in der Breite ohne Verzerrung mittig ausrichten möchte?
Also zunächst einmal solltest du die Frage klären, ob deine Grafik zum Inhalt gehört, oder ob sie für bestimmte visuelle Ausgabemedien die Erfassung selbigens unterstützen soll, sprich ob es sich um eine Hintergrundgrafik handelt.
Wenn Letzteres der Fall ist, dann kannst (und solltest) du dafür CSS verwenden.
siehe: background-position (Hintergrundposition)
und dann bei deinem Konstrukt bspw. dem <body> das Background-Image zuweisen und background-position: 50% 50% setzen.
Und bitte mach' dir die Unterschiede klar, zwischen einer Grafik, die als Image in den HTML Quelltext eingebunden wird, und einer Hintergrundgrafik, die per CSS eingebunden wird - Danke!
Gruß Gunther