Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Problem ze zbyt długim divem
AboutMe
post
Post #1





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 24.02.2008

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

Witam,

Czy ktoś wie dlaczego pierwszy post zawsze się rozszerza do długości sidebara?



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2.         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6.  
  7.  
  8. <style>
  9.  
  10. body { 
  11.     margin:0;
  12.     padding:0; 
  13.     background: black; 
  14.     width: 100%;
  15. }
  16.  
  17.  
  18. #general {
  19.     width: 1300px; height: auto;
  20. }
  21. #sidebar {
  22.     padding: 10px 10px 0px 0px;
  23.     float: left;
  24.     width: 180px;
  25. }
  26.  
  27. .sidebar-box {
  28.     margin-top: 20px;
  29.     margin-left: 0px;
  30.     padding: 0px 0px 20px 0px;
  31.     width: 160px; height: auto;
  32.     border: 1px solid #626262;
  33.     font: 11pt Verdana, Arial, sans-serif;
  34.     color: #c3c3c3;
  35.     background: black;
  36.     background-repeat: repeat-y;
  37. }
  38.  
  39. .sidebar-box li {
  40. margin-left: 10px; 
  41. margin-top: 5px; 
  42. }
  43.  
  44. .sidebar-box-title {
  45.     border-bottom: 1px solid #626262;
  46.     padding: 0px 0px 5px 10px;
  47. }
  48.  
  49. #content {
  50.     width: 660px;
  51.     margin-top: 20px;
  52.     margin-left: 200px;
  53.     padding: 10px 10px 10px 10px;
  54.     font: 9pt Verdana, Arial, sans-serif;
  55.     color: #c3c3c3;
  56. }
  57.  
  58. .post {
  59.     width: 670px;
  60.     margin-top: 23px;
  61.     padding: 10px 10px 10px 10px;
  62.     background: black; 
  63.     text-align: justify;
  64.     border: 1px solid #626262;
  65. }
  66.  
  67.  
  68.  
  69. .clear {
  70. clear: both;
  71. }
  72.  
  73.  
  74. .post-title{
  75.     font: 22pt Verdana, Arial, sans-serif;
  76. }
  77.  
  78. .text {
  79.     width: 540px;
  80.     float: left;
  81.     padding: 10px 3px 10px 0px;
  82. }
  83.  
  84. .more-link {
  85.     font: 16pt Verdana, Arial, sans-serif;
  86.     padding: 15px;
  87.     margin-top: 20px;
  88. }
  89.  
  90. .info {
  91.     width: 100px;
  92.     float: right;
  93.     font: 7pt Verdana, Arial, sans-serif;
  94.     text-align: left;
  95.     border-left: 1px dotted #626262;
  96.     padding: 15px 3px 10px 10px;
  97. }
  98.  
  99.  
  100. .date {
  101.     font: 9pt Arial, Verdana, sans-serif;
  102.     color: white;
  103. }
  104.  
  105. .time {
  106. font-size: 15pt;
  107. color: white;
  108. }
  109.  
  110.  
  111. </style>
  112.  
  113.  
  114. </head>
  115. <body>
  116.  
  117.  
  118.  
  119. <div id="general">
  120.  
  121. <div id="sidebar">
  122.  
  123. <div class="sidebar-box">
  124.  
  125. <div class="sidebar-box-title"><h3>Categories</h3></div><!--categories ends-->
  126.  
  127.  
  128. 	<li class="cat-item cat-item-23"><a href="23" title="View all posts filed under ac">ac</a> (3)
  129. </li>
  130. 	<li class="cat-item cat-item-3"><a href="3" title="View all posts filed under Aenean">Aenean</a> (4)
  131.  
  132. </li>
  133. 	<li class="cat-item cat-item-28"><a href="28" title="View all posts filed under aliquam">aliquam</a> (3)
  134. </li>
  135. 	<li class="cat-item cat-item-24"><a href="24" title="View all posts filed under ante">ante</a> (2)
  136. </li>
  137. 	<li class="cat-item cat-item-4"><a href="4" title="View all posts filed under Blandit">Blandit</a> (4)
  138. </li>
  139. 	<li class="cat-item cat-item-11"><a href="11" title="View all posts filed under Egestas">Egestas</a> (3)
  140.  
  141. </li>
  142. 	<li class="cat-item cat-item-26"><a href="26" title="View all posts filed under faucibus">faucibus</a> (3)
  143. </li>
  144. 	<li class="cat-item cat-item-7"><a href="7" title="View all posts filed under Imperdiet">Imperdiet</a> (2)
  145. </li>
  146. 	<li class="cat-item cat-item-5"><a href="5" title="View all posts filed under Ligula">Ligula</a> (4)
  147. </li>
  148. 	<li class="cat-item cat-item-30"><a href="30" title="View all posts filed under mattis">mattis</a> (2)
  149.  
  150. </li>
  151. 	<li class="cat-item cat-item-6"><a href="6" title="View all posts filed under Mauris">Mauris</a> (4)
  152. </li>
  153. 	<li class="cat-item cat-item-20"><a href="20" title="View all posts filed under Nam">Nam</a> (2)
  154. </li>
  155. 	<li class="cat-item cat-item-27"><a href="27" title="View all posts filed under nibh">nibh</a> (1)
  156. </li>
  157. 	<li class="cat-item cat-item-25"><a href="25" title="View all posts filed under Pellentesque">Pellentesque</a> (1)
  158.  
  159. </li>
  160.  
  161.  
  162.  
  163. </div><!--sidebar-box ends-->
  164.  
  165.  
  166.  
  167. </div><!--sidebar ends-->
  168.  
  169.  
  170. <div id="content">
  171.  
  172.  
  173.  
  174. <div class="post">
  175. <div class="text">
  176.  
  177. <h2><a href="?p=30" rel="bookmark" title="Fixed link Tristique">Tristique</a></h2>
  178.  
  179.  
  180. <p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. Mauris congue, erat id pellentesque suscipit, nulla libero vulputate ipsum, eu suscipit nibh lorem nec velit. Aenean lacinia tincidunt ultrices. <br />
  181.  <a href="?p=30#more-30" class="more-link">Read more ></a></p>
  182.  
  183. <div style="float:right"><h5><p><a href="?p=30#comments" title="Comment on Tristique">2 Comments ?</a></p></h5></div>
  184. </div><!--text-->
  185.  
  186. <div class="info">
  187. <img src="photo.png" alt="Photo" width="85" height="80" />
  188. <p><h4>Posted by admin</h4>
  189. <h4>April 3rd</h4>
  190.  
  191. <h4>2010</h4>
  192. <span class="time">19:58</span>
  193.  
  194. <h6>Under:<br />
  195. <a href="5" title="View all posts in Ligula" rel="category">Ligula</a><br /> <a href="6" title="View all posts in Mauris" rel="category">Mauris</a><br /> <a href="24" title="View all posts in ante" rel="category">ante</a><br /> <a href="26" title="View all posts in faucibus" rel="category">faucibus</a></h6>
  196. </div><!--info-->
  197.  
  198. <div class="clear">
  199.  
  200.  
  201. </div>
  202.  
  203. </div><!--post-->
  204.  
  205.  
  206.  
  207. <div class="post">
  208. <div class="text">
  209.  
  210. <h2><a href="?p=28" rel="bookmark" title="Fixed link Quisque">Quisque</a></h2>
  211.  
  212.  
  213. <p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. <br />
  214.  <a href="?p=28#more-28" class="more-link">Read more ></a></p>
  215.  
  216. <div style="float:right"><h5><p><a href="?p=28#respond" title="Comment on Quisque">No Comments ?</a></p></h5></div>
  217. </div><!--text-->
  218.  
  219. <div class="info">
  220. <img src="photo.png" alt="Photo" width="85" height="80" />
  221. <p><h4>Posted by admin</h4>
  222. <h4>April 3rd</h4>
  223. <h4>2010</h4>
  224.  
  225. <span class="time">9:57</span>
  226.  
  227. <h6>Under:<br />
  228. <a href="3" title="View all posts in Aenean" rel="category">Aenean</a><br /> <a href="4" title="View all posts in Blandit" rel="category">Blandit</a></h6>
  229. </div><!--info-->
  230.  
  231.  
  232. <div class="clear">
  233.  
  234.  
  235. </div>
  236.  
  237. </div><!--post-->
  238.  
  239.  
  240.  
  241. <div class="post">
  242. <div class="text">
  243.  
  244. <h2><a href="?p=26" rel="bookmark" title="Fixed link Info">Info</a></h2>
  245.  
  246.  
  247. <p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. <br />
  248.  <a href="?p=26#more-26" class="more-link">Read more ></a></p>
  249.  
  250. <div style="float:right"><h5><p><a href="?p=26#respond" title="Comment on Info">No Comments ?</a></p></h5></div>
  251. </div><!--text-->
  252.  
  253. <div class="info">
  254. <img src="photo.png" alt="Photo" width="85" height="80" />
  255. <p><h4>Posted by admin</h4>
  256. <h4>April 3rd</h4>
  257. <h4>2010</h4>
  258. <span class="time">9:57</span>
  259.  
  260. <h6>Under:<br />
  261.  
  262. <a href="11" title="View all posts in Egestas" rel="category">Egestas</a><br /> <a href="6" title="View all posts in Mauris" rel="category">Mauris</a><br /> <a href="23" title="View all posts in ac" rel="category">ac</a><br /> <a href="28" title="View all posts in aliquam" rel="category">aliquam</a></h6>
  263. </div><!--info-->
  264.  
  265.  
  266. <div class="clear">
  267.  
  268.  
  269. </div>
  270.  
  271. </div><!--post-->
  272.  
  273.  
  274.  
  275. <div class="post">
  276. <div class="text">
  277.  
  278. <h2><a href="?p=22" rel="bookmark" title="Fixed link Etiam sodales fringilla">Etiam sodales fringilla</a></h2>
  279.  
  280.  
  281. <p>Integer ligula nisi, condimentum vel vestibulum et, ornare ut enim. Morbi mattis velit purus. Sed ultrices neque in turpis suscipit non malesuada justo ornare.  Proin vel egestas tortor.<br />
  282.  <a href="?p=22#more-22" class="more-link">Read more ></a></p>
  283.  
  284. <div style="float:right"><h5><p><a href="?p=22#respond" title="Comment on Etiam sodales fringilla">No Comments ?</a></p></h5></div>
  285.  
  286. </div><!--text-->
  287.  
  288. <div class="info">
  289. <img src="photo.png" alt="Photo" width="85" height="80" />
  290. <p><h4>Posted by admin</h4>
  291. <h4>April 3rd</h4>
  292. <h4>2010</h4>
  293. <span class="time">7:34</span>
  294.  
  295. <h6>Under:<br />
  296. <a href="4" title="View all posts in Blandit" rel="category">Blandit</a><br /> <a href="20" title="View all posts in Nam" rel="category">Nam</a><br /> <a href="23" title="View all posts in ac" rel="category">ac</a><br /> <a href="28" title="View all posts in aliquam" rel="category">aliquam</a><br /> <a href="26" title="View all posts in faucibus" rel="category">faucibus</a><br /> <a href="30" title="View all posts in mattis" rel="category">mattis</a></h6>
  297.  
  298. </div><!--info-->
  299.  
  300.  
  301. <div class="clear">
  302.  
  303.  
  304. </div>
  305.  
  306. </div><!--post-->
  307.  
  308.  
  309.  
  310. <div style="display:inline">
  311. <h5><div style="float:left"><a href="?paged=2" ><<< Older Entries</a></div>
  312.  
  313. <div style="float:right"></div></h5>
  314. </div>
  315.  
  316.  
  317.  
  318. </div><!--content ends-->
  319.  
  320. <div class="clear">
  321.  
  322.  
  323. </div>
  324. </div>
  325. </div><!--general ends-->
[HTML] pobierz, plaintext


Ten post edytował AboutMe 6.04.2010, 12:55:56
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mortus
post
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Witam. Żeby wszystko było w porządku wcale nie trzeba kombinować, wystarczy zmienić styl div-a o identyfikatorze content na taki:
[CSS] pobierz, plaintext 
  1. #content {
  2.     width: 660px;
  3.     margin-top: 20px;
  4.     padding: 10px 10px 10px 10px;
  5.     font: 9pt Verdana, Arial, sans-serif;
  6.     color: #c3c3c3;
  7.     float: left;
  8. }
[CSS] pobierz, plaintext
Jednak na stronie jest dużo więcej błędów. Wrzuć sobie kod do walidatora XHTML to zobaczysz. Podstawowe to:
1. brak znaczników <title> i </title> w sekcji head,
2. brak znacznika rozpoczynającego i kończącego listę <ul> i </ul>, są natomiast same elementy listy <li> i </li>,
3. umieszczenie akapitów (<p>...</p>) wewnątrz nagłówków (<h5> i </h5>),
4. obejmowanie nagłówków <h4>....</h4> akapitami <p>...</p>,
5. używanie <<< zamiast odpowiednich encji,
6. umieszczenie div-a wewnątrz nagłówka <h5>...</h5>.
Go to the top of the page
+Quote Post

Posty w temacie
- AboutMe   [CSS]Problem ze zbyt długim divem   6.04.2010, 12:55:27
- - Skie   Pokaż lepiej wersje LIVE, bo tak samego tekstu to ...   6.04.2010, 13:08:18
- - AboutMe   Przecież wystarczy pobrać plik rozszerzeniem html ...   6.04.2010, 13:19:40
- - mortus   A w jakiej przeglądarce, bo u mnie jest w porządku...   6.04.2010, 14:14:21
- - hieroshima   Spróbuj dać do diva id sidebar position: absolute;...   6.04.2010, 14:17:56
- - AboutMe   Pod IE działa, tylko z FF i Operą jest problem. A...   6.04.2010, 14:28:30
|- - zegarek84   Cytat(AboutMe @ 7.04.2010, 13:26:22 )...   7.04.2010, 13:25:57
- - hieroshima   co z tego, że jest centrowana? nic sie nie stanie ...   6.04.2010, 14:31:03
- - AboutMe   To zmień rozdzielczość ekranu i zobaczysz czemu.   6.04.2010, 14:39:10
- - krzysztof_kf   Cytat(AboutMe @ 6.04.2010, 13:55:27 )...   6.04.2010, 15:43:38
- - pedro84   1. Kod słabej jakości 2. Po co dajesz pakujesz na...   6.04.2010, 15:59:48
- - AboutMe   Chodzi mi o rozszerzanie w pionie. 1. post rozsze...   7.04.2010, 12:26:22
- - mortus   Witam. Żeby wszystko było w porządku wcale nie trz...   7.04.2010, 15:28:23
- - AboutMe   float: left; dla #content nic nie daje, a przez ab...   11.04.2010, 15:29:29
- - mortus   Cytat(AboutMe @ 11.04.2010, 16:29:29 ...   11.04.2010, 15:33:35

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

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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: 26.12.2025 - 13:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn