Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]problem z pojemnikiem
Forum PHP.pl > Forum > Przedszkole
Mgorka
25.09.2011, 19:55:06
Witam robię coś w podobie to tego co jest na allegro po najechaniu na zdjęcie tak jak na przykład mamy listę z aukcjami to po najechaniu na zdjęcie powiększą się ono tak więc chce zrobić coś podobnego na stylach css ale gdy mam jedne element nie ucina mi pojemnika lecz gdy tych elementów jest kilka po najechaniu na któryś z nich ten div co ma się wyświetlać wyświetla się ucięty;/ pomóżcie.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Sold</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8.  
  9. <body> 
  10. <div id="c">
  11. <ul>
  12. <li>
  13.  
  14. <div class="a">
  15. <a href="#"><img src="graphic/logo.png" style="float:left;"> adsdgas csdcg v chdvs  df greb fdkbf dakhg fhg ad gkkv cd f c b</a> 
  16. <div class="b">   
  17. siema yo siema yo
  18. </div>
  19. </div>
  20. </li>
  21. <li>
  22. <div class="a">
  23. <a href="#"><img src="graphic/logo.png" style="float:left;"> adsdgas csdcg v chdvs  df greb fdkbf dakhg fhg ad gkkv cd f c b</a> 
  24. <div class="b">   
  25. siema yo siema yo
  26. </div>
  27. </div>
  28. </li>
  29. <li>
  30. <div class="a">
  31. <a href="#"><img src="graphic/logo.png" style="float:left;"> adsdgas csdcg v chdvs  df greb fdkbf dakhg fhg ad gkkv cd f c b</a> 
  32. <div class="b">   
  33. siema yo siema yo
  34. </div>
  35. </div>
  36. </li>
  37. </ul>
  38. </div>
  39. </body>
  40. </html>
[HTML] pobierz, plaintext

style
[HTML] pobierz, plaintext 
  1. .a {
  2. position: relative;
  3. width: 400px;
  4. height: 75px;
  5. border: 2px solid red;
  6. padding: 5px;
  7. }
  8. .b{
  9. position: absolute;
  10. width: 100px;
  11. height: 100px;
  12. border: 2px solid green;
  13. padding: 5px;
  14. display: none;
  15. left: 50px;
  16. top: 60px;
  17. background-color: red;
  18. }
  19.  
  20. .a:hover .b{
  21. display: block;
  22. }
  23. ul{
  24. position: relative;
  25. }
  26. li{
  27. position: relative;
  28. }
[HTML] pobierz, plaintext
sadistic_son
25.09.2011, 21:49:10
A nie lepiej skorzystać z TEGO questionmark.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.