Newbie: Problem z przyleganiem w CSS

[arkadi-sea]

Witam,

Początkuje w stylach CSS i mam mały problem z wyśrodkowaniem zawartości linku do obrazka strzałki,

gdy używam stylu "display: block" przy linku ( zaznaczyłem to miejsce na czerwono) aby ładnie zachować akapit z lewej strony, to przylega on pod obrazkiem, "verticla-align: middle" przy obrazku nie pomaga, "display: table-column-group" dla listy,a "display: table-cell" dla obrazka i linku także nic nie daje, więc użyłem rozwiązania "margin-top" przy bloku linku z minusową wartością ale wolałbym użyć czegoś innego. np. "float: left" razem z "valign: top"

Mam taki kod w bloku DIV:

<center><b><FONT color=navy>SAMORZĄD 2006-2010 r.</FONT></b></center><hr width="90%">
<div style=" padding-left: 20; padding-right: 20; ">
<font color="navy"><B>URZĄD MIASTA HELU</B></font>
<hr width="90%" color="black" size=1>

<ul style="list-style-type: none; display: block; margin: 0; padding-left: 20; padding-right: 20; line-height: 120%; ">
<li style="list-style-type: none; margin: 0; padding: 0; padding-left: 15px; display: block" ><img src='./foto.php?fid=88&w=16&h=16' border="0" style=" ?"><a href='./?pid=220' style="font: 10px verdana; display: block; margin-top: -15; padding-left: 25;"></B> - rok 2007 - abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl </a>
</li>
</ul>
</div>
<hr width="90%">

Na zielono zaznaczyłem styl bo nie wiem jakiego uzyć.

Chcę pozbyć się użycia obrazka zamiast znacznika wypunktowania listy jak to zrobiłem to tutaj i uzyć go w bloku wypunktowania.

<li style="list-style-type: none; display: block; margin: 0; padding: 0; background: url('./foto.php?fid=88&w=16&h=16') no-repeat left top; padding-left: 25px"><a href='./?pid=221' style="font: bold 10px verdana; color: black;">Inwestycji, Budownictwa, Gospodarki Gruntami, Geodezji i Ochrony Środowiska</a>
</li>

jeśli ktoś ma pomysł, proszę o pomoc, generalnie chciałbym móc pozycjonować blok linku względem obrazka strzałki po lewej stronie ( np. wyrównaj do góry, wyśrodkuj, wyrównaj do dołu.).

Dzięki.

[Krzysztof Aszkiełowicz]

dajesz obrazek jako tło + padding np padding-left

i polecenie background: url('obrazek.jpg') top left no-repeat;

top zmieniasz na bottom center lub dajesz ilosc jednostek od gory

[arkadi-sea]

THX

Było tak:

<center><b><FONT color=navy>SAMORZĄD 2006-2010 r.</FONT></b></center><hr width="90%">
<div style=" padding-left: 20; padding-right: 20; ">
<font color="navy"><B>URZĄD MIASTA HELU</B></font>
<hr width="90%" color="black" size=1>

<ul style="list-style-type: none; display: block; margin: 0; padding-left: 20; padding-right: 20; line-height: 120%; ">
<li style="list-style-type: none; margin: 0; padding: 0; padding-left: 15px; display: block" ><img src='./foto.php?fid=88&w=16&h=16' border="0" style=" ?"><a href='./?pid=220' style="font: 10px verdana; display: block; margin-top: -15; padding-left: 25;"><B> archiwum</B> - rok 2007 - abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl </a>
</li>
</ul>
</div>
<hr width="90%">

A jest teraz tak:

<center><b><FONT color=navy>SAMORZĄD 2006-2010 r.</FONT></b></center><hr width="90%">
<div style=" padding-left: 20; padding-right: 20; ">
<font color="navy"><B>URZĄD MIASTA HELU</B></font>
<hr width="90%" color="black" size=1>

<ul style="list-style-type: none; display: block; margin: 0; padding-left: 20; padding-right: 20; line-height: 120%; ">
<li style="list-style-type: none; margin: 0; padding: 0; padding-left: 15px; display: block" ><div style=" background: url('./foto.php?fid=88&w=16&h=16') no-repeat 10px 20px;"><a href='./?pid=220' style="font: 10px verdana; display: block; padding-left: 40px;"><B> archiwum</B> - rok 2007 - abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl abcderfghijkl </a>
</li>
</ul>
</div>
<hr width="90%">

Na zielono zaznaczyłem zmiany w kodzie HTML/CSS

Nie wiem czy o to Tobie chodziło ale teraz jest super , w bloku listy wstawiłem diva z obrazkiem jako tło, zaś blok linku przesunąłem "padding-left: 40px" i się nie rozjechało. obrazek w div-ie mogę teraz przesuwać a blok linku jest nie naruszony. LOL testowane na = EdHTML v5.5

Extra dzięki Krzysztof.

Sam bym na to nie wpadł, a serfowałem 4 godziny po kursach i skryptach CSS na necie by to rozwiązać.
Dzieki wielkie raz jeszcze. 5 na 5 gwiazdek dla tego forum.