[es] - jquery hover padding problem.

Kerim O

Član broj: 206460
Poruke: 59
178.77.14.*

Profil

^{19.03.2012. u 22:12 - pre 159 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

Re: jquery hover padding problem.

^{20.03.2012. u 14:43 - pre 159 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

Re: jquery hover padding problem.

^{20.03.2012. u 15:47 - pre 159 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