Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

HDD Extern Seagate

Range extender

Problema automatizare
 Business Developer Manager

Sistem fotovoltaic 5kw off grid

Repunere minge in teren

Telefon de pe Amazon sau site rom...
 Digitalizare in domeniul Horeca

Asigurare la B7 cat mai ajunge?

cumparare masina inmatriculata in...

Certificat fiscal auto
 [CUM] Cum ati fi reactionat in ac...

Credex și altex fara dobanda

schimbare nume familie copil

Problema mașina de spalat ve...
 

Meniu cu imagini pe 2 coloane.

- - - - -
  • Please log in to reply
8 replies to this topic

#1
alex05ok

alex05ok

    Member

  • Grup: Members
  • Posts: 375
  • Înscris: 08.11.2007
Buna ziua!

Vreau sa fac un meniu in HTML si CSS care se contina 4 imagini. In engleza se numeste "Rollover Menu with Images".

Vreau ca imaginile sa fie pe 2 coloane ca raspunsurile A,B,C,D de la jocul "Vrei sa fii milionar".

Meniul facut de mine este doar pe verticala:
HTML
<div id="leftnav">
<ul>
	 <li class="1"><a href="corect.htm"><span>mar</span></a></li>
	 <li class="2"><a href="gresit.htm"><span>para</span></a></li>
	 <li class="3"><a href="gresit.htm"><span>strugure</span></a></li>
	 <li class="4"><a href="gresit.htm"><span>cirese</span></a></li>
</ul>
</div>

CSS
#leftnav ul { width:200px; }
#leftnav li a { height:40px; display:block; }

#leftnav li.1 { background-image:url(1.jpg); }
#leftnav li.1 a { background-image:url(1selectat.jpg); }
#leftnav li.2 { background-image:url(2.jpg); }
#leftnav li.2 a { background-image:url(2selectat.jpg); }
#leftnav li.3 { background-image:url(3.jpg); }
#leftnav li.3 a { background-image:url(3selectat.jpg); }
#leftnav li.4 { background-image:url(4.jpg); }
#leftnav li.4 a { background-image:url(4selectat.jpg); }


#leftnav li a:hover { background-image:none; }
#leftnav li a span { display:none; } }


Va rog sa ma ajutati sa pun raspunsurile 2 si 4 pe coloana din dreapta.

Multumesc!

imaginile au dimensiunea 200*40 px

Edited by alex05ok, 11 December 2013 - 19:25.


#2
zepar

zepar

    Member

  • Grup: Members
  • Posts: 691
  • Înscris: 24.06.2010
hmm.. 2 si 4 pe dreapta?
#leftnav ul { width:200px; columns:100px 2; -webkit-columns:100px 2; -moz-columns:100px 2; }



#3
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Da-le display inline-block la <li>-uri, pune-le un float la stanga tuturor iar prin nth-of-type selecteaza al doilea item si da-i clear: right.

#4
alex05ok

alex05ok

    Member

  • Grup: Members
  • Posts: 375
  • Înscris: 08.11.2007

View Postzepar, on 11 decembrie 2013 - 23:35, said:

hmm.. 2 si 4 pe dreapta?
#leftnav ul { width:200px; columns:100px 2; -webkit-columns:100px 2; -moz-columns:100px 2; }


Este bine dar am un mic spatiu intre coloane. La "width" a trebuit sa pun 400px.
Multumesc!

#5
zepar

zepar

    Member

  • Grup: Members
  • Posts: 691
  • Înscris: 24.06.2010
pai atunci modifica 100px cu 200px

columns: 100px 2; inseamna doua coloane de 100px.. daca vrei sa calculeze automat latimea poti si sa lasi doar 2.

#6
alex05ok

alex05ok

    Member

  • Grup: Members
  • Posts: 375
  • Înscris: 08.11.2007
Am un spatiu de 10 pixeli intre coloane pe care vreau sa il inlatur. Specific ca am CSS Reset. Nu am reusit cu "column-gap:0px".

imaginile mele au dimensiunile 200*40px

se poate folosi -moz-column-count:2 , -webkit-column-count:2 si column-count:2  ?

Edited by alex05ok, 12 December 2013 - 12:28.


#7
zepar

zepar

    Member

  • Grup: Members
  • Posts: 691
  • Înscris: 24.06.2010
a.. tu le vrei lipite? Daca folosesti column-count: 2 tot va avea acel spatiu care delimiteaza coloanele. Trebuie sa adaugi proprietatea -moz-column-gap: 0px ca sa inlaturi spatiul respectiv (ma rog,  cu toate prefixele)

#8
alex05ok

alex05ok

    Member

  • Grup: Members
  • Posts: 375
  • Înscris: 08.11.2007
zepar multumesc pentru ajutor dar am rezolvat. Am gasit codul de mai jos.
#leftnav li {
  width: 50%;
  float: left;

}


O zi frumoasa!

#9
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Ai nu zau, si eu ce naiba ti-am zis? Sa le dai float left la toate mai putin celui de-al treilea, ca sa se aranjeze cum voiai tu. In fine.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate