Jak rozmieścić diva?


(lutum2012) #1

html:

[logo.jpg minilogo.jpg[/code] css:
[code]#logobox { min-width: 600px; max-width: 90%; height: 120px; border-width: 1px; border-color: whiite; border-style: solid; top: 0px; margin: 0 auto; } #logo { width: 171px; height: 50px; margin-top: px; margin-left: 0px; border: 0px; } #minilogo { width: 100px; height: 100px; top: 0px; right: 0px; }

Gdy dodam do #logobox position: absolute; top: 0px; to div ucieka w lewo, a szerokość się zmienia.

](index.htm)


(Konrad Kosowski) #2

Temat i tak poleci ze względu na skandaliczną formę… niemniej… pozycjonowanie absolutne polega na wyłączeniu pozycjonowanych w ten sposób obiektów z DOM. Więc element ten nie ma rodzica, wobec którego można stosować procentowe wartości właściwości typu width, max-width itd.


(lutum2012) #3

Jak zatem rozmieszczać divy, nie używając (position: absolute;) ?


(Dimatheus) #4

lutum2012 , proszę poprawić treść posta używając znaczników code. Zignorowanie tej prośby będzie skutkować przeniesieniem tematu do kosza.

Pozdrawiam,

Dimatheus


(Konrad Kosowski) #5

Rozumiem, że zamiast co, ma być jak. No… na przykład pozycjonując je relatywnie… (position: relative). Wtedy pozycjonujesz je względem elementu nadrzędnego.


(lutum2012) #6

(Konrad Kosowski) #7

A jaki ma byc efekt ?

http://jsbin.com/ukimoj/1/edit

tutaj działa.


(jacko1998) #8

Tak tylko powiem, że to:

border-width: 1px;

border-color: white;

border-style: solid;

możesz zamienić na to:

border: 1px solid white;

(lutum2012) #9

tfl , tak też u mnie działa, ale górną linie obramowania chcę wyżej, a się nie da.


(jacko1998) #10

dodaj padding-top i border pójdzie do góry o tyle px ile podałeś w padding-top :slight_smile:


(Konrad Kosowski) #11

Znaczy tego diva border chcesz wyżej? Jeśli tak, to musisz pamiętać o domyślnych stylach przeglądarek (a dokładniej - silników przeglądarek). I tak:

http://mxr.mozilla.org/mozilla-central/ … e/html.css – dla gecko

http://trac.webkit.org/browser/trunk/So … s/html.css – dla webkita

http://www.iecss.com/ – dla tridenta

Każda współczesna przeglądarka styluje body z marginesem 8px, dlatego ramka jest “nieco niżej”


(lutum2012) #12

tfl , Dzięki za (Każda współczesna przeglądarka styluje body z marginesem 8px, dlatego ramka jest “nieco niżej”)

Wystarczyło, że dałem do body - margin: 0;

Już działa :smiley: - Nareszcie

Dziękuje wszystkim…