Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS Powazny problem z linkami ;?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
lopik
Witam wszystkich winksmiley.jpg

Więc tak, do rzeczy....

Domyślnie dla linków ustawiłem taki styl:
  1. a:link { color:#000000; text-decoration:none; border-bottom:1px dashed #000000;}
  2. a:visited { color: #000000; text-decoration:none; border-bottom:1px dashed #000000;}
  3. a:hover {color: #D3514E; text-decoration:none; border-bottom:1px dashed #000000;}
  4. a:active { color:#000000; text-decoration:none; border-bottom:1px dashed #000000; font-weight:bold;}


I mam jeszcze obrazki zrobione jako linki i dla nich mam taki styl:
  1. img { margin:3px;
  2. border:1px solid #006699;
  3. padding:3px;}
  4.  
  5. img:hover {border:1px solid #9A8B21;}


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 smile.gif
Co mam zrobić zeby usunąć ten border-bottom z linków obrazkowych ?

Z Góry Bardzo Dziękuję exclamation.gif
Pozdrawiam.
revyag
Możesz linki obrazkowe zamykać w dodatkowym elemencie. np.
Kod
div.img a {
    border-bottom:0;
}

  1. <div class="img">
  2. <a href=""><img src="image1.gif" alt="" /></a>
  3. <a href=""><img src="image2.gif" alt="" /></a>
  4. <a href=""><img src="image3.gif" alt="" /></a>
  5. </div>
  6. <a href="">item01</a><br />
  7. <a href="">item01</a><br />
  8. <a href="">item01</a><br />
  9. <a href="">item01</a><br />

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:

  1. <h3>fotki... <span class="fotki">(rozdzielczość: 1024x768)</span></h3>
  2. <p><a href="img/moto/m1.jpg"><img src="img/moto/m1mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
  3.  
  4. <a href="img/moto/m2.jpg"><img src="img/moto/m2mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
  5.  
  6. <a href="img/moto/m3.jpg"><img src="img/moto/m3mini.jpg" alt="moto" width="150" height="112" border="0" /></a></p>
  7. <p>
  8.  
  9. <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>
  10.  
  11. <a href="img/moto/m7.jpg"><img src="img/moto/m7mini.jpg" alt="moto" width="150" height="112" border="0" /></a>
  12.  
  13. <a href="img/moto/m8.jpg"><img src="img/moto/m8mini.jpg" alt="moto" width="150" height="112" border="0" /></a></p>


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?
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 exclamation.gif oczywiscie przy linkach-fotkach

Cytat
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 !
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 exclamation.gif! Jesteś wielki exclamation.gif! smile.gif

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

I dla obrazków zostawilem tak:

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

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


Super exclamation.gif
Serdeczne Dzięki. smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.