Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Broblem z word-wrap:break-word i linkami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Lord_JABA
11.02.2011, 22:17:29
mam taki html:
[HTML] pobierz, plaintext 
  1. <div class="small_border_tl"><div class="small_border_br">		 	
  2. 			<span class="small_border_content">
  3.  
  4. <a href="http://www.stumbleupon.com/to/3Y0oTa/en.wikipedia.org/wiki/Ant_mill/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/462/46110462.jpg"/></a><br/>
  5. <a href="http://www.stumbleupon.com/url/en.wikipedia.org/wiki/Ant_mill">14 reviews</a>
  6. 			</span>												
  7. 				<span class="small_border_title" >
  8. 		 		<a href="http://www.stumbleupon.com/to/3Y0oTa/en.wikipedia.org/wiki/Ant_mill/src:favorites" target="_blank">Ant mill - Wikipedia, the free encyclopedia</a>				</span>
  9. 			<div class="stopoverlap"></div> 
  10. </div> </div>
  11.  
  12.  
  13.  
  14. <div class="small_border_tl"><div class="small_border_br">		 	
  15. 			<span class="small_border_content">
  16.  
  17. <a href="http://www.stumbleupon.com/to/9tWLD9/www.catswhocode.com/blog/15-sites-web-developers-and-designers-should-know/src:favorites"><img src="http://cdn.stumble-upon.com/altmthumb/586/35196586.jpg"/></a><br/>
  18. <a href="http://www.stumbleupon.com/url/www.catswhocode.com/blog/15-sites-web-developers-and-designers-should-know">54 reviews</a>
  19. 			</span>												
  20. 				<span class="small_border_title" >
  21. 		 		<a href="http://www.stumbleupon.com/to/9tWLD9/www.catswhocode.com/blog/15-sites-web-developers-and-designers-should-know/src:favorites" target="_blank"> 15 sites web developers and designers should know - CatsWhoCode.com</a>				</span>
  22. 			<div class="stopoverlap"></div> 
  23. </div> </div>
  24.  
  25.  
  26.  
  27. <div class="small_border_tl"><div class="small_border_br">		 	
  28. 			<span class="small_border_content">
  29.  
  30. <a href="http://www.stumbleupon.com/to/1aC3HI/chromeos.hexxeh.net/src:favorites"><img src="http://cdn.stumble-upon.com/altmthumb/92/41147092.jpg"/></a><br/>
  31. <a href="http://www.stumbleupon.com/url/chromeos.hexxeh.net/">14 reviews</a>
  32. 			</span>												
  33. 				<span class="small_border_title" >
  34. 		 		<a href="http://www.stumbleupon.com/to/1aC3HI/chromeos.hexxeh.net/src:favorites" target="_blank">Chromium OS builds by Hexxeh</a>				</span>
  35. 			<div class="stopoverlap"></div> 
  36. </div> </div>
  37.  
  38.  
  39.  
  40. <div class="small_border_tl"><div class="small_border_br">		 	
  41. 			<span class="small_border_content">
  42.  
  43. <a href="http://www.stumbleupon.com/to/2JeOIn/www.cuded.com/2011/02/typography-by-theo-aartsma/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/484/64323484.jpg"/></a><br/>
  44. <a href="http://www.stumbleupon.com/url/www.cuded.com/2011/02/typography-by-theo-aartsma/">0 reviews</a>
  45. 			</span>												
  46. 				<span class="small_border_title" >
  47. 		 		<a href="http://www.stumbleupon.com/to/2JeOIn/www.cuded.com/2011/02/typography-by-theo-aartsma/src:favorites" target="_blank">Typography by Theo Aartsma | Cuded</a>				</span>
  48. 			<div class="stopoverlap"></div> 
  49. </div> </div>
  50.  
  51.  
  52.  
  53. <div class="small_border_tl"><div class="small_border_br">		 	
  54. 			<span class="small_border_content">
  55.  
  56. <a href="http://www.stumbleupon.com/to/2wbOmo/www.youtube.com/watch?v=Xp7BP00LuA4/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/327/44557327.jpg"/></a><br/>
  57. <a href="http://www.stumbleupon.com/url/www.youtube.com/watch%253Fv%253DXp7BP00LuA4">24 reviews</a>
  58. 			</span>												
  59. 				<span class="small_border_title" >
  60. 		 		<a href="http://www.stumbleupon.com/to/2wbOmo/www.youtube.com/watch?v=Xp7BP00LuA4/src:favorites" target="_blank">Autodesk University - Zebra Imagings mind-blowing holographic sheets</a>				</span>
  61. 			<div class="stopoverlap"></div> 
  62. </div> </div>
  63.  
  64.  
  65.  
  66. <div class="small_border_tl"><div class="small_border_br">		 	
  67. 			<span class="small_border_content">
  68.  
  69. <a href="http://www.stumbleupon.com/to/8luCRV/channel.nationalgeographic.com/channel/videos/satellite/satelliteEmbedPlayer.swf?videoRef=08740_00/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/316/55848316.jpg"/></a><br/>
  70. <a href="http://www.stumbleupon.com/url/channel.nationalgeographic.com/channel/videos/satellite/satelliteEmbedPlayer.swf%253FvideoRef%253D08740_00">23 reviews</a>
  71. 			</span>												
  72. 				<span class="small_border_title" >
  73. 		 		<a href="http://www.stumbleupon.com/to/8luCRV/channel.nationalgeographic.com/channel/videos/satellite/satelliteEmbedPlayer.swf?videoRef=08740_00/src:favorites" target="_blank">http://channel.nationalgeographic.com/channel/videos/satellite/satelliteEmbedPlayer.swf?videoRef=08740_00</a>				</span>
  74. 			<div class="stopoverlap"></div> 
  75. </div> </div>
  76.  
  77.  
  78.  
  79. <div class="small_border_tl"><div class="small_border_br">		 	
  80. 			<span class="small_border_content">
  81.  
  82. <a href="http://www.stumbleupon.com/to/A6psjr/lifehacker.com/software/windows/find-out-if-your-computer-is-secretly-connecting-to-the-web-302636.php/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/862/14010862.jpg"/></a><br/>
  83. <a href="http://www.stumbleupon.com/url/lifehacker.com/software/windows/find-out-if-your-computer-is-secretly-connecting-to-the-web-302636.php">27 reviews</a>
  84. 			</span>												
  85. 				<span class="small_border_title" >
  86. 		 		<a href="http://www.stumbleupon.com/to/A6psjr/lifehacker.com/software/windows/find-out-if-your-computer-is-secretly-connecting-to-the-web-302636.php/src:favorites" target="_blank">Lifehacker, tips and downloads for getting things done</a>				</span>
  87. 			<div class="stopoverlap"></div> 
  88. </div> </div>
  89.  
  90.  
  91.  
  92. <div class="small_border_tl"><div class="small_border_br">		 	
  93. 			<span class="small_border_content">
  94.  
  95. <a href="http://www.stumbleupon.com/to/1dsRER/technet.microsoft.com/en-us/library/bb457078.aspx/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/489/12203489.jpg"/></a><br/>
  96. <a href="http://www.stumbleupon.com/url/technet.microsoft.com/en-us/library/bb457078.aspx">10 reviews</a>
  97. 			</span>												
  98. 				<span class="small_border_title" >
  99. 		 		<a href="http://www.stumbleupon.com/to/1dsRER/technet.microsoft.com/en-us/library/bb457078.aspx/src:favorites" target="_blank"> Preserving OEM Pre-Activation when Re-installing Windows XP</a>				</span>
  100. 			<div class="stopoverlap"></div> 
  101. </div> </div>
  102.  
  103.  
  104.  
  105. <div class="small_border_tl"><div class="small_border_br">		 	
  106. 			<span class="small_border_content">
  107.  
  108. <a href="http://www.stumbleupon.com/to/19eijD/www.million-dollar-pc.com/systems-2009/murderbox/008/murderbox.htm/src:favorites"><img src="http://cdn.stumble-upon.com/altmthumb/235/35700235.jpg"/></a><br/>
  109. <a href="http://www.stumbleupon.com/url/www.million-dollar-pc.com/systems-2009/murderbox/008/murderbox.htm">31 reviews</a>
  110. 			</span>												
  111. 				<span class="small_border_title" >
  112. 		 		<a href="http://www.stumbleupon.com/to/19eijD/www.million-dollar-pc.com/systems-2009/murderbox/008/murderbox.htm/src:favorites" target="_blank">MDPC 032 | murderbox 008 by Charles Harwood</a>				</span>
  113. 			<div class="stopoverlap"></div> 
  114. </div> </div>
  115.  
  116.  
  117.  
  118. <div class="small_border_tl"><div class="small_border_br">		 	
  119. 			<span class="small_border_content">
  120.  
  121. <a href="http://www.stumbleupon.com/to/2B0RRp/asset.soup.io/asset/1177/1797_9350_450.jpeg/src:favorites"><img src="http://cdn.stumble-upon.com/mthumb/729/57928729.jpg"/></a><br/>
  122. <a href="http://www.stumbleupon.com/url/asset.soup.io/asset/1177/1797_9350_450.jpeg">118 reviews</a>
  123. 			</span>												
  124. 				<span class="small_border_title" >
  125. 		 		<a href="http://www.stumbleupon.com/to/2B0RRp/asset.soup.io/asset/1177/1797_9350_450.jpeg/src:favorites" target="_blank">http://asset.soup.io/asset/1177/1797_9350_450.jpeg</a>				</span>
  126. 			<div class="stopoverlap"></div> 
  127. </div> </div>
  128.  
  129. </div>
  130.  
[HTML] pobierz, plaintext


I taki css do tego

[HTML] pobierz, plaintext 
  1. div.small_border_tl{
  2. 	background: url(../img/tl_main2.png) 0 0 no-repeat;
  3. 	position:relative;
  4. 	display:block;
  5. 	margin-top:20px;
  6. 	width:300px;
  7. 	margin-left:10px;
  8. 	float:left;
  9. }
  10.  
  11.  
  12.  
  13. div.small_border_br {
  14. 	background: url(../img/small_br.png) 100% 100% no-repeat;
  15. 	position:relative;
  16. 	padding-top:20px;
  17. 	padding-left:20px;
  18. 	padding-right:10px;
  19. 	word-wrap: break-word;
  20. }
  21.  
  22. div.small_border_br  div *{
  23. 	background:none;
  24. 	word-wrap: break-word;
  25. }
  26. span.small_border_title{
  27. display:block;
  28. word-wrap: break-word;
  29. }
  30. span.small_border_title a{
  31. font-weight:bold; 
  32. color:#3EBCEF;
  33. width:120px;
  34. max-width:120px;
  35. word-wrap: break-word;
  36. }
  37.  
  38. span.small_border_content{
  39. 	height:120px;
  40. 	max-height:120px;
  41. 	background:none;
  42. 	position:relative;
  43. 	float:left;
  44. 	z-index: -1;
  45. }
  46.  
  47. span.small_border_content img{
  48. border:none;
  49. margin-right: 5px;
  50. }
  51. span.small_border_content a{
  52. font-weight:bold; 
  53. color:#3EBCEF;
  54. }
[HTML] pobierz, plaintext

Pierwsze pytanie: dlaczego linki się nie łamią i co zrobić żeby się łamały?
Drugie: dlaczego gdy dopiszę 
[HTML] pobierz, plaintext 
  1. span.small_border_title{
  2. display:block;
  3. width:120px;
  4. max-width:120px;
  5. word-wrap: break-word;
  6. }
[HTML] pobierz, plaintext
to title wyświetla się pod content a nie obok?
axxxon
16.02.2011, 14:58:17
polecam wykorzystać atrybut float, lub overflow. tez miałem problemy z word-wrap, czasami to zalezalo od dnia...
Lord_JABA
17.02.2011, 16:03:55
Człowieku jesteś wielki.
Zrobiłeś mi za protezę oczu. Jakoś do mnie nie docierało że title nie ma ustawionego float.
Czuję się jakbym dwa tygodnie próbował to poprawić nie zauważając wieloryba leżącego na klawiaturze.
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.