 [CSS] Obrazek jako link - dziedziczenie stylów, IMG będący linkiem dziedziczy formatowanie tekstowego - jak zapobiec? |
  |
| [CSS] Obrazek jako link - dziedziczenie stylów, IMG będący linkiem dziedziczy formatowanie tekstowego - jak zapobiec? |
  4.12.2008, 22:15:53
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: A to CSS'ki:
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! 
Ten post edytował dolby 4.12.2008, 22:22:31 |
 |
 
|
|
4.12.2008, 22:22:22
Post
#2
|
|
 Newsman Grupa: Moderatorzy Postów: 4 005 Pomógł: 548 Dołączył: 7.04.2008 Skąd: Trzebinia/Kraków |
-------------------- |
|
|
|
|
4.12.2008, 22:27:24
Post
#3
|
|
 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 -------------------- |
|
|
|
|
4.12.2008, 22:46:05
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 11 Pomógł: 0 Dołączył: 3.08.2003 Skąd: Warszawa Ostrzeżenie: (0%)
|
@piotrooo89: niestety, np.: taki kod nie daje żadnego rezultatu
@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) Ten post edytował dolby 4.12.2008, 22:54:45 |
|
|
|
|
4.12.2008, 22:56:14
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 213 Pomógł: 39 Dołączył: 7.04.2008 Skąd: 3city Ostrzeżenie: (0%)
|
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. Ten post edytował hiszpanespaniol 4.12.2008, 23:03:41 -------------------- |
|
|
|
|
4.12.2008, 23:18:11
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 11 Pomógł: 0 Dołączył: 3.08.2003 Skąd: Warszawa Ostrzeżenie: (0%)
|
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 
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 24.04.2025 - 04:40 |
