Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Oblewanie tekstem
Forum PHP.pl > Forum > Przedszkole
BuryZenek
Witam!

Od jakiegoś czasu pracuję nad własnym serwisem, o ile z MySQL jakoś sobie poradziłem, to niestety wyłożyłem się na tak banalnej rzeczy jak css - mianowicie:


Jak widać "obrazek" dochodzi do pewnej niewidzialnej linii, a chciałbym przesunąć go w prawo do samego końca równo z linią tekstu. Zamieszczam kod css:

  1. html,body{margin:0;padding:0; color: #ffffcc;}
  2. body{font: times new roman; text-align:center; background-color:#000000; font-size: 12pt;}
  3. p{margin:0 10px 10px}
  4. div#header{background-color:#000000;}
  5. div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
  6. div#container{text-align:left}
  7. div#content a{color: #999966; text-decoration:none;}
  8. div#content a:hover{color: #ffffcc; text-decoration:underline;}
  9. div#content p{line-height:1.4; margin-left:40px;}
  10. div#content p img.topic{float: right;}
  11. div#content p.post{width: 580px;}
  12. div#content p.date{position: relative; bottom: 45px; right: 5px; float: right; font-size: 11pt;}
  13. div#content table {margin-top: 10px;}
  14. div#content table img{display: block; float: left;}
  15. div#content strong{margin: 0px 0px 10px; font-size: 18pt; color: #999966; background-image: url(images/border3.jpg); background-repeat: no-repeat; background-position:left bottom; padding-left: 80px; padding-top: 5px; width: 540px; height:40px; display: block;}
  16. div#navigation{background-color:#000000;}
  17. div#navigation ul{margin: 0 0 40px; padding: 0px; list-style-type:none; background-image: url(images/bgmenu.jpg);}
  18. div#navigation li{margin: 4px; padding: 0px;}
  19. div#navigation li img{margin: 0px; padding: 0px; display: block;}
  20. div#navigation li a
  21. {
  22. display: block;
  23. width: 255px;
  24. height: 40px;
  25. color: #999966;
  26. text-shadow: 3px 3px 4px black;
  27. line-height: 40px;
  28. padding-left: 40px;
  29. font-family: times new roman;
  30. font-size: 16pt;
  31. text-decoration:none;
  32. }
  33. div#navigation li a:hover{background-image: url(images/hover.jpg); padding-left: 65px; width: 240px; margin-left: -23px; color: #ffffcc;}
  34. div#navigation li a:active{background-image: url(images/active.jpg); padding-left: 65px; width: 240px; margin-left: -23px; color: #ffffcc;}
  35. div#extra{background:#000000;}
  36. div#footer{background:#000000;}
  37. div#footer a{color: #999966; text-decoration: underline;}
  38. div#footer a:hover{color: #ffffcc;; text-decoration: none;}
  39. div#footer p{margin:10px; color: #9d9c59; text-align: center;}
  40. div#container{width:950px;margin:0 auto}
  41. div#content{float:right;width:660px;}
  42. div#navigation{float:left;width:260px; margin: 0px; padding:0px;}
  43. div#extra{clear:both;width:100%}


oraz php:

  1. echo('<strong><img src="images/kwadrat.jpg" />&nbsp;&nbsp;'.$row['tytul'].'</strong>') ;
  2. echo('<p class="date">'.date("d-m-Y, H:i",$row['data_dodania']).'</p>');
  3. echo('<p class="post"><img src="images/screen/ramka.jpg" class="topic">'.$row['tresc'].'</p>');


Tabela niestety odpada w tym przypadku bo zależy mi na oblewaniu także od dołu :/
Pozdrawiam!
mortus
  1. .post img {float: right;}

Dodatkowo możesz nadać jakiś margines, żeby stworzyć choćby minimalny odstęp.
BuryZenek
Już to zrobiłem tylko na około:
  1. div#content p img.topic{float: right;}


no ewidentnie dziwna sprawa nigdy mi się coś takiego nie przytrafiło;/

Dzięki za błyskawiczną odpowiedźtongue.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.