ugrás a tartalomhoz

CSS és link probléma

titanium · 2012. Nov. 29. (Cs), 03.10
Sziasztok!

A problémám a következő: adott egy oldal footere, mely egy bal és egy jobb részből áll. A bal részben lévő 2 divre egyszerre szeretném ugyanazt a linket tenni, de valamiért az egész bal oldalra lesz érvényes. Ez azért problémás, mert a bal rész hosszabb, mint az a 2 belső div, amin a link van, ezért ha "üres" területre viszem az egeret a bal részen belül, akkor is ott a hivatkozás. Hogy tudnám megoldani?

Előre is kösz!

HTML:
  1. <div class="footer">  
  2.   
  3. <div class="footer-left">  
  4.   
  5.   <a href="#">  
  6.   <div class="earth"></div>  
  7.     <div class="lang"></div>  
  8.     </a>  
  9.     
  10.   </div>  
  11.   
  12. <div class="footer-right"> ... </div>  
  13.   
  14. </div>  
CSS:
  1. .footer{  
  2.   
  3. font-size: 10pt;  
  4. overflow: hidden;  
  5. margin-top: 10px;  
  6. margin-bottom: 10px;  
  7.   
  8. }  
  9.   
  10. .footer-left{  
  11.   
  12. width: 480px;  
  13. float: left;  
  14. text-align: left;  
  15. float: left;  
  16.   
  17. }  
  18.   
  19. .earth{  
  20.   
  21. width: 16px;  
  22. height: 16px;  
  23. float: left;  
  24. background-image: url('../images/lang.png');  
  25. background-repeat: no-repeat;  
  26. margin-left: 5px;  
  27.   
  28. }  
  29.   
  30. .lang{  
  31.   
  32. width: 100px;  
  33. height: 16px;  
  34. margin-left: 133px;  
  35.   
  36. }  
  37.   
  38. .footer-right{  
  39.   
  40. float: right;  
  41. text-align: right;  
  42. width: 480px;  
  43.   
  44. }  
‹ Háttér Javascriptből miket kell tudni? ›
 ■
1

több anchor és belülre

asam9 · 2012. Nov. 29. (Cs), 04.10
  1. <div class="footer-left">    
  2.     <div class="earth"><a href="#ugyanaz-a-link"></a></div>    
  3.     <div class="lang"><a href="#ugyanaz-a-link"></a></div>  
  4. </div>  
2

De van egy hover effekt a

titanium · 2012. Nov. 29. (Cs), 18.57
De van egy hover effekt a szövegen, ezért szeretném, ha ugyanaz a link lenne mindkettőn, mert így a fölgömbre hoverezve effekteződne a szöveg is.
3

<div class="footer-left">

hunkris · 2012. Nov. 29. (Cs), 19.00
  1. <div class="footer-left">      
  2.     <a href="">  
  3.     <div class="earth">...</div>      
  4.     <div class="lang">...</div>    
  5.     </a>  
  6. </div>   
4

Így van most is, de ahogy

titanium · 2012. Nov. 29. (Cs), 19.17
Így van most is, de ahogy írtam, valamiért az egész footer-leftre lesz érvényes, ami nem jó, mert az hosszabb, mint a két belső div, így üres területre hoverezve is ott a link. Innen indult ki a probléma, nem is értem, miért csinálja ezt.
5

Es ha az "a" tag-et block-ra

mahoo · 2012. Nov. 29. (Cs), 20.26
Es ha az "a" tag-et block-ra allitod, valamint fix szelesseget es auto magassagot adsz meg?
6

Ha linket adnál, egyszerűbb

hunkris · 2012. Nov. 29. (Cs), 21.19
Ha linket adnál, egyszerűbb lenne válaszolni. Így csak vaktában tapogatózunk.
7

ha jQuery-t behúzod, akkor

asam9 · 2012. Nov. 29. (Cs), 21.57
ha jQuery-t behúzod, akkor js-sel:
  1. (function($) {  
  2.   
  3.     $(document).ready(function() {  
  4.   
  5.         var $parent = $('.footer-left'),  
  6.             $anchor = $parent.find('a');  
  7.   
  8.         $anchor.on({  
  9.             'mouseover': function() {  
  10.   
  11.                 $anchor.addClass('hover');  
  12.             },  
  13.             'mouseout': function() {  
  14.                 $anchor.removeClass('hover');  
  15.             }  
  16.         });  
  17.     });  
  18. }(jQuery));​  
  1. .earth a.hover, .lang a.hover {  
  2.     /* hover "effekt" :) */  
  3. }  
8

CSS?

mz82 · 2012. Nov. 30. (P), 09.09
Jól értem, hogy az egészre azért van csak szükség, mert a link szövege mellett van egy kép is, amire ha ráviszed az egeret, akkor szeretnéd, hogy a link a szövegének stílusa is változzon?

Ilyet miért nem az <a> elem display: block-ra állításával, majd egy megfelelő padding érték és háttérkép alkalmazásával oldunk meg? Ami logikailag összetartozik, azt minek divekkel szétszabdalni?
9

Valahogy így

mz82 · 2012. Nov. 30. (P), 09.29
Valahogy így gondoltam:
  1. .footer-left{  
  2.     background-image: url('../images/lang.png');    
  3.     background-repeat: no-repeat;   
  4.     background-position: left-center;  
  5.     display: block;  
  6.     width: 460px;    
  7.     height: 20px;  
  8.     float: left;    
  9.     text-align: left;    
  10.     padding-left: 20px;  
  11. }  
  12.   
  13. .footer-left:hover{  
  14.     text-decoration: underline;  
  15. }  
  1. <a href="#" class="footer-left">link szövege</a>  
14

Végül mégiscsak ez lett a jó,

titanium · 2012. Dec. 1. (Szo), 16.35
Végül mégiscsak ez lett a jó, köszönöm :D
10

A .footer lehetne position:

Hidvégi Gábor · 2012. Nov. 30. (P), 11.47
A .footer lehetne position: relative, az <a> absolute, a benne lévő két <div>-et cseréld le <span>-ra, és azok is legyen absolute-ok, így szerintem a link nem fogja eltakarni a láblécet, csak a megfelelő helyen.
11

Egy ilyen láblécnek nem ennyi

mz82 · 2012. Nov. 30. (P), 12.18
Egy ilyen láblécnek nem ennyi a html-je?
  1. <div id="footer">  
  2.     <a href="#" class="footer-left">1. link szövege</a>  
  3.     <a href="#" class="footer-right">2. link szövege</a>  
  4. </div>  
Ha a footer 960px, a footer-left 400px, a footer-right meg mondjuk 200px, akkor megfelelő pozicionálással lesz köztük olyan felület is, ami nem kattintható. Nem ez volt a kérdés?
12

Ha jól értettem, akkor egy

Hidvégi Gábor · 2012. Nov. 30. (P), 12.34
Ha jól értettem, akkor egy darab linket szeretne feltenni úgy, hogy az két helyen látszódjon.
13

Na, közben megoldottam

titanium · 2012. Dec. 1. (Szo), 06.45
Na, közben megoldottam CSS-ből így:
  1. .earth:hover .lang{  
  2.   
  3. ...  
  4.   
  5. }  
Köszönöm mindenkinek a hozzászólásokat!