[CSS][Problem] Kropkowana linia

[Zyryx]

Mam pewnien problem, z którym nie moge sobie od dłuższego czasu poradzić. Otóż chcę zrobić linię kropkowaną z grafiki 3x3. Zrobiłem np. coś takiego:

Kod: Zaznacz cały

<div style="width: 3px; height: 100%; position: absolute; left: 135px; background-repeat: repeat; background-image: url(img/dot.gif); font-size: 1px;"></div>

Oczywiście coś takiego nie zadziała, ponieważ jest ustalona szerokość na 100%. A jeśli ustali się position: absolute to niema żadnego bloku obejmującego, w którym miałoby wypełnić te 100% szerokości. Musiałbym ustalić konkretną szerokość w px, ale tego nie chce ponieważ szerokość będzie się zmieniać niezależnie odemnie.
Próbowałem też ustalić położenie lini przez pływanie:

Kod: Zaznacz cały

<div style="width: 3px; height: 100%; float: left; background-repeat: repeat; background-image: url(img/dot.gif); font-size: 1px;"></div>

Też nie działa .

Czy ktoś ma więc jakiś pomysł jak umieścić w konkretnym miejsciu daną linie (co do piksela ) wypełniającą 100% szerokości jakiegoś bloku??

[iro]

A nie możesz po prostu skorzystać z border-style: dotted?

[Zyryx]

niestety nie. Sam spróbój jak wyglądają takie kropki pod IE, jak pod Operą a jak jeszcze pod FireFoxem. Każda przeglądarka wyświetla je zupełnie inaczej. Poza tym niechce jakichś wielkich "bydlaków" tylko małe kropeczki 1x1

[Stig]

Pierwsze co rzuca się w oczy to złe zastosowanie atrybutów width i height. Otóż atrybut width (ang. szerokość) służy do określania szerokości, a atrybut height (ang. wysokość) do określania wysokości. Poza tym jeśli to ma być linia to zgodnie z zasadami semantyki kodu należałoby użyć elementu hr, a nie div. Przykładowy kod powinien wyglądać następująco:

Kod: Zaznacz cały

<hr style="border: 0; height: 3px; width: 100%; background-image: url(img/dot.gif);" />

W Operze 8.5 i Firefox'ie działa bez zarzutu. Jeśli przedstawiony przez Ciebie problem wciąż występuje to prawdopodobnie związany jest z plikiem graficznym lub błędem przeglądarki.

[Zyryx]

no a co z IE?? Też już to próbowałem, ale IE jak zwykle potrafi wszystko popsuć

[Stig]

Z tego co widzę to badzIEwie mimo wszystko ustala obramowanie i to jest właściwie jedyna różnica. Jeśli zależy Ci na zgodności z tą "przeglądarką" to możesz mimo wszystko zastosować element div, choć to będzie błąd. Ułomność IE nie poraz pierwszy już stawia twórcę przed takim wyborem...

[Zyryx]

no tak tylko jak będę stosował divy to nie będę mógł rozciągnąć linii na 100% tylko musze ustalić konkretną wartość

[Stig]

Wątpie. Przy zastosowaniu float positioning nie powinno być z tym żadnych problemów - spokojnie będziesz mógł rozciągnąć linię na 100% szerokości. Jeśli będą z tym jakieś kłopoty to będziesz mógł szczegółowo omówić ten problem na forum.

[Zyryx]

wygląda na to, że już doszedłem o co w tym chodzi . Jeśli użyć by coś takiego

Kod: Zaznacz cały

<div style="width: 3px; height: 100%; position: absolute; left: 135px; background-repeat: repeat; background-image: url(img/dot.gif); font-size: 1px;"></div>

zaraz np. po body to działa, ale jeśli jest to umieszczone w już wypozycjonowanym elemencie:

Kod: Zaznacz cały

<div style="position: absolute; top: 25px; left: 42px;">
<div style="width: 3px; height: 100%; position: absolute; left: 135px; background-repeat: repeat; background-image: url(img/dot.gif); font-size: 1px;"></div>
</div>

To nie działa

[Stig]

Uniwersalne rozwiązanie problemu: zrezygnuj z pozycjonowania absolutnego. Stosuj float positioning (o którym już wspominałem).