Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Akapit od nowej linii
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
yatq
4.05.2012, 16:27:09
Witam,

jako że nastała pora nauczyć się w końcu CSS, od razu napotkałem dość uporczywy (jak dla zielonego) problem. przedstawię na poniższym obrazku



Otóż akapit, zamiast zaczynać się pod menu, zaczyna się obok niego. Nie wiem co jest grane, a walczę z tym banałem już dobre 2 godziny.

Kod HTML
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
  5.         <title></title>
  6.         <link href=\"css/style.css\" type=\"text/css\" rel=\"stylesheet\" media=\"screen,projection\" />
  7.     </head>
  8.     <body>
  9.         <div id=\"layout\">
  10.             <div id=\"nav\" class=\"box\">
  11.             <ul>
  12.                 <li><a href=\"#\">Lista 1</a></li>
  13.                 <li><a href=\"#\">Lista 2</a></li>
  14.                 <li><a href=\"#\">Lista 3</a></li>
  15.                 <li><a href=\"#\">Lista 4</a></li>
  16.                 <li><a href=\"#\">Lista 5</a></li>
  17.             </ul>                
  18.             </div>
  19.             <div id=\"container\">
  20.                 <p>Tutaj trzeba coś napisać.</p>
  21.             </div>
  22.         </div>
  23.         <?php
  24.         // put your code here
  25.         ?>
  26.     </body>
  27. </html>
[HTML] pobierz, plaintext

Kod CSS
[CSS] pobierz, plaintext 
  1. * { margin:0; padding:0; }
  2. body { 
  3.   padding: 0 0; 
  4.   background: #771818 url(\'../img/bg.png\') repeat-x; 
  5.   font-family: \"arial\",sans-serif; 
  6.   font-size: 13px;
  7.   line-height:24px;
  8.   color: #e8eaeb; 
  9.   text-align: center;
  10. }
  11.  
  12. #layout { 
  13.   width:790px; 
  14.   margin:0 auto; 
  15.   text-align:left; 
  16. }
  17.  
  18. #nav ul, ul li {
  19. 	display: block;
  20. 	list-style: none;
  21. 	margin: 0;
  22. 	padding: 0;
  23. }
  24.  
  25. #nav ul {
  26. 	position: relative;
  27. }
  28.  
  29. #nav ul li {
  30. 	float: left;
  31. 	border-width: 0 1px 1px 1px;
  32. 	border-style: solid;
  33. 	border-color: black;
  34. }
  35.  
  36. #nav ul a:link, ul a:visited {
  37. 	text-decoration: none;
  38. 	display: block;
  39. 	width: 120px;
  40. 	text-align: center;
  41. 	padding: 5px 0;
  42. 	font-weight: bold;
  43. 	background-color: #c00c30;
  44. 	color: #def;
  45. 	border-top: 10px solid #6f0000;
  46. }
  47.  
  48. #nav ul a:hover {
  49. 	background-color: #28e;
  50. 	color: #fff;
  51. 	border-top: 20px solid #26d;
  52. }
  53.  
  54. #container { 
  55.   padding-top: 12px;
  56.   }
[CSS] pobierz, plaintext
Niktoś
4.05.2012, 16:31:59
Nie wiem, czy o to chodzi, spróbuj:

[CSS] pobierz, plaintext 
  1. #nav ul {
  2.  
  3. position: relative;
  4. clear:right;
  5. }
[CSS] pobierz, plaintext
yatq
4.05.2012, 16:34:21
Cytat(Niktoś @ 4.05.2012, 17:31:59 ) *
Nie wiem, czy o to chodzi, spróbuj:

[CSS] pobierz, plaintext 
  1. #nav ul {
  2.  
  3. position: relative;
  4. clear:right;
  5. }
[CSS] pobierz, plaintext



Niestety, dalej to samo.
Niktoś
4.05.2012, 16:39:02
Może spróbuje jeszcze:
[CSS] pobierz, plaintext 
  1. #container {
  2. padding-top: 12px;
  3. display:block;
  4. }
[CSS] pobierz, plaintext


A masz to gdzieś na żywo umieszczone?Jak tak to podaj linka.
r4xz
4.05.2012, 19:21:10 
[CSS] pobierz, plaintext 
  1. #container { 
  2.     padding-top: 12px;
  3.     clear: both;
  4. }
[CSS] pobierz, plaintext
yatq
5.05.2012, 13:50:04
Cytat(r4xz @ 4.05.2012, 20:21:10 ) *
[CSS] pobierz, plaintext 
  1. #container { 
  2.     padding-top: 12px;
  3.     clear: both;
  4. }
[CSS] pobierz, plaintext


Dzięki, o to chodziło.

Poszło 'pomógł' smile.gif baaasmiley.gif
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.