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
 
 Start new topic
Odpowiedzi (1 - 2)
axxxon
post
Post #2





Grupa: Zarejestrowani
Postów: 47
Pomógł: 1
Dołączył: 28.10.2010

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

polecam wykorzystać atrybut float, lub overflow. tez miałem problemy z word-wrap, czasami to zalezalo od dnia...
Go to the top of the page
+Quote Post
Lord_JABA
post
Post #3





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

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

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.
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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