Witam!
Mam jeszcze jeden mały problem. Kombinuję troszkę z przyciskami, które są
obrazkami.
Chcę mieć je obok siebie w linii poziomej. Dlatego mam diva który jest
kontenerem obrazków i wyznacza
szerokość i wysokość.
div#buttons {
position:absolute;
top:209px;
width:1050px;
height:33px;
}

Następnie każdy przycisk ma leżeć obok siebie i mój problem jest taki,
że elementy te leżą obok siebie, lecz z przerwą 4px. Wychodzi na to, że
każdy z przycisków ma 2px marginesu,
lecz ustawiając i margines i padding czy to dla kontenera czy też dla
każdego z przycisków z osobna nic kompletnie nie daje.
Muszę ustawić właściwość left: obrazka na -4px, co moim zdaniem jest
nielogiczne...

przykład stylu dla jednego z obrazków.:

#btn-03 {
position:relative;
display:inline;
top: 0px;
left: -4px;
width:130px;
height:33px;
padding:0;
margin:0;
}

Div z btn-03 znajduje się w div#buttons ( w kontenerze)...
Dzięki za jakieś sugestie jak to rozwiązać. Pozdrawiam

do góry

northman pisze:

> Muszę ustawić właściwość left: obrazka na -4px, co moim zdaniem jest
> nielogiczne...
obrazek sprawdzałeś?

> przykład stylu dla jednego z obrazków.:
>
> #btn-03 {
> position:relative;
> display:inline;
> top: 0px;
> left: -4px;
> width:130px;
> height:33px;
> padding:0;
> margin:0;
> }
>
> Div z btn-03 znajduje się w div#buttons ( w kontenerze)...
> Dzięki za jakieś sugestie jak to rozwiązać. Pozdrawiam
czemu nie używasz listy <ul> ?
czemu nie sprawdzisz w firebugu co to za przestrzeń?


--
Krzysztof Warunek

http://tocheckserver.pl

do góry

> czemu nie używasz listy <ul> ?
> czemu nie sprawdzisz w firebugu co to za przestrzeń?

Dzięki za sugestie.
Firebug chyba zaczynam dopiero uczyć się używać. Problem rozwiązałem poprzez
nadanie wartości float:left
jednakże w firebug, ta przerwa należała do każdego z przycisków, tzn. te 4
piksele był szerszy obrazek, a przerwa
była dodawana po jego prawej stronie. Dziwi mnie to o tyle, że szerokość
(buttona) była dokładnie ustawiona
tyle ile miał obrazek i również właściwość padding czy margin była
wyzerowana.
float: left pomogło, lecz i tak nie wiem, dlaczego była ta przerwa 4px.
Być może do tego należy używać znacznika ul i li. Jeśli jest to konieczne i
semantycznie poprawne zastosowanie,
to prosiłbym tylko o potwierdzenie. W wolnej chwili spróbuję pozmieniać cały
kod, aby to zrobić na liście.
Dzięki i pozdrawiam

do góry

northman pisze:
>> czemu nie używasz listy <ul> ?
>> czemu nie sprawdzisz w firebugu co to za przestrzeń?
>
> Dzięki za sugestie.
> Firebug chyba zaczynam dopiero uczyć się używać. Problem rozwiązałem poprzez
> nadanie wartości float:left
> jednakże w firebug, ta przerwa należała do każdego z przycisków, tzn. te 4
> piksele był szerszy obrazek, a przerwa
> była dodawana po jego prawej stronie. Dziwi mnie to o tyle, że szerokość
> (buttona) była dokładnie ustawiona
> tyle ile miał obrazek i również właściwość padding czy margin była
> wyzerowana.
> float: left pomogło, lecz i tak nie wiem, dlaczego była ta przerwa 4px.
> Być może do tego należy używać znacznika ul i li. Jeśli jest to konieczne i
> semantycznie poprawne zastosowanie,
> to prosiłbym tylko o potwierdzenie. W wolnej chwili spróbuję pozmieniać cały
> kod, aby to zrobić na liście.

Zamiast float nadaj display:block; Nie pamiętam teraz czy to usunie
przerwę, ale spróbuj.

--
Peter

do góry

Peter May pisze:
> Zamiast float nadaj display:block; Nie pamiętam teraz czy to usunie
> przerwę, ale spróbuj.
może i usunie, ale buttony nie będą w jednej linii. float zresztą i tak
sam z siebie ustawi display:block;



--
Krzysztof Warunek

http://tocheckserver.pl

do góry

northman pisze:
> Firebug chyba zaczynam dopiero uczyć się używać. Problem rozwiązałem poprzez
> nadanie wartości float:left
> była dodawana po jego prawej stronie. Dziwi mnie to o tyle, że szerokość
> (buttona) była dokładnie ustawiona
> tyle ile miał obrazek i również właściwość padding czy margin była
> wyzerowana.
> float: left pomogło, lecz i tak nie wiem, dlaczego była ta przerwa 4px.

nie specjalnie mogę pomóc, próbowałem powtórzyć takie zachowanie, ale
się nie udało. Wszystko działa jak należy czy jest display czy nie,
czy jest float czy nie, czy jest position czy nie.

Założyłem, że u Ciebie wygląda to mniej więcej tak:
<div id="buttons"><a><img /></a>...<a><img /></a></div>


> Być może do tego należy używać znacznika ul i li. Jeśli jest to konieczne i
> semantycznie poprawne zastosowanie,
czy konieczne nie wiem czy semantyczne zależy. Jeżeli jest to menu,
punkty, opcje, a właściwie coś co jest listą to należy zastosować <ul>,
tak jak do akapitu używa się <p> a nie <div>


--
Krzysztof Warunek

http://tocheckserver.pl

do góry

Właściwie to być może powinienem od razu wkleić kod i byłoby po sprawie.
Tak więc przepraszam, za marnotrawienie czasu na domysły

kawałek kodu html:

<div id="navigation">

<div id="btn02"><img src="images/navi/btn_02.jpg" alt="" id="btn02" />
</div>

<div id="btn03"><a href="index.html"
onmouseover="changeImages('btn_03', 'images/navi/btn_03-over.jpg');
return true;"
onmouseout="changeImages('btn_03', 'images/navi/btn_03.jpg'); return
true;"
onmousedown="changeImages('btn_03', 'images/navi/btn_03-down.jpg');
return true;"
onmouseup="changeImages('btn_03', 'images/navi/btn_03-over.jpg'); return
true;">
<img src="images/navi/btn_03.jpg" alt="" name="btn_03" id="btn" /></a>
</div>

<div id="btn04">
<a href="pomoc.html"
onmouseover="changeImages('btn_04', 'images/navi/btn_04-over.jpg');
return true;"
onmouseout="changeImages('btn_04', 'images/navi/btn_04.jpg'); return
true;"
onmousedown="changeImages('btn_04', 'images/navi/btn_04-down.jpg');
return true;"
onmouseup="changeImages('btn_04', 'images/navi/btn_04-over.jpg'); return
true;">
<img name="btn_04" src="images/navi/btn_04.jpg" alt="" /></a>
</div>

....
</div><!-- eof "navigation"-->

-----------------------------------------
css ------------------------------------------

div#navigation {
display:block;
width : 1050px;
height: 33px;

}

#btn02 {
display:inline;
position: relative;
left: 0px;
top: 0;
width:107px;
height:33px;
margin: 0;
padding: 0;
}

#btn03 {
display:inline;
position: relative;
left: -4px;
top: 0;
width:130px;
height:33px;
margin: 0;
padding: 0;
}

#btn04 {
display:inline;
position: relative;
left: -8px;
top: 0;
width:170px;
height:33px;

margin: 0;
padding: 0;
}

//muszę dodać, że ten kawałek css na 99% przypomina oryginalny, bo po prostu
już go zmieniłem (nie jestem pewien czy
używałem właściwości position: relative; czy samo display inline
wystarczało. Aczkolwiek jeśli miałoby to być jakimś czynnikiem
to z pewnością próbowałem usuwać tą właściwość, by sprawdzić zaachowanie, z
negatywnym skutkiem
Jak łatwo zauważyć, aby przyciski dolegały do siebie musiały być
przestawione o 4px w lewo w porównaniu do poprzedniego.

Ostatecznie zacząłem się zastanawiać czy ten kawałek javascriptu, który nota
bene możnaby zastąpić css-em nie jest
tutaj winowajcą, że pojawiała się ta przerwa. Ale raczej to nie jest powód.

No i na koniec, chcę powiedzieć, że wszystko działało mi wcześniej robiąc to
w trochę dziwny sposób, a mianowicie
tworząc div, a następnie każdy button był dodawany w osobnym divie. Efektem
tego był szereg pionowych obrazków, które
następnie ustawiałem na szerokość - poprzez właściwość left, a następnie
poprzez właściwość position: relative, przypisywałem ujemne
wartości przyciskom. Jeśli przycisk miał 33px height i 100px width, to
następny miał właściwość left:100px i height: -33px.
Trochę to głupie, ale działa, nie wiem czy w środowisku webmasterskim takie
zachowanie jest w ogóle sensowne, przypuszczam, że
trochę głupie, dlatego chciałem znaleźć prostsze rozwiązanie i przywiodło
mnie to do tego miejsca, w którym jestem. Ostatecznie
cały czas się uczę, a przecież my wszyscy cały czas się uczymy:)
Jedyne co mnie frustruje to ta przerwa 4px, która za nic w świecie nie
odnosi się do niczego. Obrazki na pewno miały zadane wymiary,
które podane były w css.
Ale, będąc pewnym, że wszystkiego w życiu nie będę wiedział, na razie daję
sobie spokój z tym. Chyba, że Wam coś przychodzi do głowy.
Być może odpowiedź na to znajdę w przyszłości, chociaż to już chyba 5 lub 6
strona którą robię w podobny sposób( dotyczy menu) i mogę
zrozumieć, że jeśli margin lub padding jest nie ustawiony to powstaje
przerwa (5 ew. 10px), ale inaczej...i 4px?:)
Pozdrawiam:) I dziękuję za zainteresowanie.
PS. Używałem display: block; to niewiele daje.

do góry

northman pisze:
>. ...
> Ale, będąc pewnym, że wszystkiego w życiu nie będę wiedział, na razie daję
> sobie spokój z tym. Chyba, że Wam coś przychodzi do głowy.
> Być może odpowiedź na to znajdę w przyszłości, chociaż to już chyba 5 lub 6
> strona którą robię w podobny sposób( dotyczy menu) i mogę
> zrozumieć, że jeśli margin lub padding jest nie ustawiony to powstaje
> przerwa (5 ew. 10px), ale inaczej...i 4px?:)
> Pozdrawiam:) I dziękuję za zainteresowanie.

po pierwsze to tragiczny kod. zrobić to najlepiej w liście, a
podmianę za pomocą CSS.

Poza tym nawalone w css dużo niepotrzebnych pozycji.

Wracając do przyczyn problemu:
białe znaki _między znacznikami_ powodują te odstępy. bo są
inline, a wtedy spacje, nowa linia - wszystko się liczy.

Wszystko w jedną linię i będzie dobrze. Można użyć tidy.

float:left to rozwiązuje bo wymusza display:block, samo
display:block nie pomoże, gdyż div będą pod sobą.



--
Krzysztof Warunek

http://tocheckserver.pl

do góry

Użytkownik "Krzysztof Warunek" <k...@w...pl> napisał w wiadomości
news:hf7k6f$657$1@news.vectranet.pl...
> białe znaki _między znacznikami_ powodują te odstępy. bo są
> inline, a wtedy spacje, nowa linia - wszystko się liczy.
> Wszystko w jedną linię i będzie dobrze. Można użyć tidy.

Białe znaki i wszystko jasne. Dziękuję.
Co za to znaczy tid? : - "...Można użyć tidy..."

do góry

northman pisze:

> Białe znaki i wszystko jasne. Dziękuję.
> Co za to znaczy tid? : - "...Można użyć tidy..."
to już jest lenistwo...

google prawde powie ew np. http://infohound.net/tidy/

--
Krzysztof Warunek

http://tocheckserver.pl

do góry