ugrás a tartalomhoz

CSS - DIV középre, eltolással.

therest · 2011. Feb. 9. (Sze), 13.37
Két z-indexes divet szeretnék a lap közepétől X pixellel jobbra (+ X pixel) illetve balra (- X pixel) elhelyezni css-sel. A szülő tag a body.

Amivel eddig próbálkoztam a left tulajdonság 50%-ra állítása, majd marginnal eltolni.

#div1 {
position:absolute;
left:50%;
margin-left: 490px;
top:205px;
width:109px;
height:259px;
z-index:1;
}

Ez nem igazán működik jól, átméretezéskor is elcsúsznak dolgok.
Elég sokat vacakoltam vele, végül írtam egy js függvényt ami pozícióba teszi őket, de nem szívesen hagynám így.
Hogyan lehetne ezt elegánsan, CSS-ből megoldani?

Köszi a tippeket.
‹ html table tbody overflow: auto és height probléma js event tovább küldése ›
 ■
1

HTML

Poetro · 2011. Feb. 9. (Sze), 13.55
Mivel nem mutattál HTMLt feltételezzük a következőt:
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
    body {
      position: relative;
    }
    #div1 {
      position: absolute;
      top: 205px;
      left: 50%;
      width: 109px;
      height: 259px;
      margin-left: -55px;
      z-index: 1;
      background: red;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>
Így a div középen van. Ha el akarod tolni, akkor a margin-left értékét kell megfelelően módosítani. És azért -55px, mert a szélessége 109px, annak pedig 55px a fele, és pont ennyivel kell balra tolni, hogy középen legyen. Azért mert a left a bal oldalát állítja be a doboznak, azaz balról középen kezdődik.
2

position: relative;

Endyl · 2011. Feb. 9. (Sze), 14.31
Ha jól értem mit szeretnél, ez is egy megoldás lehet:
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        
        <style type="text/css">
            body {
                text-align: center;
            }
            #div1, #div2 {
                position: relative;
                margin: 0 auto;
                width: 109px;
                height: 259px;
                z-index: 1;
                
                background: red;
                text-align: left;
            }
            #div1 {
                left: 10px;
            }
            #div2 {
                left: -10px;
            }
        </style>
    </head>
    
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>
3

megoldódott, köszi a tipeket

therest · 2011. Feb. 9. (Sze), 14.50
Köszi az összes hozzászólást, benézés volt, de a postok annyit segítettek, hogy amikor tulajdonságról tulajdonságra egyeztettem a tietekkel, akkor kiszúrtam a hibát. Gondolom Tis is voltatok úgy, hogy akár hogy majd meg feszültetek de nem láttatok a szemetektől. Na ez most annak a tipikus esete: a left atribútum rossz százalékra volt állítva. 40 perc+ ment rá....lehet többet kellett volna aludni az éjjel.

Poetro, nem középre akartam igazítani, hanem a vertikális középvonaltól X pixellel jobbra illetve balra.

Endyl, ez jó kis tömör megoldás lenne, tetszik a css, de nekem a két div így egymás felett/alatt jelenik meg (Firefox 3.6), és az fontos lenne, hogy a két div egymással egy szintben legyen. Próbáltam kibővíteni a css-ed egy top tulajdonsággal, de ez sem segített.
4

Float

Blintux · 2011. Feb. 10. (Cs), 22.11
A bal oldalra igazítandó DIV css-ében add meg: float:left;
A jobb oldalinak pedig: float:right;
De ha absolute-ra van pozicionálva a két DIV, és a szülő DIV (vagy maga a BODY) relative, akkor egymásra kerülnek. Ekkor eltolhatod őket a két irányba a marginnal. (Ahogy Poetro példájában is láthatod.)