Ergebnis 1 bis 2 von 2

Thema: CSS Position

  1. #1
    HTML Newbie
    Registriert seit
    29.08.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Position

    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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Rantanplan (02.09.2015 um 17:24 Uhr)

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: CSS Position

    Hallo

    oder ist dass nicht sauber bzw korrekt?
    Nein, das ist weder sauber noch korrekt.

    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?

    Soweit habe ich das Prinzip "verstanden".
    Leider nicht. Denn sowas

    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.

    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:

    Code:
    <!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>
    Gruss

    MrMurphy
    Geändert von MrMurphy (03.09.2015 um 13:04 Uhr)

Ähnliche Themen

  1. Position Problem
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 16.08.2010, 15:28
  2. Position anpassen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 23
    Letzter Beitrag: 25.05.2009, 21:17
  3. Position ermitteln
    Von Dicker1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 06.02.2009, 12:01
  4. position
    Von _tim im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.03.2008, 09:51
  5. Position
    Von Sicarius im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 04.05.2005, 21:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •