Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Broblem z word-wrap:break-word i linkami, co bym nie robił word-wrap jest ignorowany
Lord_JABA
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 27.06.2007

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post

Posty w temacie
- Lord_JABA   Broblem z word-wrap:break-word i linkami   11.02.2011, 22:17:29
- - axxxon   polecam wykorzystać atrybut float, lub overflow. t...   16.02.2011, 14:58:17
- - Lord_JABA   Człowieku jesteś wielki. Zrobiłeś mi za protezę o...   17.02.2011, 16:03:55

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 09:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn