Hallo
Zitat
oder ist dass nicht sauber bzw korrekt?
Nein, das ist weder sauber noch korrekt.
Zitat
Also wäre so der "richtige" weg
Der richtige Weg wäre HTML5 und CSS3 und deren Fähigkeiten zu benutzen.
Pixelgenaues Layout interessiert in Zeiten von Smartphones, Tablets und Desktops mit ihren unterschiedlichen Bildschirm-/Fenstergrößen und als Zugabe hochauflösender Darstellung (Retina-Displays) niemanden mehr.
Vergiß alle Kurse / Anleitungen die mit "position: absolute" arbeiten. Die Anweisung wird nur in Ausnahmefällen verwendet. Anfänger sollten davon erst mal die Finger lassen. Wenn du mal etwas in entsprechenden Foren stöberst wirst du erkennen, dass für Anfänger "position: absolute;" die größte Fehlerquelle ist.
Und zum Zentrieren ist "position: absolute;" weder vorgesehen noch geeignet. Oder ißt du mit einer Gabel Suppe?
Zitat
Soweit habe ich das Prinzip "verstanden".
Leider nicht. Denn sowas
Zitat
Zentrieren verstehe ich mit den 50% ect.
hatte mit HTML / CSS nie etwas zu tun. Zentriert wird je nach Element entweder mit "text-align: center;" oder indem dem Element eine Breite zugewiesen wird und der linke und rechte Abstand (margin) auf auto gesetzt werden.
Zitat
Zum guten Stil gehört auch Text niemals direkt in Container zu schreiben, sondern immer in die dafür vorgesehenen Elemente wie p, h1 bis h6, li, dt, dd u.s.w. Text in Containern ist für das CSS nicht zu greifen.
Ein umfassender Container (bei dir der div mit der id "container") ist in der Regel nicht erforderlich. Weglassen.
Nachfolgend ein Beispiel, wie ein zentriertes Bild um 40px nach links verschoben werden kann. Es gibt natürlich auch noch andere Möglichkeiten. Aber diese entspricht am ehesten aktuellem HTML / CSS, welches bekanntlich möglichst schlank gehalten werden soll:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Zentriertes Bild verschieben 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
img {
max-width: 100%;
display: block;
}
}
/*Spezielle Einstellungen*/
@media all {
figure {
/* 80px ist korrekt um das Bild 40px nach links zu verschieben! */
padding: 0 80px 0 0;
border: 2px solid red;
}
img {
border: 2px solid blue;
margin: 0 auto;
}
}
</style>
</head>
<body>
<figure>
<img src="http://lorempixel.com/600/400/fashion" alt="Beispielbild">
</figure>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
