CSS Powazny problem z linkami ;? Opcje

[lopik]

Witam wszystkich

Więc tak, do rzeczy....

Domyślnie dla linków ustawiłem taki styl:

[HTML] pobierz, plaintext 
a:link { color:#000000; text-decoration:none; border-bottom:1px dashed #000000;}
a:visited { color: #000000; text-decoration:none; border-bottom:1px dashed #000000;}
a:hover {color: #D3514E; text-decoration:none; border-bottom:1px dashed #000000;}
a:active { color:#000000; text-decoration:none; border-bottom:1px dashed #000000; font-weight:bold;}
[HTML] pobierz, plaintext 

I mam jeszcze obrazki zrobione jako linki i dla nich mam taki styl:

[HTML] pobierz, plaintext 
img { margin:3px;
    border:1px solid #006699;
    padding:3px;}
 
img:hover {border:1px solid #9A8B21;}
[HTML] pobierz, plaintext 

I problem jest taki, ze linki tekstowe są ok mają taki styl jak dalem i jest super.
Ale linki-obrazki juz nie, chodzi o to ze do nich tez wstawił się "border-bottom:1px dashed #000000" <- ten styl, który ustawiłęm dla linków tekstowych.
I problem jest taki ze ja go tam nie chce, i nie mam juz zadnego pomysłu jak mam to zroboć zeby go nie było.
Można by dać "class" ale musiał bym dla kilku dziesięciu linków dawać klase (jakies nie cale 100)

I chcialem prosic o pomoc
Co mam zrobić zeby usunąć ten border-bottom z linków obrazkowych ?

Z Góry Bardzo Dziękuję
Pozdrawiam.

[revyag]

Możesz linki obrazkowe zamykać w dodatkowym elemencie. np.

Kod

div.img a {
    border-bottom:0;
}

[HTML] pobierz, plaintext 
<div class="img">
    <a href=""><img src="image1.gif" alt="" /></a>
    <a href=""><img src="image2.gif" alt="" /></a>
    <a href=""><img src="image3.gif" alt="" /></a>
</div>
<a href="">item01</a><br />
<a href="">item01</a><br />
<a href="">item01</a><br />
<a href="">item01</a><br />
[HTML] pobierz, plaintext 

Wadą tego jest to że jeśli linki nie są pogrupowane to namnoży się pełno dodatkowych elementów.

[lopik]

No to troche mnie z tym teraz zaskoczyles, i nie bardzo wiem jak to niby mam ustawić:

Obrazki mam na tą chwilę wpisane tak:

[HTML] pobierz, plaintext 
<h3>fotki... <span class="fotki">(rozdzielczość: 1024x768)</span></h3>
<p><a href="img/moto/m1.jpg"><img src="img/moto/m1mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
 
<a href="img/moto/m2.jpg"><img src="img/moto/m2mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
 
<a href="img/moto/m3.jpg"><img src="img/moto/m3mini.jpg" alt="moto" width="150" height="112" border="0" /></a></p>
<p>
 
<a href="img/moto/m4.jpg"></a><a href="img/moto/m5.jpg"></a><a href="img/moto/m6.jpg"><img src="img/moto/m6mini.jpg" width="150" height="112" alt="moto" border="0" /></a>
 
<a href="img/moto/m7.jpg"><img src="img/moto/m7mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
 
<a href="img/moto/m8.jpg"><img src="img/moto/m8mini.jpg" alt="moto" width="150" height="112" border="0" /></a></p>
[HTML] pobierz, plaintext 

I obrazką nie moge dać "border-bottom:0;" bo one tez mają border i by mi to znikło.

A z tym stylem co ty podales, zeby dac to div to da sie zrobić tak zeby po 3 obrazki w jednej lini były ?

Ale wstawilem to to mi sie troche rozwalily obrazki, tzn. jeden pod drugim jest, a teraz mialem po 3 w jednej lini.

[shpyo]

nadaj zdjęciom jakąś klasę np. pic

Kod

<p><a href="img/moto/m1.jpg"><img src="img/moto/m1mini.jpg" class="pic" alt="moto" width="150" height="112" border="0" /></a>

i wtedy:

Kod

img.pic { margin:3px;
border:1px solid #006699;
padding:3px;}

img.pic:hover {border:1px solid #9A8B21;} //to tylko zadziała na !IE - wiesz o tym, co nie?

Ten post edytował shpyo 8.07.2006, 08:40:12

[lopik]

To tez nie dziala ;/

http://lopik.ovh.org/site/foto.html < - to jest taka testowa strona, mozecie sprawdzić kod i zobaczyć, ale obawaim sie ze te fotki będą zawsze czytac styl głuwny dla linków i nic z tego ;/

ten dolny border ten linia przerywana ! ma zniknąć, a nie ta kolorowa oczywiscie przy linkach-fotkach

img.pic:hover {border:1px solid #9A8B21;} //to tylko zadziała na !IE - wiesz o tym, co nie?

tzn. wiem o tym, ze to NIE działa na IE !

Ten post edytował pik 8.07.2006, 09:41:11

[shpyo]

Dodaj jeszcze klasę dla linków, w których są obrazki (może być taka sama - pic).

Kod

a.pic { border: 0; }

Kod

<p><a href="img/moto/m1.jpg" class="pic"><img src="img/moto/m1mini.jpg" class="pic" alt="moto" width="150" height="112" border="0" /></a>

Wtedy ten dolny border zniknie.

[lopik]

Kurcze ! Jesteś wielki !

Wiedzialem ze to będzie nie wielki bład wystarczylo dodac: "a.foto { border: 0; }"

I dla obrazków zostawilem tak:

Kod

img { margin:3px;
    border:1px solid #006699;
    padding:3px;}

img:hover { border:1px solid #9A8B21;}

Super
Serdeczne Dzięki.