[HTML/CSS][Problem] Niechciane marginesy wokół obrazków

[MoLo]

Looknij:
http://morawica.prv.pl/agro/index.html

Jak zlikwidowac obramowania wokol buttonow ?

[Stig]

Każdemu obrazkowi należy nadać atrybut display o wartości block i, aby wyświetlały się w jednej linii, atrybut float o wartości left. Przykład:

Kod: Zaznacz cały

<img src="index/button.gif" style="border: 0px #4e3505 solid; color: #feffbe; width: 127; display: block; float: left" />

Proponowałbym zastanowić się nad przeniesieniem definicji stylów do osobnej warstwy (pliku).

[quard]

z gory sorki... jestem raczej zielony

mianowicie ... co zrobic jesli ja nie chce float left ani right... ja potrzebuje zeby to bylo center.. . a float nie ma parametru center ... co zrobic zeby pozbyc sie tych przerw miedzy obrazkami bez wyrownania do lewej ???

update:

troche jeszcze poszukalem i znalazlem style="line-height: 0;" .... teoretycznie rozwiazyje to problem przerwy, ale wydaje mi sie ze to nie jest do konca dobry sposob.

[Stig]

Z tego co rozumiem, to najlepszym rozwiązaniem będzie wycentrowanie obrazka prze zastosowanie atrybutu margin o boczny wartościach auto, tak jak omówiono to w przykładzie na stronach W3C oraz dodatkowo atrybutem text-align o wartości center specjalnie dla badzIEwia. Przykład:

Kod: Zaznacz cały

<img src="image.png" alt="Alternative" style="margin: 0 auto; text-align: center;" />

[quard]

przy margin auto i text-align nadal mam przerwe ...
moze ja wkleje ten kawalek tablicy

[xml]
<td colspan="3" align="center" class="orange" style="line-height: 0;">

<img src="images/orange01-forbiden.gif" alt="Grafik koputerowy - Portfolio" width="40" height="17" ><img src="images/orange01-forbiden.gif" alt="Jakub Piechowicz - Portfolio" width="40" height="17" ><img src="images/orange01-forbiden.gif" alt="Grafik koputerowy - Portfolio" width="40" height="17" ><img src="images/orange01-forbiden.gif" alt="Jakub Piechowicz - Portfolio" width="40" height="17" ><img src="images/spacer.gif" alt="grafik" width="350" height="1" >

</td>
[/xml]

czyli mam komorke z kilkoma obrazkami obok siebie..... teraz css

[xml]
body{ margin: 0px; padding:0px; }

table, tr, td{ margin: 0px; padding:0px; border:0px; border-collapse:collapse; border-spacing:0px; font-family: "Arial CE", Arial, Verdana, Helvetica, sans-serif; font-size: 12px;}

img {border:0px; margin: 0 auto; text-align: center;}

td.orange { width: 100%; height: 17px; background:url(images/orange01.gif) left top repeat-x #FF9A0F; color:#000000;}
[/xml]

i teraz adres stronk: http://w3.tyszkiewicz.edu.pl/~japiechowicz/qd/

pod tym odresem wszystko moze byc oki ale tylko przez line-height: 0 . Tak sie akurat zlozylo ze mialem dostep do Maca wczoraj i sie okazalo ze na macu line-height: 0 nie pomaga

obrazki ktore sie nie lacza to header-inne-02.gif, header-3d-02.gif i te paseczki na gorze .... kurde... noe nie wiem co na to poradzic .....

[Stig]

Niestety, nie mam dostępu do Mac'a i trudno mi znaleźć precyzyjne rozwiązanie problemu. Jednakże generlanie mogę polecić rezygnację z używania tabel do tworzenia układu strony ("Dlaczego układ na tabelkach jest głupi: opis problemu i jego rozwiązania"), ignorowania obrazków pozycjonujących oraz umieszczania grafiki w markup'ie tylko jeśli wymaga tego kontekst zawartości merytorycznej - innymi słowy - obrazki stanowiące layout strony powinny być umieszczone poprzez warstwę prezentacji.

[quard]

hmmm... a co rozumiesz przez warstwe prezentacji strony ? bo jak juz napisalem, nie orientuje sie az tak dobrze
i jeszcze takie pytanko.. jesli chcialbym sie pozbyc tabeli to jak zrobic taki pasek jak mam tam na gorze? Chodzi mi o to czy jest cos w css takiego co klonuje jedno pikselowy obrazek w osi x przez cala strone czy mam to jednak zrobic w tabeli z width 100% i ta tabele wypozycjonowac cssem ?

[Stig]

hmmm... a co rozumiesz przez warstwe prezentacji strony ? bo jak juz napisalem, nie orientuje sie az tak dobrze

Warstwa prezentacji to arkusz stylów. Polecam artykuł "Koncepcja nowoczesnej strony internetowej".