Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Obrazek jako link - dziedziczenie stylów, IMG będący linkiem dziedziczy formatowanie tekstowego - jak zapobiec?
dolby
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 3.08.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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 
  1. <html>
  2. <div id="cont">
  3. <div class="box">
  4. <h2 class="white">Tytuł</h2>
  5. <div id="post">
  6. <p>Text text text <a href="x"> link txt </a> text text text</p>
  7. <p><a href="x2"><img src="z" /></a><a href="x3"><img src="z2" /></a><p>
  8. </div>
  9. </div>
  10. </div>
  11. </html>
[HTML] pobierz, plaintext


A to CSS'ki:
[HTML] pobierz, plaintext 
  1. .box div a{border-bottom:1px solid #999;font-weight:700}
  2. .box div a:hover{border-bottom:1px solid #000}
  3. .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.
(IMG:http://img201.imageshack.us/img201/7939/clipboard01es9.jpg)

Proszę Was o pomoc! (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)

Ten post edytował dolby 4.12.2008, 22:22:31
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hiszpanespaniol
post
Post #2





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

Ostrzeżenie: (0%)
-----

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

Ten post edytował hiszpanespaniol 4.12.2008, 22:38:22
Go to the top of the page
+Quote Post

Posty w temacie
- dolby   [CSS] Obrazek jako link - dziedziczenie stylów   4.12.2008, 22:15:53
- - piotrooo89   [HTML] pobierz, plaintext .box div img a{i tu co t...   4.12.2008, 22:22:22
- - hiszpanespaniol   ja widzę dwa wyjścia: 1. możesz da...   4.12.2008, 22:27:24
- - dolby   @piotrooo89: niestety, np.: taki kod nie daje żadn...   4.12.2008, 22:46:05
- - hiszpanespaniol   jeżeli chcesz uzależnić css rodzica od obecności/n...   4.12.2008, 22:56:14
- - dolby   Właśnie tego sie obawiałem - myślałem jednak, że j...   4.12.2008, 23:18:11

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 11.10.2025 - 19:11
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn