Wyłączenie kawałka kodu z linkowania

Question

Przedstawie najpierw jakiś przykładowy kawałek kodu:

<a href="#">

 <img src="costam">
                    
               <h2> blabla</h2>
                        
                        <p>tekstteksttekst</p>
                
                        <strong><h4>Czytaj więcej></h4></strong></a>

 

 

No i sprawa wygląda tak, że pod linka podlega obrazek, nagłówek oraz tekst. Jednak ja chciałbym aby linkowany był tylko obrazek, nagłówek oraz końcówka "czytaj więcej". Nie chcę tego rozbijać na 2 linki, ponieważ po najechaniu wskaźnikiem na obrazek/nagłówek lub "czytaj więcej" te elementy zmieniają kolor a obrazek jest podmieniany na inny.

W skrócie dla leniwych - Czy da się jakoś wyłączyć ten paragraf z linkowania, nie rozbijając tego na 2 linki?

Answer 1

Po prostu wyjmij go z tego linku? 

CSSem później ustaw jego docelowe położenie.

(Brakuje atrybutu alt dla img (prawdopodobnie alt powinien być pusty))
(h4 ani trochę nie jest tutaj h4 - nie używaj poziomów nagłówków do zmiany wielkości tekstu - od tego jest CSS. Aktualnie poważnie zaburzasz outline dokumentu.)

Comments

Tak też robiłem, ale zastanawiałem się czy jest optymalniejsze rozwiązanie o którym nie wiem.Co do alt, wszystko jest uzupełnione, tutaj podałem kawałek kodu na szybko.

Co do h4 racja, poprawiłem.

Dziękuje za odpowiedź.

---

hmm, bardziej bym szedł w kierunku zamknięcia linku zaraz po h2 i obsługę hovera dla tej 'karty' w javascripcie. Z punktu widzenia dostępności - dodatkowe "czytaj więcej" w linku jest zbędne.

---

Hmm.. generalnie zrobiłem to tak, że w html jakby zamieniłem to kolejnościa tzn:

<div class="info">
						<a class="infolink" href="something/index.html" target="_blank">
					
						<div id="image"></div> <!-- tu siedzi obrazek -->
					
						<h2> naglowek </h2>
						
						<p class="read-more">Czytaj więcej ></p></a>
						
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta odio placerat efficitur semper
						. Curabitur elementum ipsum a elit auctor, nec gravida felis aliquet. Donec ultricies est felis, eu pharetra
						felis cursus dictum. Ut aliquet vestibulum justo, id sagittis nibh fermentum quis. Aliquam non enim leo.</p>
				
						
					</div>

 

Po czym w css dla "czytaj wiecej" zrobiłem tak

.read-more
{
	position: absolute;
	bottom: 80px;
	width: 70%;
	left: 15%;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Lora' , Arial , Helvetica , serif;
}

 

Z js u mnie póki co ciężko więc staram się obsługiwać głownie html+css.

 

Mówisz, że dodatkowe "czytaj więcej" jest zbędne. Tylko czym to zastąpić? Jest to element strony głównej, użytkownik gdy nie najedzie kursorem na obrazek lub tytuł nie dowie się, że pod tym kryje się jakiś odnośnik.

---

mówiłem tylko o "czytaj więcej" w środku znacznika <a> Tutaj to już wchodzimy w kwestie UX.

Chyba jednak najlepszym wyjściem będzie wyjęcie tego paragrafu z linku, i ustawienie go z powrotem CSSem na miejsce.