✔ viele css-boxen genau positionieren

Grille · 14. August 2007

hallo

Ich habe eine Datenbank wo infos für verschiedene boxen gespeichert sind: x-position; y-position; hoehe; breite; farbe

Nun lese ich die Datenbank aus und möchte die Boxen wie in der Datenbank gespeichert positionieren.

Den CODE den ich als Beispiel habe:

PHP:

<div style='background-color: #ff88ff; width: 245px; height: 660px;'>
  <div style='background-color:#b0a8b0; height:20px; width:20px; position:relative; top:10px; left:10px; float:left;'>1</div>
  <div style='background-color:#e9261b; height:10px; width:10px; position:relative; top:10px; left:50px; float:left;'>2</div>
  <div style='background-color:#e92ccb; height:10px; width:10px; position:relative; top:0px; left:0px; float:left;'>3</div>
  <div style='background-color:#b0a8b0; height:10px; width:20px; position:relative; top:50px; left:20px; float:left;'>4</div>
  <div style='background-color:#e9261b; height:30px; width:20px; position:relative; top:10px; left:150px; float:left;'>5</div>
  <div style='background-color:#e92ccb; height:40px; width:40px; position:relative; top:30px; left:60px; float:left;'>6</div>
</div><!-- p

Doch leider landen die Boxen nicht dort wo sie landen sollen ... zum Beispiel die Box mit der 3 müste eigentlich links oberhalb von der box 1 landen.
Ich brauche aber einen einheitlichen CSS-CODE damit ich diesen nurnoch mit den Datenbankinformationen automatisiert füttern kann.

Jeder Tip ist dankend willkommen.
Gruß
Grille

Maik · 14. August 2007

Hi,

vielleicht hilft es in diesem Fall weiter, wenn du das Elternelement relativ, und alle Kinderelemente darin absolut positionierst:

Code:

<div style='background-color: #ff88ff; width: 245px; height: 660px; position:relative;'>
  <div style='background-color:#b0a8b0; height:20px; width:20px; position:absolute; top:10px; left:10px;'>1</div>
  <div style='background-color:#e9261b; height:10px; width:10px; position:absolute; top:10px; left:50px;'>2</div>
  <div style='background-color:#e92ccb; height:10px; width:10px; position:absolute; top:0px; left:0px;'>3</div>
  <div style='background-color:#b0a8b0; height:10px; width:20px; position:absolute; top:50px; left:20px;'>4</div>
  <div style='background-color:#e9261b; height:30px; width:20px; position:absolute; top:10px; left:150px;'>5</div>
  <div style='background-color:#e92ccb; height:40px; width:40px; position:absolute; top:30px; left:60px;'>6</div>
</div>

Grille · 14. August 2007

Funktioniert wunderbar!

Wann werd ich das nur endlich kapieren wie das funktioniert?!

Vielen Dank

Grille · 15. August 2007

Leider ist nun das kästchen im IE 9 Pixel zu hoch: eigentlich sollen es 10 pixel sein, gezeigt werden aber 19.
Kästchen die 20px hoch sind werden komischer weise richtig angezeigt

PHP:

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/>
  <link href='css.css' rel='stylesheet' type='text/css'/>
</head>
<body>
  <div stlyle='margin: auto;'>
    <div style='width: 980px; height: 700px;'>

      <div style='background-color: #ffffee; width: 970px; height: 700px;'>

        <div style='background-color: #ffffdd; float: left; width: 205px;'>
          <div style='background-color: #ffdfdf; width: 205px; height: 150px;'>
leer
          </div>
          <div style='background-color: #dfdfff; width: 205px; height: 510px;'>
leer
          </div>
        </div>

        <div style='background-color: #ffddff; float: left; width: 520px;'>
          <div style='background-color: #fdf5fd; width: 520px; height: 150px;'>
leer
          </div>
          <div style='background-color: #aaffff; width: 520px; height: 510px;'>
            <div style='background-color: #44ffff; padding: 20px; text-align: left;'>
              <div style="width:480px; height:470px; overflow:auto;">
leer
              </div>
            </div>
          </div>
        </div>

        <div style='background-color: #ddffff; float: left; width: 245px;'>
          <div style='background-color: #ff88ff; position:relative; width: 245px; height: 660px;'>
            <div style='background-color:#b0a8b0; height:20px; width:20px; position:absolute; top:10px; left:10px; float:left;'>&nbsp;</div>
            <div style='background-color:#e9261b; height:10px; width:10px; position:absolute; top:10px; left:50px; float:left;'>&nbsp;</div> // IE 19px hoch statt 10px
            <div style='background-color:#e92ccb; height:10px; width:10px; position:absolute; top:0px; left:0px; float:left;'>&nbsp;</div> // IE 19px hoch statt 10px
            <div style='background-color:#b0a8b0; height:10px; width:20px; position:absolute; top:50px; left:20px; float:left;'>&nbsp;</div> // IE 19px hoch statt 10px
            <div style='background-color:#e9261b; height:30px; width:20px; position:absolute; top:10px; left:150px; float:left;'>&nbsp;</div>
            <div style='background-color:#e92ccb; height:40px; width:40px; position:absolute; top:30px; left:60px; float:left;'>&nbsp;</div>
          </div>
        </div>
        <div style='display: block;'></div>

        <div style='background-color: #ff8888; width: 970px; height: 40px;'>
leer
        </div>

      </div>

    </div>
  </div>
</body>
</html>

Maik · 15. August 2007

Hi,

zeichne diese DIVs mit overflow:hidden aus, denn der IE reserviert für den Elementinhalt (Text) eine gewisse Zeilenhöhe, die sich an der Schriftgröße des Dokuments orientiert, deshalb die vertikale Vergrößerung der Box.

Grille · 15. August 2007

***edit***

habe beim ersten lesen deinen tip übersehen .. stimmt .. das geht .. vielen dank noch einmal

Maik · 15. August 2007

Neben der empfohlenen overflow:hidden-Eigenschaft, hast du auch die Möglichkeit, mit font-size:0 die gewünschte Boxenhöhe zu erzwingen.

hela · 15. August 2007

Hallo grille,

das Thema ist inzwischen zwar als erledigt markiert, ich möchte trotzdem erwähnen dass die ursprünglich angedachte relative Positionierung der DIV-Blöcke natürlich auch möglich ist. Allerdings ist die Vorgehensweise etwas komplizierter, um an die TOP- und LEFT-Verschiebungswerte zu kommen. Am besten gehst du so vor:

Zunächst alle TOP- und LEFT-Werte auf Null setzen und in der Browserdarstellung die Position der einzelnen DIV-Blöcke ermitteln (-> "ursprüngliche Position").
Danach die Verschiebung von dieser ursprünglichen Position zur Zielposition errechnen und in die TOP- und LEFT-Werte eintragen.

Über eine Tabellen-Kalkulation (siehe Anhang) lässt sich das prima erledigen, die gelb markierte Werte wurden per Formel berechnet.

HTML:

<div style='background-color: #ff88ff; width: 245px; height: 660px; font-size:0.5em;'>
    <div style="background-color:#b0a8b0; height:20px; width:20px; position:relative; top:10px; left:10px;">1</div>
    <div style="background-color:#e9261b; height:10px; width:10px; position:relative; top:-10px; left:50px;">2</div>
    <div style="background-color:#e92ccb; height:10px; width:10px; position:relative; top:-30px; left:0;">3</div>
    <div style="background-color:#b0a8b0; height:10px; width:20px; position:relative; top:10px; left:20px;">4</div>
    <div style="background-color:#e9261b; height:30px; width:20px; position:relative; top:-40px; left:150px;">5</div>
    <div style="background-color:#e92ccb; height:40px; width:40px; position:relative; top:-50px; left:60px;">6</div>
</div>

✔ viele css-boxen genau positionieren

Grille

Erfahrenes Mitglied

Maik

Grille

Erfahrenes Mitglied

Grille

Erfahrenes Mitglied

Maik

Grille

Erfahrenes Mitglied

Maik

hela

Anhänge

Neue Beiträge