Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Cum sterg mails din Promotions

Vanzare cumparare fara transfer b...

Receptie ciudata, in functie de t...

Dupa 20 ani de facultate, am uita...
 Mobile.de ofera imprumut de bani ...

problema test grila

Digi24 a disparut de pe TV Lg

Drept de proprietate intelectuala...
 Jante noi shitbox

Trinitas TV 4K

Dacia 1316 cu 6 usi ...

Frecventa modificata radio
 Un nou pericol pt batrani

Ar trebui sa vindem imobiliarele ...

Dupa renuntarea la aparat dentar

pelerinaj in Balcik
 

span-uri CSS

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

#1
myth1002

myth1002

    Junior Member

  • Grup: Members
  • Posts: 28
  • Înscris: 13.01.2009
Salut... Incerc sa realizez cu css formatul cum il vedeti in imaginea atasata
[ http://i40.tinypic.com/ohtf80.jpg - Pentru incarcare in pagina (embed) Click aici ]

cand dau cu mouseover peste orice element din acest block (in afara de "RandomGuy", "05-03-212", "John" care vor fi si ele linkuri) vreau sa-mi sublinieze "Say Hello!", iar cand is cu mouseover peste celelalte linkuri sa sublinieze la fel

blocul imi arata cam asa:
JSP:

 <h:outputLink styleClass="threadLink" id="myCommandLink2" value="members.jsp">
									 <img style="opacity:0.9" src="images/threadBar.png">
									 <span class="thread">
										<img class="symbol2" src="images/cube.png">
										  <span id="threadText1"><h:outputText value="#{item2.subject}"></h:outputText></span> 
										   </br>
										   <span id="threadText2" class="smallSize">created by &nbsp;</span>
										   <h:outputLink styleClass="linkUnderline" id="myCommandLink4" value="register.jsp">
													   <h:outputText styleClass="#{Operations.getAccountType(Operations.getTypeX(Operations.getUserById(item2.idUser)))}" value="#{Operations.getUserX(Operations.getUserById(item2.idUser))}"></h:outputText>
													</h:outputLink>
									  </span>
</h:outputLink>



CSS:
.threadLink:hover{
	opacity:0.9;
}
.threadLink:hover #threadText1{
	text-decoration: underline;
}
.threadLink:hover #threadText2{
	text-decoration: none;
}
.linkUnderline{
	text-decoration: none;
}
.linkUnderline:link{
	position:absolute;
	display:block;
	margin-top:30px;
	margin-left:128px;
	text-decoration: none;
}
.linkUnderline:hover{
	text-decoration: underline;
}
.thread{
	 display:block;
	 position:absolute;
	 width:400px;
}

cum am mai multe elemente peste imaginea threadBar, nu puteam folosi div deoarece nu este de tip inline(am incercat si sa-i dau cu display:inline dar n-au fost rezultate bune, adica mouseover-ul se activa doar peste elementele din div, nu tot div-ul)


am ajuns la un rezultat bun folosind span-uri, dar dupa multe modificari am reusit sa-l stric si nu mai reusesc sa le aranjez; prima parte cu "Say Hello!" si "created by RandomGuy" au fost pozitionate partial iar mouseover merge bine, in schimb nu stiu cum sa mai adaug si restul textului; ar trebui sa faca parte dintr-un alt span, si sa-l pun in dreapta primului span; am incercat folosind float:left la primul span si float:right la al 2-lea dar nu a mers.. ma chinui de ceva vreme sa fac acest lucru si-s cu nervii la pamant ^^
daca cunoasteti o solutie, va rog sa ma ajutati :)

PS: outputLink ii "a href" in html, iau outputText ii pt afisarea textului

Anunturi

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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