Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Care este cea mai calitativa tabl...

Laptop Dell sau recomandare Lapto...

M.Zuiko Digital 90mm F/3.5 macro

Tehnologia DSL la Orange?
 conectare navigație auto la ...

Care e pretul corect pe mp?!

Auto 200-250km/zi autostrada, fia...

Idei noi? Ce verificam la o masin...
 Încarcare acumulatori LiPo de 1,5v...

cel mai ieftin generator trifazic

cum il cheama pe acest SSD?

Trec ITP-ul daca am montat alt mo...
 Problema mesaj supraincalzire tel...

Recuperare Cont Yahoo mail

Legislatie ambiguua/incompatibili...

Radio Argon 1 se aude foarte incet
 

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