Forum PHP.pl > [CSS] Obrazek jako link

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Obrazek jako link - dziedziczenie stylów

dolby

4.12.2008, 22:15:53

Witajcie,

Mam następujący problem:

Na stronie mam zarówno hiperłącza tekstowe, jak i w formie obrazków.

Z tekstowymi jest ok (zmienia sie kolor border-bottom dla linka aktywnego), natomiast w przypadku obrazków (niebędących display:block) ... również pojawia się linia poziomia (przecina obrazek co wygląda fatalnie).

W związku z tym mam pytanie - jak w CSS wpisać inne zachowanie dla linków obrazkowych (tak aby tej poprzecznej linii nie było)?

Oto schemat kodu strony:

[HTML] pobierz, plaintext 
<html>
<div id="cont">
<div class="box">
<h2 class="white">Tytuł</h2>
<div id="post">
<p>Text text text <a href="x"> link txt </a> text text text</p>
<p><a href="x2"><img src="z" /></a><a href="x3"><img src="z2" /></a><p>
</div>
</div>
</div>
</html>
[HTML] pobierz, plaintext

A to CSS'ki:

[HTML] pobierz, plaintext 
.box div a{border-bottom:1px solid #999;font-weight:700}
.box div a:hover{border-bottom:1px solid #000}
.box div img{padding:2px;border:1px solid #eee}
[HTML] pobierz, plaintext

Oczywiście mógłbym dać display:block, ale chcę mieć oba obrazki w tej samej linii, wyśrodkowane.

Na rysunku poniżej widać poprawny link tekstowy ("edytuj") oraz tę irytujacą linię przechodzacą przez środek ikonek - ona właśnie jest do usunięcia.

Proszę Was o pomoc!

piotrooo89

4.12.2008, 22:22:22

[HTML] pobierz, plaintext 
.box div img a{i tu co tam chcesz}
[HTML] pobierz, plaintext

hiszpanespaniol

4.12.2008, 22:27:24

ja widzę dwa wyjścia:

1. możesz dać obrazek jako tło linka, w css ( z tego co widzę, nie wyświetlasz galerii zdjęć) i za pomocą padding'u odsunąć tekst odnośnika na tyle, żeby tła nie zasłonił. w ten sposób podkreślenie będzie widoczne tylko pod tekstem.

2. Umieszczaj obrazki i tekst w linku w następujący sposób: obrazek<br />tekst odnośnika
to także daje pożądany skutek

edit:
właśnie przyjrzałem się Twojemu kodowi i widzę, że obrazek i tekst to osobne linki. nie rozumiem więc jak doszło do tego, że podkreślenie się pojawia pod obrazkami, zamiast border'u (domyślnie niebieskiego). Obrazek będący odnośnikiem nie ma podkreślenia, ale border. Może coś przeoczyłeś?

EDIT2:
Aby pozbyć się odstępu musisz wywalić wszystkie białe znaki pomiędzy obrazkami (albo "nie białe"). Najlepiej Nie dawaj więcej niż jeden obrazek wewnątrz jednego odnośnika

dolby

4.12.2008, 22:46:05

@piotrooo89: niestety, np.: taki kod nie daje żadnego rezultatu

[HTML] pobierz, plaintext 
.box div img a{border:0px !important}
[HTML] pobierz, plaintext

@hiszpanespaniol:
Mi się wydaje, że to jest taki tok "problemu":

dla linków (A) mam zdefiniowane border-bottom: 1px i jakiś kolorek.
W efekcie dla tekstu daje to efekty podobny do text-decoration:underline i jest git.

Natomiast w sytuacji, gdy w A mam włożone IMG, to wówczas wtedy również przeglądarka rysuje linie (po "linii" na której generowałaby tekst), co w efekcie daje efekt mizerny ("przekreśla" obrazek). No i logicznie to się zgadza (w końcu ma zadeklarowane, że dla A ma rysować border-bottom).

Pytanie polega teraz na tym: jak napisac w CSS'ie że dla A w których jest IMG ma nie być dolnej linii?

Ew. czy jest możliwość dania obrazkom display:block i położenia ich w tym samym wierszu obok siebie?

Help...

EDIT2:

w CSS mam nt. linków i obrazków jeszcze tylko to:

Kod

a{color:#000;outline:0;text-decoration:none}
img{vertical-align:middle}

Jaki odstęp? między obrazkami nie mam odstepu, tak to wyglada w kodzie (odpowiedzialny za genrowanie obrakza+ linka w jego postaci)

[HTML] pobierz, plaintext 
<p><a title="xxx" href="http://xx"><img class="size-full wp-image-47 alignnone" src="http://xx" alt="xxx" width="32" height="32" /></a><a title="yyy" href="http://yy"><img class="size-full wp-image-48 alignnone" src="http://yy" alt="yyy" width="32" height="32" /></a></p>
[HTML] pobierz, plaintext

hiszpanespaniol

4.12.2008, 22:56:14

jeżeli chcesz uzależnić css rodzica od obecności/nieobecnosci odpowiedniego dziecka, to wtedy rozwiązaniem problemu będzie js. Z tego co piszesz wynika wprost, że o to Ci chodzi. Zakładam więc, ze nieprecyzyjnie piszesz i tak naprawdę chodzi Ci o coś innego.

Jeżeli natomiast chcesz pozbyć się dolneo borderu pod obrazkiem, zrób podkreślenie w sposób "normalny" i za pomocą przeznaczonych do tego narzędzi. Użyj text-decoration (albo zostaw domyślne i wtedy pod tekstem będziesz miał podkreślenie, a wokół obrazka border który css'em możesz usunąć smiało)

edit:

Cytat

img{vertical-align:middle}

to pewnie wyjaśnia dlaczego border przekreśla obrazki.

edit2:
zauważ, że border odnośnika jest widoczny pomiędzy obrazkiem, a border'em obrazka. jeżeli dasz jakiś kolor tła w tym miejscu (czyli dla img), to wtedy ten kolor tła obrazka zasłoni Ci krechę pod spodem. Może się to przyda.

dolby

4.12.2008, 23:18:11

Właśnie tego sie obawiałem - myślałem jednak, że jest jakiś "hack" na CSS'a

Zastosowałem border-bottom zamiast text-decoration:underline z tego powodu, że zależało mi na tym by "efektem" hiperłączy była tylko zmiana koloru podkreślenia ich. Tego "dekoracją" nie uzyskam - dobrze mówię ?

Pomysł z tłem jest bdb, lecz że ja mam półprzeźroczystość generowaną za pomoca filtrów

Czyli tak czy siak będzie przebijało conieco

Troche googlowałem i wydaje mi sie, że nie ma na to mocnych. Wszyscy próbują blokować border IMG, ale to nie obrazek go generuje, tylko A - czy zatem pozostaje mi tylko dorzucanie specjalnej klasy do linków w których beda obrazki, z deklaracją w CSS "border:none"?

hiszpanespaniol - słowa uznania za Twoją chęć pomocy - dawno na forum nie spotkałem się z takim zaangażowaniem

Za celne rady i pomoc otrzymujesz pkt.

PS. Sorx za niecelne określenia - prosze o wyrozumiałość z racji pory dnia

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.