Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
Skie
post
Post #2





Grupa: Zarejestrowani
Postów: 555
Pomógł: 84
Dołączył: 20.02.2008
Skąd: Małopolska

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

Pokaż lepiej wersje LIVE, bo tak samego tekstu to mało kto się podejmie przy poprawianiu.


--------------------
Wieloprocesowość i wielowątkowość w PHP, poznaj Kraken PHP!
Serwer HTTP i WebSocket w PHP | Promise/A+
Strona Domowa | Elradia MMORPG
FireFox: make the web better.
Go to the top of the page
+Quote Post
AboutMe
post
Post #3





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

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

Przecież wystarczy pobrać plik rozszerzeniem html i masz live
Go to the top of the page
+Quote Post
mortus
post
Post #4





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

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

A w jakiej przeglądarce, bo u mnie jest w porządku, chociaż jest parę błędów:
1. w każdym div-ie info nie zamykasz znacznika <p>
2. w linii 311 używasz <<<, i to powoduje pewne błędy.
Go to the top of the page
+Quote Post
hieroshima
post
Post #5





Grupa: Zarejestrowani
Postów: 83
Pomógł: 6
Dołączył: 4.04.2010

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

Spróbuj dać do diva id sidebar position: absolute; to będzie wyglądać tak:

#sidebar
{
position: absolute;
padding: 10px 10px 0px 0px;
float: left;
width: 180px;
}
Go to the top of the page
+Quote Post
AboutMe
post
Post #6





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

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

Pod IE działa, tylko z FF i Operą jest problem.

Absolute nie wchodzi w grę bo strona jest centrowana.
Go to the top of the page
+Quote Post
hieroshima
post
Post #7





Grupa: Zarejestrowani
Postów: 83
Pomógł: 6
Dołączył: 4.04.2010

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

co z tego, że jest centrowana? nic sie nie stanie z tym sidebarem sprawdzalem pod IE FF i Opera i bylo ok
Go to the top of the page
+Quote Post
AboutMe
post
Post #8





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

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

To zmień rozdzielczość ekranu i zobaczysz czemu.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #9





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Cytat(AboutMe @ 6.04.2010, 13:55:27 ) *
Witam,

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




Hmm może dodaj jakąś szerokość dla akapitu p np 

[HTML] pobierz, plaintext 
  1.  
  2. .text p {
  3. width: 500px;
[HTML] pobierz, plaintext


jak ma ci się takie coś nie rozszerzać ? bez jakiejś wartości ...
Go to the top of the page
+Quote Post
pedro84
post
Post #10





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

1. Kod słabej jakości
2. Po co dajesz pakujesz nagłówki w divy?
3. #general jest za długi, przy mniejszych rozdzielczościach się wywala.

Co Ci właściwie nie działa?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
AboutMe
post
Post #11





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

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

Chodzi mi o rozszerzanie w pionie.
1. post rozszerza się w pionie do długości sidebara.
Gdy mam w lewym sidebarze więcej elementów to 1. post potrafi być długi na tysiące pixeli.

Podejrzewam że to przez float:left



Co do nagłówków w divach to niestety jak dam span to nie działa
border-bottom: 1px solid #626262;

Ten post edytował AboutMe 7.04.2010, 12:26:48
Go to the top of the page
+Quote Post
zegarek84
post
Post #12





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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

Cytat(AboutMe @ 7.04.2010, 13:26:22 ) *
Podejrzewam że to przez float:left

to nie podejrzewaj tylko zmień/usuń deklarację a przekonasz się, że tak jest...
Cytat(AboutMe @ 6.04.2010, 15:28:30 ) *
Pod IE działa, tylko z FF i Operą jest problem.

Absolute nie wchodzi w grę bo strona jest centrowana.

akurat IE nie mam pod ręką ale centrowania w podanym przykładzie przez Ciebie też nie ma w mozilli i operze bez żadnych dodatkowych deklaracji ;p

po za tym przez absolute też da się centrować - trzeba tylko pomyśleć..

rozwiązanie na zadane pytanie dostałeś
w tym poście - czego w ogóle Ty jeszcze chcesz??


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
mortus
post
Post #13





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
AboutMe
post
Post #14





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

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

float: left; dla #content nic nie daje,
a przez absolute sidebar najeżdża mi na footer, jeśli content jest krótszy od sidebara.

Ten post edytował AboutMe 11.04.2010, 15:29:46
Go to the top of the page
+Quote Post
mortus
post
Post #15





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

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

Cytat(AboutMe @ 11.04.2010, 16:29:29 ) *
float: left; dla #content nic nie daje
A usunąłeś margin-left: 200px;?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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