Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

jquery hover padding problem.

[es] :: Javascript i AJAX :: jquery hover padding problem.

[ Pregleda: 1175 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Kerim O

Član broj: 206460
Poruke: 59
178.77.14.*



Profil

icon jquery hover padding problem.19.03.2012. u 22:12 - pre 146 meseci
Pozdrav..Imam problem sa IE ne prikazuje mi korektno sadržaj onako kako bi trebao da prikazuje. U Chrom-u i firefox-u mi radi sve kako treba..

Imam glavni div u kojem imam 2 diva flotana lijevo odnosno desno..E sada u desnom div-u imam ovakav sadržaj..


HTML

Code:
<ul id="portfolio-list" class="clear">
     <li><a href="http://www.themaniacs.org" title="Koopon Website Design"><img src="proba.jpg" alt="Koopon Website" width="80" height="50" /></a></li>
     <li><a href="http://www.google.com" title="Patriot Pride Corp Logo Design"><img src="ppcorp.jpg" alt="Patriot Pride Corp Logo" width="80" height="50"/></a></li>
     <li><a href="#" title="Mazaif Packagin Design"><img src="mazaif.jpg" alt="Mazaif Packaging" width="80" height="50" /></a></li>
     <li><a href="#" title="Women Working Logo Design"><img src="womenworking.jpg" alt="Women Working Logo" width="80" height="50"/></a></li>
     <li><a href="#" title="Koopon Website Design"><img src="proba.jpg" alt="Koopon Website" width="80" height="50" /></a></li>
</ul>



CSS

Code:
.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0;  }
#portfolio-list li { float: left; margin: 0 5px; list-style:none;}
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid green; width: 80px; height: 50px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: green; }


A evo i efekta..



Ako mi neko može pomoći,hvala..





 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: jquery hover padding problem.20.03.2012. u 14:43 - pre 146 meseci
Ideš mic po mic kad plavo đubre krene da zezeči nešto po svome.
U ovom slučaju, đubre je možda i u pravu, dok ostali jednostavno gledaju kroz prste.
Đubre je uvek bilo striktno i za ono što može da izvede i za ono što ne može da izvede i nikada ne gleda kroz prste kao i ostali.

za početak...

ovaj deo..

Code:


<img src="proba.jpg" alt="Koopon Website" width="80" height="50" />



Širina i visina, uvek isto?

Onda width i height jednostavno makneš iz svih linija u html-u..
i u css-u dodaš ovu liniju.

Code:


ul#portfolio-list li a img {width:80px;height:80px;}



Css inače, trebaš malo da prepraviš..

list-style:none; - ne lepiš na li već samo na ul.

i fali ti još nešto tu ... a to je type.

list-style-type:none;

Dakle...

Code:

ul#portfolio-list {list-style-type:none;}
ul#portfolio-list li { float: left; margin: 0 5px; }
ul#portfolio-list li a, ul#portfolio-list li a:visited { display: block; border: 5px solid green; width: 80px; height: 50px; }
ul#portfolio-list li a:hover, ul#portfolio-list li a:active { border-color: green; }
ul#portfolio-list li a img {width:80px;height:80px;}



Odradi to pa onda da vidimo šta kaže daljše..

A ako nemaš wrapper div za listu, napravi ga.

Obmotaj listu u nešto, neki div.. reci mu da bude relativno, apsolutno pozicioniran.. itd. zavisi od dokumenta.

Osim toga, nisam baš siguran da li .clear {display:inline-block;} ili samo .clear {display:inline;} treba..

.clear:after { ...... clear:both; ....} mislim da ni to ne pije vodu u ovom slučaju.

Kada imaš više elemenata gde neki plutaju na levo, a neki na desno...

onda napraviš jedan div koji će imati samo float:none;clear:both; i njega udeneŠ na kraju..

recimo...

Code:


## css

div.clear {float:none;clear:both;}


### html

<div class="listWrap">
<ul .... >
<li>... /* ... code  */
<li>... /* .... code */
</ul>
</div>

<div class="clear"></div>



[Ovu poruku je menjao plus_minus dana 20.03.2012. u 15:58 GMT+1]
about:networking
 
Odgovor na temu

Kerim O

Član broj: 206460
Poruke: 59
178.77.19.*



Profil

icon Re: jquery hover padding problem.20.03.2012. u 15:47 - pre 146 meseci
Izmjenio sve. U chrom-u i firefoxu radi,dok IE isto kao i na početku..
Raspored elemenata na stranici mi je..imam jedan glavni div wrapper. U njemu imam div koji mi je za navigaciju. Ispod njega su 2 div-a jedan float lijevo drugi desno. U ovaj što je flotan desno mi ide ovo gdje mi pravi problem...

 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: jquery hover padding problem.20.03.2012. u 15:54 - pre 146 meseci
Sve je to super, ali ko zna koliko tu greščica imaš pre ovog dela.
I ko zna koji je parent element kriv pa child kmeči..
about:networking
 
Odgovor na temu

Kerim O

Član broj: 206460
Poruke: 59
178.77.0.*



Profil

icon Re: jquery hover padding problem.20.03.2012. u 20:44 - pre 146 meseci
Nisi mi riješio problem ali si mi dao ideju uz pomoć koje sam riješio :) Malo sam se igrao mjenjao i u img tag dodao border:0px i sada je sve sredjeno :)
Hvala na pomoći :)
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: jquery hover padding problem.21.03.2012. u 02:33 - pre 146 meseci
E, neka nisam...
Probleme inače treba da rešavamo sami.

Osim ako u pitanju nisu manijaci koji razaraju komšiluk!

Nema na čemu.
about:networking
 
Odgovor na temu

[es] :: Javascript i AJAX :: jquery hover padding problem.

[ Pregleda: 1175 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.