zentrieren, aber etwas verschoben...

J

JBJHJM

Mitglied
Hallo!
Habe ein Problem (vereinfacht):
Im body soll ein div zentriert werden, aber nicht ganz mittig! links soll der Abstand zum Rand genau 150px größer sein! Bekomme ich das mit css noch hin oder muss ich das alles mit javascript berechnen lassen?

Danke!
 
Hallo!

Ja, das bekommt man mit CSS hin. Aber was willst du eigentlich (horizontal?) zentrieren?
 
Ein div mit fester Breite! Das Problem ist, dass ich links und rechts unterschiedlich breite menüs habe, die aber eine feste Breite haben, und mit position:absolute eingefügt sind. Nun soll der Hauptinhalt in der Mitte zwischen den beiden Leisten zentriert werden, was dann nur geht mit einem "verschobenen" margin:0 auto...
 
Dann versuch es mal so:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5: Mini-Template</title>
    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        /* realisiert auch bei Uralt-Browsern eine horizontale Zentrierung,
           diese Eigenschaft wird vererbt! */
      }
      #wrapper {
        position: relative;
        right: 150px;
        width: 640px;
        height: 480px;
        margin: 0 auto; /* realisiert die horizontale Zentrierung bei modernen Browsern */
        text-align: left; /* nimmt die vererbte Eigenschaft für Uralt-Browser ggf. zurück */

        border: 1px solid #000;
        background-color: #ffc;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <!-- Seiteninhalt -->
    </div>
  </body>
</html>
Wesentlich dabei ist, dass der WRAPPER-Block (relativ) positioniert ist. Dann kann man ihn auch in jede Richtung verschieben -> "right: 150px", wenn du eine Verschiebung nach links haben möchtest.
 
Zuletzt bearbeitet:
Wow, funktioniert einwandfrei! Dass ich nicht selber drauf gekommen bin, einfach mal left:100px zu setzen ... :p das war alles was noch fehlte :)

Vielen Dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück