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:


<div class="footer">

<div class="footer-left">

  <a href="#">
  <div class="earth"></div>
    <div class="lang"></div>
	</a>
  
  </div>

<div class="footer-right"> ... </div>

</div>
CSS:


.footer{

font-size: 10pt;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;

}

.footer-left{

width: 480px;
float: left;
text-align: left;
float: left;

}

.earth{

width: 16px;
height: 16px;
float: left;
background-image: url('../images/lang.png');
background-repeat: no-repeat;
margin-left: 5px;

}

.lang{

width: 100px;
height: 16px;
margin-left: 133px;

}

.footer-right{

float: right;
text-align: right;
width: 480px;

}
‹ Háttér Javascriptből miket kell tudni? ›
 ■
1

több anchor és belülre

asam9 · 2012. Nov. 29. (Cs), 04.10

<div class="footer-left">  
    <div class="earth"><a href="#ugyanaz-a-link"></a></div>  
    <div class="lang"><a href="#ugyanaz-a-link"></a></div>
</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

<div class="footer-left">    
    <a href="">
    <div class="earth">...</div>    
    <div class="lang">...</div>  
    </a>
</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:

(function($) {

    $(document).ready(function() {

        var $parent = $('.footer-left'),
            $anchor = $parent.find('a');

        $anchor.on({
            'mouseover': function() {

                $anchor.addClass('hover');
            },
            'mouseout': function() {
                $anchor.removeClass('hover');
            }
        });
    });
}(jQuery));​


.earth a.hover, .lang a.hover {
    /* hover "effekt" :) */
}
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:

.footer-left{
	background-image: url('../images/lang.png');  
	background-repeat: no-repeat; 
	background-position: left-center;
	display: block;
	width: 460px;  
	height: 20px;
	float: left;  
	text-align: left;  
	padding-left: 20px;
}

.footer-left:hover{
	text-decoration: underline;
}



<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?

<div id="footer">
	<a href="#" class="footer-left">1. link szövege</a>
	<a href="#" class="footer-right">2. link szövege</a>
</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:


.earth:hover .lang{

...

}
Köszönöm mindenkinek a hozzászólásokat!