Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z oblewaniem obrazka
Forum PHP.pl > Forum > Przedszkole
Vion
2.03.2011, 16:55:42
Witam
Mam taki problem że gdy do news'a wrzucam krotki artykuł to strona się sypie, a gdy jest długi to wszystko jest okej. Zobaczcie na http://trzebiszewo.pl/index.php o co mi chodzi. Jak zrobić żeby nawet dla krótkiego news'a wszystko bylo poprawnie ?
o to zawartość styli
[HTML] pobierz, plaintext 
  1. /* Post */
  2. .post {
  3. background: url(images/img07.jpg) repeat-x left bottom;
  4. margin-bottom: 15px;
  5. }
  6. .post .title {
  7. height: 25px;
  8. background: #259CF7;
  9. padding:5px 10px;
  10. font-size: 18px;
  11. color:#ffffff;
  12. }
  13. .post .title a {
  14. text-decoration: none;
  15. color: #ffffff;
  16. }
  17. .post .date {
  18. }
  19. .post .meta {
  20. height: 30px;
  21. margin: 0px;
  22. padding: 0px 0px 0px 10px;
  23. text-align: left;
  24. font-family: Arial, Helvetica, sans-serif;
  25. font-size: 11px;
  26. font-weight: bold;
  27. }
  28. .post .meta span {
  29. display: block;
  30. margin-top: -10px;
  31. }
  32. .post .meta .date {
  33. float: left;
  34. height: 24px;
  35. padding: 3px 10px 0px 0px;
  36. color: #000;
  37. }
  38.  
  39. .post .meta a {  color:#fff}
  40. .post .entry {
  41. padding: 5px 10px;
  42. }
  43. .post .image{ float:left;margin-right:10px; }
  44. .post .links {
  45. margin: 0 250px 0 0;
  46. padding: 0 0 0 0px;
  47. color:#ffffff;
  48. }
  49. .post .links .comments {
  50. }
  51. .post .links .permalink {
  52. padding-left: 17px;
  53.  
  54. }
  55. .links {
  56.  display: block;
  57.  position:relative;
  58.  width: 100px;
  59.  height: 20px;
  60. background: url(images/img05.jpg) no-repeat left top;
  61. text-align: center;
  62. text-decoration: none; 
  63. font-size:12px;
  64. padding:1px;
  65. color: #FFFFFF;
  66.  
  67. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="post">
  2. <h2 class="title"><a href="#">Welcome to Condition </a></h2>
  3. <p class="meta">Sunday, April 26, 2009 7:27 AM, Autor: <a href="#">Someone</a></p>
  4. <div class="entry">
  5.  
  6. <p>This is <strong>Condition </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license.  You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
  7.  
  8. <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.Sed lacus. </p>
  9. <p><a href="#" class="links">Read More</a> </p>
  10. </div>
  11.  
  12. 			</div>
[HTML] pobierz, plaintext
kokers
2.03.2011, 17:23:06
dodaj clear:both do .links
Valdi_B
2.03.2011, 17:23:16
W arkuszu stylów masz:
.links {
...
position:relative;
Po co to "position:relative"?.
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.