Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata

Suprataxa card energie?!

Cum era nivelul de trai cam din a...
 probleme cu ochelarii

Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National
 Sub mobila de bucatarie si sub fr...

Rezultat RMN

Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...
 Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD.

Cost abonament clinica privata

Tremura toata, dar nu de la ro...
 

Meniu cu imagini pe 2 coloane.

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

#1
alex05ok

alex05ok

    Member

  • Grup: Members
  • Posts: 376
  • Î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: 376
  • Î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: 376
  • Î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: 376
  • Î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

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

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