Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html]opis zdjecia w artykule
Forum PHP.pl > Forum > Przedszkole
piasekps
11.05.2007, 09:05:21
zanim sie posypia skargi ze taki post juz byl to najpierw prosze przeczytac...winksmiley.jpg

A wiec chcialbym zrobic cos takiego jak mamy na roznego rodzajach portalach,
ot chociazby tutaj gazeta.pl
mam zdjecie z opisem i oblewajacy go ladnie txt. nie chodzi mi o to jak zrobic aby text
sie ladnie ulozyl wokul, bo to wiadomo ale zeby opis pod zdjeciem sie ladnie pokazal
a jako normalny text jak to mi sie zdarza obecnie,

tak wyglada moje zrodlo
[PHP] pobierz, plaintext 
  1. <div class="opis">
  2. <?php		 
  3.   echo '<img src="'.$d.$file[$k].'" align="right"/>';
  4. ?>
  5.  opis opis opis
  6. </div>
[PHP] pobierz, plaintext


dzieki za jakiekolwiek wskazowki
pozdrawiam P.S.
siemakuba
11.05.2007, 10:32:55
No, wystarczy chyba opis zamknąć np. w paragraf i odpowiednio ostylować ;)
No chyba że nie zrozumiałem jakiegoś ukrytego przesłania ;)

[HTML] pobierz, plaintext 
  1. <div class="image-holder">
  2.     <img src="">
  3.     <p>Opis zdjęcia</p>
  4. </div>
[HTML] pobierz, plaintext


pozdr.
www0_0
11.05.2007, 11:01:32
Jak by to nie można było do nich do źródła zerknąć.
Przygotowałem ci taki mały wycinek z ich strony, troszkę spreparowany. myślę że teraz z łatwością to zrobisz.


index HTML

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  4. <link rel="stylesheet" href="1.css" type="text/css">
  5. <link rel="stylesheet" href="2.css" type="text/css">
  6. </head>
  7. <body>
  8. <div id="k12">
  9. <div id="k1">
  10. <div id="k0">                       
  11. <h1>TYtuł artykułu</h1>
  12. <h5 class="author">Autor artykułu</h5>                        
  13. <h6 class="date">data artykułu</h6>                        
  14. </div>
  15. <div id="art">                       
  16. <h4> Pierwsza pogrubiona część artykułu</h4>                                                      
  17. <div id="rel">                                
  18. <div class="rel_zdj">
  19. <div class="zdj_i_opis">                                                                            
  20. <img border=0 src="http://bi.gazeta.pl/im/6/4121/z4121856N.jpg" hspace=0 vspace=0 alt="Zobacz powiekszenie"><br>                                        
  21. wykonawca zdjęcia                                       
  22. <div class="zdjT">opis pod zdjęciem </div>
  23. </div>
  24. </div>                                                                                            
  25. </div>                            
  26. <div id="art2">
  27. <div id="artykul">
  28. Długi tekst artykułu powtarzający się i powtarzający, chyba tak chciałeś.
  29. </div>
  30. <div id="Str">
  31. </div>                               
  32. </div>
  33. </div>
  34. </body>
  35. </html>
[HTML] pobierz, plaintext



teraz plik
1.css
[HTML] pobierz, plaintext 
  1. body{font-family:Tahoma, lucida, arial, helvetica, sans-serif;font-size:11px;color:#000; background:#fff}
  2. #k0 h5.author {float: left; font-weight: bold;}
  3. #k0 h6.date {float: right;}
  4. #k0 img.brand {clear: both; float: left; margin-top: 5px;}
  5. #k1 #art {font-family:Verdana, Tahoma, sans-serif;font-size:12px;font-weight:normal;margin:0px;padding:0px;line-height:18px;}
  6. #k1 h2 {font-family:Verdana, Tahoma, sans-serif;font-size:12px;font-weight:bold;margin:0px;padding:0px;line-height:18px;}
  7. #k1 h3 {font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:16px;font-weight:bold;margin:0px;padding:0px;line-height:18px;}
  8. #k1 #art a {font-weight:bold;font-family:Verdana;font-size:12px;line-height:18px}
  9. #k1 #ww {margin:15px 0px 15px 10px;padding:0px;float:right;width:224px}
  10. #k1 .wwg {background: url(http://www.gazeta.pl/i/37/wyimek_gora.gif ) top left no-repeat;width:224px;height:17px}
  11. #k1 .wwd {background-image: url(http://www.gazeta.pl/i/37/wyimek_dol.gif );width:224px;height:17px;clear:both;overflow:hidden}
  12. #k1 #ww h5 {padding:0px 30px 0px 30px;margin:0px;font-family:Verdana;font-size:12px;line-height:24px;font-weight:normal}
  13. #k1 #ww h6 {padding:0px 25px 0px 30px;margin:0px;font-family:Verdana;font-size:10px;font-weight:normal;color:#999}
  14. #k1 #rm {margin:15px 0px 25px 30px;border-left:1px solid #cccccc;}
  15. #k1 #rm h6{font-family:Verdana;font-size:10px;line-height:20px;font-weight:normal;padding:0px 0px 0px 10px;margin:0px}
  16. #art h4 {font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:14px;font-weight:bold;padding:0px;line-height:18px;margin:15px 0px 30px 0px;}
  17. #dwf {font-size:10px;font-family:Verdana;margin:30px 0px 12px 0px;color:#000;}
  18. #k1 #dwf .nsn {border: 1px solid #B8B8B8; padding: 5px 6px;}
  19. #k1 #dwf .nsn2, #k1 #dwf .nsn3 {border: 1px solid #B8B8B8; padding: 5px 6px; border-left: none;}
  20. #k1 #art #dwf .nsn a, #k1 #art #dwf .nsn2 a, #k1 #art #dwf .nsn3 a {font-size:9px;font-family:Verdana;font-weight:normal}
  21. .rel_zdj { text-align: center; }
  22. .zdj_i_opis { text-align: left; margin: 0 auto; width: 176px; font-size:9px; color:#999; text-align:right; line-height:10px;}
  23. .zdj_i_opis .zdjP {float:left;}
  24. .zdj_i_opis .zdjT {line-height:14px; font-size:10px; color:#666; clear:both; padding:3px 0px;}
  25. .zdj_i_opis .zdjP a img { width: auto; }
  26. .rel_zdjTOP {margin:15px 0px 10px 0px;padding:0px}
  27. .rel_zdjTOP img {border:1px solid #000}
  28. .rel_zdjTOP .kL {width:61%}
  29. .rel_zdjTOP .kR {width:38%;}
  30. .rel_zdjTOP {width:630px; overflow:hidden;}
  31. .rel_zdj {margin-bottom: 10px; padding: 4px 0; border-top: 1px solid #ccc;}#k1 #art #rel .rel_zdj a {font-weight: normal; font-size: 11px;}
  32. .zdjP {font-family: Tahoma, Arial;font-size: 9px;color:#666;padding:0;text-align:left;}
  33. .zdjT {font-family: Verdana, Tahoma, sans-serif;font-size:10px;line-height:12px;color:#666;padding:3px 10px 0px;text-align:left;}
  34. .zdjM {font-family: Verdana, Tahoma, Arial;font-size:9px; padding:0 10px; text-align: left;}
  35. .zdjP img, .zdjM img {border: none;}
  36. div.zdjP img { margin-left:6px;}
  37. div.zdjP a img { margin-left:0px;}
  38. .rel_box {margin-bottom: 10px; text-align: center; border-top: 1px solid #ccc;}
  39. .rel_box ul {padding: 4px 10px; margin:0; list-style:none; text-align: left;}
  40. .rel_box ul li, .rel_box_vid ul li {padding-bottom: 6px;}
  41. .rel_box small {font-size:10px;font-family:Tahoma;color:#666;}
  42. .relT {font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:12px;line-height:14px;font-weight:bold;color:#C90500;padding: 5px 10px 2px;text-transform:uppercase; text-align: left; margin-top: 6px;}
  43. img.info_graph {margin-top: 5px; border: 1px solid #ccc;}
  44. #k1 #art .rel_box_vid ul li a {font-family:Verdana;font-size:11px;font-weight:normal;line-height:12px;}
  45. #k1 #art .rel_box ul li a {font-family:Verdana;font-size:11px;font-weight:normal;line-height:12px;}
  46. .rel_box_vid {margin-bottom: 10px; border-top: 1px solid #ccc; width: 190px; text-align: left; padding: 0 4px; margin-bottom: 10px;}
  47. .relTV {font-family:Verdana;font-size:11px;font-weight:bold;color:#fff;background: transparent url(/img/rel/relTVback.jpg) no-repeat 0px 4px; padding: 4px 5px 2px 5px;text-transform:uppercase; width:182px;}
  48. #art #rel .elemTV2 a.t{font-family:"Trebuchet MS"; font-size:12px; line-height:16px;}
  49. .see_vid{clear:both; display:block;}
  50. .rel_box_vid a.t img{clear:both; display:block; margin-top:2px;}
  51. .rel_box_vid ul {background-color: #E6E8E5; border: 1px solid #ccc; padding: 5px 5px 10px 5px; margin: 0px; list-style:none; width:180px !important; overflow: hidden;}
  52. .rel_box_vid ul li {zoom:1}
  53. .rel_box_vid ul li div.photoTV {float: left; margin-bottom: 0px;}
  54. .rel_box_vid ul li div.photoTV img {margin-right:6px; padding:3px 0px; border:2px dotted #cdcdcb; border-style:dotted none;}
  55. .elemTV2 {border-bottom:1px solid #ccc; padding:0px 0px 5px 0px;}
  56. .elemTV{line-height:12px;}
  57. div#art div#rel div.rel_box ul li { margin-top: 0px;}
  58. div#art div#rel div.rel_box a.t { font-family: 'Trebuchet MS' Tahoma sans-serif; font-size: 12px; padding-top: 0px; line-height: 14px; background: none; }
  59. div#art div#rel div.rel_box ul li small { color: #aaa; }
  60. div.rel_zdj img { padding-top: 8px;}
  61. div.rel_zdj div.zdjP img { padding:0; }
  62. div.rel_box div.zdjP img { padding:0; }
  63. div#art div#rel div.rel_zdj div.zdjM a {font-family:Tahoma;}
  64. div#art div#rel div.rel_zdj div.zdjM img {margin-right:4px;position:relative;top:-3px;}
  65. #artykul .ramka {font-size:10px;line-height:20px;padding-left:10px; border-left:1px solid #ccc; margin:0 0 20px 20px; float:right; width:auto;position:relative;clear:none}
  66. #artykul .wyimek {font-size:10px;line-height:20px;padding: 0 20px; border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; margin: 10px; float: right; width: 30%; position: relative; clear: none;}
  67. #artykul .wyimek .cudzy_o {background: url(/i/37/cudzy.gif) no-repeat; width: 100%;}
  68. #artykul .wyimek .cudzy_z {background: url(/i/37/cudzy.gif) no-repeat right; width: 100%;}
  69. span.nsn a { background: transparent url('/i/37/koperta2.gif') no-repeat 0% 50%; padding: 3px 0 3px 20px; }
  70. span.nsn2 a { background: transparent url('/i/37/druk2.gif') no-repeat 0% 50%; padding: 3px 0 3px 20px; }
  71. span.nsn3 a { background: transparent url('/i/37/dyskutuj2.gif') no-repeat 0% 50%; padding: 3px 0 3px 20px; }
  72. div.EAwrp, div#TopCZ { position:relative; }
  73. .pod_reklama{margin-top:10px !important; margin-top:17px;}
  74. #k12 .MZBC{border:1px solid #c8d0b8;overflow:hidden;zoom:1;padding:11px 8px;font-family:Tahoma, sans-serif;}
  75. #k12 .MZBC *{margin:0;padding:0;}
  76. #k12 .MZBC .MZBChead{text-transform:uppercase;font-size:13px;font-family:'Trebuchet MS', Tahoma, sans-serif;margin-bottom:10px;font-weight:bold;}
  77. #k12 .MZBCwrp .MZBCwrp1{float:left;width:140px;}
  78. #k12 .MZBCwrp .MZBCwrp{float:left;border-left:1px solid #c8d0b8;padding:0px 7px;width:140px;}
  79. #k12 .MZBCwrp .MZBCwrp .MZBCt1{text-transform:uppercase;font-size:13px;font-family:'Trebuchet MS', Tahoma, sans-serif;margin-bottom:10px;}
  80. #k12 .MZBCwrp li{list-style-type:square;line-height:17px;font-size:11px;}
  81. #k12 .MZBCwrp ul{margin:13px 0px 7px 18px;}
  82. #k12 .MZBimgC{text-align:center;}
[HTML] pobierz, plaintext



2.css
[HTML] pobierz, plaintext 
  1. h1, h2, h3 {font-family:Trebuchet MS, sans-serif; font-size:24px; font-weight:normal;margin-bottom:6px}
  2. h4, h5 {font-weight:bold; font-size:11px}
  3. body{height:100%;margin:0}
  4. p {margin:0;padding:0}
  5. img{border:0}
  6. *{margin:0px; padding:0px;}
  7. .kL{width:50%;float:left}
  8. .kR{width:50%;float:right;text-align:right}
  9. #sF {width:964px;margin:0px auto;}
  10. #k0 {width:100%;overflow:hidden;clear:both;}
  11. #k12 {width:944px;overflow:hidden;margin:0px 0px; padding-bottom:10px;}
  12. #k1 {width:630px;float:left; padding-bottom:10px;}
  13. #k2 {width:300px;float:right;margin:0px;padding-bottom:10px;}
  14. #k1 #rel {width:200px;margin:0px 15px 0px 0px;float:left; border: 1px solid #ccc; border-top: none;}
  15. #sWbgNew { height: 16px; padding: 4px 0 0; overflow: hidden; zoom: 1; }
[HTML] pobierz, plaintext

Jest tam jeszcze troszkę zbędnego kodu, ale z pewnością teraz wyjdzie ci to co chcesz zrobić.
piasekps
11.05.2007, 13:11:29
ok sorki za zawracanie tylka, okazalo sie ze problem tkwil zupelnie w czyms innym,
a swoja droga zajrzalem do ich zrodla, ale nadal mi nie wychodzilo, wiec postanowilem
zapytac,
ale dzieki za pomoc winksmiley.jpg

pozdrawiam P.S.
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.