CSS Position

Rantanplan

Hallo Leute,

ich bin gerade dabei CSS zu lernen und habe mich mit den Positionen beschäftigt.
Soweit habe ich das Prinzip "verstanden".

Eine Frage habe ich aber: Wie ist der "ordentliche" (richtige) Code um ein Bild von der Mitte aus z.B. 40 PX Left zu schieben?
Muss ich dann ein Div Container zentrieren und im Div-Tag die genaue Pixelzahl "left" angeben? Kann mir jemand ein kleinen Beispielcode machen um es zu verstehen? Finde in Youtube ect nur direkte Zentrierung oder eben grobe links / rechts Plazierungen. Ich möchte aber eben (um das wirklich alles zu verstehen) wissen, wie ich eben auf den Pixel genau von der Mitte aus etwas positionieren kann.

Würde mich sehr freuen, wenn mir jemand ein Beispiel zeigen kann. (Zentrieren verstehe ich mit den 50% ect. (Wobei, ist doch eigentlich gleich, als wenn ich einen Div Tag mit align-center mittig setze, oder? Was ist da der Unterschied? Für die Screenerkennung bzw. Automaitsche anpassung?)) Na das eigentliche Lernziel ist eben das mit dem px genauen Arbeiten von der Seitenmitte aus (Oder Div-Tag/Mitte)

Also wäre so der "richtige" weg, oder ist dass nicht sauber bzw korrekt? (Funktioniert, aber wills ja anständig lernen. So muss man eben immer rechnen Also gehts auch anders?

Code

<style type="text/css">
        #container {
        width: 590px;
        height: 1000px;
        background-color: grey;
        margin-top: 50px;
        }
        #Header {
        position: absolute;
        width: 300px;
        hight: 100px;
        background-color: red;
        margin-top: 10px;
        margin-left: 140px;
        }


    </style>








</head>


<body>


   <div id="container">
   <!----------------->
        <div id="Header">


        Hallo Welt






        </div>
  <!----------------->
  </div>


</body>

Alles anzeigen

MrMurphy

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

Hallo Welt

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:

HTML

<!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

CSS Position

Tags

Benutzer online in diesem Thema