Bild/link Mittig ausrichten und 100% breite
0 
Felix Riesterer
0 0 0
0 0 
Gunnar Bittersmann
0 
Matthias Apsel
Bild/link Mittig ausrichten und 100% breite
Hallo,
ich brauche bei folgendem Hilfe:
Ich habe ein Bild, welches größer ist als jeder Monitor.
Durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="unternehmen.html"><img src="einlass.jpg" width="100%"></a>
</body>
</html>
erreiche ich, dass das Bild immer die Größe des Monitores hat.
Soll auch so sein. Leider beginnt das Bild oben am Monitor.
Wie bekomme ich es nun Vertikal in die Mitte.
-
Lieber RovbDust,
eigentlich verlagert man visuelle Angaben in CSS-Code. Du versuchst dagegen Layoutanweisungen allein mit HTML-Mitteln zu realisieren. Es stellt sich die Frage nach dem Warum.
Mit reinen HTML-Mitteln würde ich eine blinde Tabelle vorschlagen. Steht in SELFHTML.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
@Felix. jein, ich brauche eine Lösung, noch habe ich gar nichts versucht.
-
@Felix. jein, ich brauche eine Lösung, noch habe ich gar nichts versucht.
Die erste Lösung ist nicht richtig. Da ich keine feste Höhe angeben kann für mein Bild...
das bild wird doch in dem moment erst berechnet wenn der user sein Browser kleiner oder größer zieht.
-
Hallo,
vielleicht habe ich es falsch erklärt...schaut mal mein Beispiel:
http://cerebee.de/test/
Die Grafik ist sehr groß, etwa 1900 pixel. Sobald man den Browser kleiner macht. Bleibt alles leserlich und verpixelt nicht...So und diese Grafik möchte ich nun mittig haben. Bitte helft.
-
@@RobDust:
nuqneH
schaut mal mein Beispiel:
http://cerebee.de/test/Man könnte einfacher schauen, wenn du die Seite verlinkt hättest.
Die Grafik ist sehr groß, etwa 1900 pixel.
Und das soll „größer [sein] als jeder Monitor“?
So und diese Grafik möchte ich nun mittig haben. Bitte helft.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">ist keine gute Idee. Damit schickst du Browser in den Quirksmodus – das solltest du vermeiden.Soll die Grafik der einzige Inhalt auf der Seite sein?
html, body { height: 100%; margin: 0; padding: 0; width: 100%; } html { display: table; table-layout: fixed; } body { display: table-cell; vertical-align: middle; } img { width: 100%; }Und das @width-Attribut im HTML entfernen.
Wenn die skalierte Grafik höher ist als der Viewport, erscheint ein Scrollbalken. Ist das gewünscht oder soll die Grafik so skaliert werden, dass sie nicht nur in der Breite, sondern auch in der Höhe auf jeden Fall vollständig in den Viewport passt?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
okay sorry für die fehlende Verlinkung.
Das Bild wird dann noch größer als 1900 gemacht... damit auch noch auf größeren Auflösungen gut auschaut.sooooo
http://cerebee.de/test/standard.css
dies ist die CSS wie du sie mir gegeben hast.
Und dies die Seite
klappt auf Chrome und Moz gut. von IE7-IE9 klebt es oben! Grad an div. Rechner getestet.
-
Om nah hoo pez nyeetz, RobDust!
klappt auf Chrome und Moz gut. von IE7-IE9 klebt es oben! Grad an div. Rechner getestet.
IE7-8 kennen display: table-* nicht, IE9 sollte aber passen?
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
hier der Beweis:
klapt leider net :(((((
Egal. es muss am Ende auch unter min. ie7 gehen... und aufwärts.
hier mein gebastel (bitte nicht meckern, ich benötige einfach nur ne Lösung)
<html> <head> <title>Absolut mittig</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><img src="einlass.jpg" style="width:100%"> </td> </tr> </table> </body> </html>Das geht auf Chrome Moz perfekt mittig und die größe passt sich wunderbar an. auf IE. ist es mittig aber immer 1920 pixel groß. anstatt wie bei den anderen Browsern so groß wie das Fenster.
-
@@RobDust:
nuqneH
ich benötige einfach nur ne Lösung
Die hast du – mit der Ergänzung für IE 7.
<html>
Quirk in, quirks out.
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> […]
Entferne bitte alles aus dem HTML, was du gebastelt hast, um eine Darstellung zu erzielen. Für Darstellung ist CSS zuständig – ausschließlich.
Und entferne auch alles CSS aus dem HTML, d.h. alle @style-Attribute.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Sorry aber irgendwie ist das total durcheinander. Ich verstehe grad gar nichts mehr.
Das ist meine HTML Datei.
<html>
<head>
<title>Absolut mittig</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet"
type="text/css"
href="standard.css"/></head>
<body>
<img src="einlass.jpg">
</body>
</html>Das ist meine CSS Datei.
html, body
{
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}html
{
display: table;
table-layout: fixed;
}body
{
display: table-cell;
vertical-align: middle;
}img
{
width: 100%;
}Das obene gennante klappt unter dem aktuellem Chrome und Mozilla.
Von IE7-IE9 gar nichts. Das Bild klebt oben, im vorherigen Post, der Fotobeweis...bitte lad doch mal etwas irgendwo kurz hoch. damit ich sehe das es klappt.
oder Poste den Code mal in einen neuen Post. Die alten sind komplett durchkommentiert, ich kann da nichts mehr erkennen. Sorry-
@@RobDust:
nuqneH
Das ist meine HTML Datei.
<html>
Quirk in, quirks out. Das sagte ich doch. Wie du den Quirksmodus umgehst, sagte ich auch.
Das ist meine CSS Datei.
Und wenn du da noch die Ergänzung hinzufügst …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
okay habe ich:http://cerebee.de/test/
die html Dateihttp://cerebee.de/test/standard.css
die css datei
selbes ergebniss. klebt bei ie oben
-
@@RobDust:
nuqneH
http://cerebee.de/test/
die html DateiGehe zurück in die Badstraße.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
meinst du das?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ist keine gute Idee. Damit schickst du Browser in den Quirksmodus
Das ist doch entfernt?! Guck dir den Source Code der html an...
-
@@RobDust:
nuqneH
meinst du das?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ist keine gute Idee. Damit schickst du Browser in den Quirksmodus
Ja, das meine ich.
Das ist doch entfernt?!
Ich sagte nichts von entfernen, sondern von ergänzen.
Guck dir den Source Code der html an...
Kuck dir die verlinkte Erklärung an …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
-
-
-
@@Matthias Apsel:
nuqneH
IE7-8 kennen display: table-* nicht
Doch, der 8er schon. [http://www.quirksmode.org/css/display.html]
Für 7er (und falls nötig darunter) kann man sich mit einer CSS-Expression behelfen:
*+html img { margin-top: expression([code lang=javascript](Math.max(document.documentElement.clientHeight - this.height, 0) / 2) + 'px' ~~~); }[/code] Um auf Änderungen des Browserfensters reagieren zu können, sollte die nicht nur einmal, sondern ständig laufen. Das frisst Performance, aber sonst ist ja nichts weiter auf der Seite. Qapla' -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher. (Mark Twain)-
Sorry aber irgendwie ist das total durcheinander. Ich verstehe grad gar nichts mehr.
Das ist meine HTML Datei.
<html> <head> <title>Absolut mittig</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="standard.css"/> </head> <body> <img src="einlass.jpg"> </body> </html>Das ist meine CSS Datei.
html, body { height: 100%; margin: 0; padding: 0; width: 100%; } html { display: table; table-layout: fixed; } body { display: table-cell; vertical-align: middle; } img { width: 100%; }Das obene gennante klappt unter dem aktuellem Chrome und Mozilla.
Von IE7-IE9 gar nichts. Das Bild klebt oben, im vorherigen Post, der Fotobeweis...bitte lad doch mal etwas irgendwo kurz hoch. damit ich sehe das es klappt.
oder Poste den Code mal in einen neuen Post. Die alten sind komplett durchkommentiert, ich kann da nichts mehr erkennen. Sorry
-
-
-
-
-
-
-
-
-
erreiche ich, dass das Bild immer die Größe des Monitores hat.
Nein, das Bild ist so breit wie sein Eltern-Element
Soll auch so sein. Leider beginnt das Bild oben am Monitor.
An der Oberkante seines Elternelements.
Wie bekomme ich es nun Vertikal in die Mitte.
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
bzw: möglicherweise interessiert dich auch dieses (bugverseuchte) Beispiel:
http://suit.rebell.at/fileadmin/a-33/example/ -
@@RovbDust:
nuqneH
Ich habe ein Bild, welches größer ist als jeder Monitor.
Das kann ich nicht glauben. Was macht dich da so sicher?
Durch […] erreiche ich, dass das Bild immer die Größe des Monitores hat.
Das kann ich nicht glauben.
Soll auch so sein. Leider beginnt das Bild oben am Monitor.
Das kann ich nicht glauben. Wie kriegst du das Bild außerhalb des Browserfensters angezeigt?
Ich glaube, du meinst „Browserfenster“ („Viewport“), nicht „Monitor“.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Om nah hoo pez nyeetz, RovbDust!
Wenn du tatsächlich nur ein Bild mittig anzeigen möchtest, hilft folgendes.
<div id="hintergrund"></div>#hintergrund { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-image: url('adresse des bildes'); background-position: center; }soll der Hintergrund auch noch skaliert werden
background-size: contain;oder
background-size: cover;wobei dies zu unschönen Effekten führt.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Wenn du tatsächlich nur ein Bild mittig anzeigen möchtest, hilft folgendes.
Im OP ist zu erkennen, dass das Bild verlinkt sein soll – also Inhalt ist, nicht Verzierung.
<div id="hintergrund"></div>Und wozu das 'div'?
wobei dies zu unschönen Effekten führt.
Die da wären?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Im OP ist zu erkennen, dass das Bild verlinkt sein soll – also Inhalt ist, nicht Verzierung.
naja ...
<div id="hintergrund"></div>Und wozu das 'div'?
dann also <a>
wobei dies zu unschönen Effekten führt.
Die da wären?
Wenn das Bild und der Viewport sehr unterschiedliche Seitenverhältnisse haben, wird abgeschnitten oder es entstehen Streifen.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Und wozu das 'div'?
Nachdem ich das Zitat gelesen habe:
Für den Fall, dass die Seite noch mehr Inhalte bekommt.
Matthias
--
1/z ist kein Blatt Papier.
-
-