Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][CSS] Problem z <section>
Forum PHP.pl > Forum > Po stronie przeglądarki
Quickfire
24.10.2012, 16:48:04
Witam,
Zacząłem się bawić html 5 ale niestety napotkałem problem kombinuję ale nie mogę go przeskoczyć.
problem wygląda następująca w sekcji <section> nie daje mi tła na całej wielkości sekcji sad.gif
Pod spodem kod.
Z góry dzięki za pomoc smile.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.   <head>
  4.     <title>Maszyna Turinga</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="Description" content="Maszyna Turinga jest prostym urządzeniem algorytmicznym, uderzająco prymitywnym w porównaniu z dzisiejszymi komputerami ">
  7.     <meta name="Keywords" content="Maszyna Turinga">
  8.     <meta name="Author" content="Zdzierak Piotr">
  9.     <meta name="Robots" content="all">
  10.     <link rel="stylesheet" href="styles.css">
  11.   </head>
  12.   <body>
  13.    <header>
  14.    <img src="img/header.jpg" style="margin: 10px 0px 10px 10px ;" alt="">
  15.    </header>
  16.    <section>
  17.    <nav>
  18.     <ul id="menu_l">
  19.     <li>Menu:</li>
  20.     <li><a href="#">Wstęp teoretyczny</a></li>
  21.     <li><a href="#">Przykładowe programy</a></li>
  22.     <li><a href="#">Sym maszyny Turinga </a></li>
  23.     <li><a href="#">Tematy projektów </a></li>
  24.     <li><a href="#">Listy od czytelników </a></li>
  25.     </ul>
  26.    </nav>
  27.  
  28.    <article>
  29. Maszyna Turinga - stworzony przez Alana Turinga abstrakcyjny model komputera służącego do wykonywania algorytmów, składającego się z nieskończenie długiej taśmy podzielonej na pola.
  30. Taśma może być nieskończona jednostronnie lub obustronnie. Każde pole może znajdować się w jednym z N stanów. Maszyna zawsze jest ustawiona nad jednym z pól i znajduje się w jednym z M stanów.
  31. Zależnie od kombinacji stanu maszyny i pola maszyna zapisuje nową wartość w polu, zmienia stan, a następnie może przesunąć się o jedno pole w prawo lub w lewo. Taka operacja nazywana jest rozkazem.
  32. Maszyna Turinga jest sterowana listą zawierającą dowolną liczbę takich rozkazów. Liczby N i M mogą być dowolne, byle skończone. Czasem dopuszcza się też stan M+1, który oznacza zakończenie pracy maszyny.
  33. Lista rozkazów dla maszyny Turinga może być traktowana jako jej program.
  34. Maszyna Turinga - stworzony przez Alana Turinga abstrakcyjny model komputera służącego do wykonywania algorytmów, składającego się z nieskończenie długiej taśmy podzielonej na pola.
  35. Taśma może być nieskończona jednostronnie lub obustronnie. Każde pole może znajdować się w jednym z N stanów. Maszyna zawsze jest ustawiona nad jednym z pól i znajduje się w jednym z M stanów.
  36. Zależnie od kombinacji stanu maszyny i pola maszyna zapisuje nową wartość w polu, zmienia stan, a następnie może przesunąć się o jedno pole w prawo lub w lewo. Taka operacja nazywana jest rozkazem.
  37. Maszyna Turinga jest sterowana listą zawierającą dowolną liczbę takich rozkazów. Liczby N i M mogą być dowolne, byle skończone. Czasem dopuszcza się też stan M+1, który oznacza zakończenie pracy maszyny.
  38. Lista rozkazów dla maszyny Turinga może być traktowana jako jej program.
  39. Maszyna Turinga - stworzony przez Alana Turinga abstrakcyjny model komputera służącego do wykonywania algorytmów, składającego się z nieskończenie długiej taśmy podzielonej na pola.
  40. Taśma może być nieskończona jednostronnie lub obustronnie. Każde pole może znajdować się w jednym z N stanów. Maszyna zawsze jest ustawiona nad jednym z pól i znajduje się w jednym z M stanów.
  41. Zależnie od kombinacji stanu maszyny i pola maszyna zapisuje nową wartość w polu, zmienia stan, a następnie może przesunąć się o jedno pole w prawo lub w lewo. Taka operacja nazywana jest rozkazem.
  42. Maszyna Turinga jest sterowana listą zawierającą dowolną liczbę takich rozkazów. Liczby N i M mogą być dowolne, byle skończone. Czasem dopuszcza się też stan M+1, który oznacza zakończenie pracy maszyny.
  43. Lista rozkazów dla maszyny Turinga może być traktowana jako jej program.
  44. Maszyna Turinga - stworzony przez Alana Turinga abstrakcyjny model komputera służącego do wykonywania algorytmów, składającego się z nieskończenie długiej taśmy podzielonej na pola.
  45. Taśma może być nieskończona jednostronnie lub obustronnie. Każde pole może znajdować się w jednym z N stanów. Maszyna zawsze jest ustawiona nad jednym z pól i znajduje się w jednym z M stanów.
  46. Zależnie od kombinacji stanu maszyny i pola maszyna zapisuje nową wartość w polu, zmienia stan, a następnie może przesunąć się o jedno pole w prawo lub w lewo. Taka operacja nazywana jest rozkazem.
  47. Maszyna Turinga jest sterowana listą zawierającą dowolną liczbę takich rozkazów. Liczby N i M mogą być dowolne, byle skończone. Czasem dopuszcza się też stan M+1, który oznacza zakończenie pracy maszyny.
  48. Lista rozkazów dla maszyny Turinga może być traktowana jako jej program.
  49. Maszyna Turinga - stworzony przez Alana Turinga abstrakcyjny model komputera służącego do wykonywania algorytmów, składającego się z nieskończenie długiej taśmy podzielonej na pola.
  50. Taśma może być nieskończona jednostronnie lub obustronnie. Każde pole może znajdować się w jednym z N stanów. Maszyna zawsze jest ustawiona nad jednym z pól i znajduje się w jednym z M stanów.
  51. Zależnie od kombinacji stanu maszyny i pola maszyna zapisuje nową wartość w polu, zmienia stan, a następnie może przesunąć się o jedno pole w prawo lub w lewo. Taka operacja nazywana jest rozkazem.
  52. Maszyna Turinga jest sterowana listą zawierającą dowolną liczbę takich rozkazów. Liczby N i M mogą być dowolne, byle skończone. Czasem dopuszcza się też stan M+1, który oznacza zakończenie pracy maszyny.
  53. Lista rozkazów dla maszyny Turinga może być traktowana jako jej program.
  54.  
  55.    </article>
  56.    </section>
  57.    <footer>
  58.      <a id="wyk">Wykonał:</a>
  59.    </footer>
  60.   </body>
  61. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. @charset "UTF-8";
  2. body
  3. {
  4.     width: 810px;
  5.     margin: 0px auto;
  6.     padding: 0px;
  7.     background-color: #000;
  8.     background-image: url("http://dither.eu/media/img/back.jpg");
  9.     background-repeat: no-repeat;
  10.     background-position:top;
  11. }
  12.  
  13. body > header
  14. {
  15.     width: 810px;
  16.     background-color: #fff;
  17.      -webkit-border-top-left-radius:10px;
  18.      -webkit-border-top-right-radius:10px;
  19.     margin: 150px 0px 0px 0px ;
  20.     padding: 0px 0px 0px 0px;
  21. }
  22.  
  23. body > section {
  24.       display: block;
  25. 	    background-color:#fff;
  26.       min-height:200px;
  27.       height: 100%;
  28.       margin: 0px 0px 0px 0px ;
  29.       padding: 0px 0px 0px 0px;
  30. }
  31.  
  32. body > section > nav
  33. {
  34.     float: left;
  35.     width: 190px;
  36.     background-color: #fff;
  37.     margin: 0px 0px 0px 0px;
  38.     padding: 0px;
  39. }
  40.  
  41. body > section > article
  42. {
  43.     float: right;
  44.     width: 600px;
  45.     background-color: #fff;
  46.     font: arial;
  47.     text-align: justify;
  48.     margin: 0px 10px 0px 0px;
  49.     padding: 0px 0px 0px 0px;
  50. }
  51.  
  52. body > footer
  53. {
  54.     width: 810px;
  55.     height: 100%;
  56.     clear: both;
  57.     background-color: #fff;
  58.      -webkit-border-bottom-left-radius:10px;
  59.      -webkit-border-bottom-right-radius:10px;
  60.     border-top: 2px solid gray;
  61.     margin: 0px 0px 0px 0px;
  62.     padding: px 0px 0px 0px;
  63. }
  64.  
  65. body > footer > #wyk
  66. {
  67. font-size: 11px;
  68. margin: 0px 0px 0px 650px;
  69. }
  70.  
  71. body > section > nav > #menu_l {
  72. 	background-color: #ddd;
  73.   -webkit-border-radius:10px;
  74. 	border: 0px 0;
  75. 	padding: 5px 0px 5px 0px ;
  76. 	margin: 0px 0px 0px 2px;
  77. }
  78.  
  79. body > section > nav > #menu_l li {
  80. 	color: #666;
  81. 	font:Arial, sans-serif;
  82. 	display: block;
  83. 	border-left: 0px solid gray;
  84. 	padding: 0 4px;
  85. }
  86.  
  87. body > section > nav > #menu_l a {
  88.   display: block;
  89.   width: 180px;
  90.   height: 20px;
  91.   background-color: #ddd;
  92. 	color: #666;
  93. 	font:Arial, sans-serif;
  94. 	text-decoration: none;
  95.   padding: 0px 0px 0px 0px ;
  96. 	margin: 0px 10px 0px 0px;
  97. }
  98.  
  99. body > section > nav > #menu_l a:hover {
  100.   display: block;
  101.   width: 180px;
  102.   height: 20px;
  103.   background-color: green;
  104. 	color: #333;
  105. }
[HTML] pobierz, plaintext
Damonsson
24.10.2012, 17:12:58 
[CSS] pobierz, plaintext 
  1. @charset "UTF-8";
  2.  
  3. html, body
  4.  
  5. {
  6.  
  7.     width: 810px;
  8.  
  9.     height: 100%;
  10.  
  11.     margin: 0px auto;
  12.  
  13.     padding: 0px;
  14.  
  15.     background-color: #000;
  16.  
  17.     background-image: url("http://dither.eu/media/img/back.jpg");
  18.  
  19.     background-repeat: no-repeat;
  20.  
  21.     background-position:top;
  22.  
  23. }
  24.  
  25.  
  26.  
  27. body > header
  28.  
  29. {
  30.  
  31.     width: 810px;
  32.  
  33.     background-color: #fff;
  34.  
  35.      -webkit-border-top-left-radius:10px;
  36.  
  37.      -webkit-border-top-right-radius:10px;
  38.  
  39.     margin: 150px 0px 0px 0px ;
  40.  
  41.     padding: 0px 0px 0px 0px;
  42.  
  43. }
  44.  
  45.  
  46.  
  47. body > section {
  48.  
  49.       display: block;
  50.  
  51.         background-color:#fff;
  52.  
  53.       overflow: hidden;
  54.  
  55.       margin: 0px 0px 0px 0px ;
  56.  
  57.       padding: 0px 0px 0px 0px;
  58.  
  59. }
  60.  
  61.  
  62.  
  63. body > section > nav
  64.  
  65. {
  66.  
  67.     float: left;
  68.  
  69.     width: 190px;
  70.  
  71.     background-color: #fff;
  72.  
  73.     margin: 0px 0px 0px 0px;
  74.  
  75.     padding: 0px;
  76.  
  77. }
  78.  
  79.  
  80.  
  81. body > section > article
  82.  
  83. {
  84.  
  85.     background-color: rgb(255, 255, 255);
  86.     display: block;
  87.     float: right;
  88.     height: 100%;
  89.     margin: 0 10px 0 0;
  90.     overflow: hidden;
  91.     padding: 0;
  92.     text-align: justify;
  93.     width: 600px;
  94.  
  95. }
  96.  
  97.  
  98.  
  99. body > footer
  100.  
  101. {
  102.  
  103.     width: 810px;
  104.  
  105.     clear: both;
  106.  
  107.     background-color: #fff;
  108.  
  109.      -webkit-border-bottom-left-radius:10px;
  110.  
  111.      -webkit-border-bottom-right-radius:10px;
  112.  
  113.     border-top: 2px solid gray;
  114.  
  115.     margin: 0px 0px 0px 0px;
  116.  
  117.     padding: px 0px 0px 0px;
  118.  
  119. }
  120.  
  121.  
  122.  
  123. body > footer > #wyk
  124.  
  125. {
  126.  
  127. font-size: 11px;
  128.  
  129. margin: 0px 0px 0px 650px;
  130.  
  131. }
  132.  
  133.  
  134.  
  135. body > section > nav > #menu_l {
  136.  
  137.     background-color: #ddd;
  138.  
  139.   -webkit-border-radius:10px;
  140.  
  141.     border: 0px 0;
  142.  
  143.     padding: 5px 0px 5px 0px ;
  144.  
  145.     margin: 0px 0px 0px 2px;
  146.  
  147. }
  148.  
  149.  
  150.  
  151. body > section > nav > #menu_l li {
  152.  
  153.     color: #666;
  154.  
  155.     font:Arial, sans-serif;
  156.  
  157.     display: block;
  158.  
  159.     border-left: 0px solid gray;
  160.  
  161.     padding: 0 4px;
  162.  
  163. }
  164.  
  165.  
  166.  
  167. body > section > nav > #menu_l a {
  168.  
  169.   display: block;
  170.  
  171.   width: 180px;
  172.  
  173.   height: 20px;
  174.  
  175.   background-color: #ddd;
  176.  
  177.     color: #666;
  178.  
  179.     font:Arial, sans-serif;
  180.  
  181.     text-decoration: none;
  182.  
  183.   padding: 0px 0px 0px 0px ;
  184.  
  185.     margin: 0px 10px 0px 0px;
  186.  
  187. }
  188.  
  189.  
  190.  
  191. body > section > nav > #menu_l a:hover {
  192.  
  193.   display: block;
  194.  
  195.   width: 180px;
  196.  
  197.   height: 20px;
  198.  
  199.   background-color: green;
  200.  
  201.     color: #333;
  202.  
  203. }
[CSS] pobierz, plaintext


Trochę, źle to wszystko robisz, ale z czasem dojdziesz do wprawy pewnie smile.gif
Quickfire
24.10.2012, 19:09:49
Z czym źle questionmark.gif można szczegóły questionmark.gifsmile.gif
Damonsson
24.10.2012, 20:44:01
Chodziło mi o to jak kombinowałeś żeby działało, próbowałeś z min-height itd. a to tak nie działa, nie używałeś overflow: hidden, co się przydaję do tego, żeby kontener rozszerzał się tak jak elementy w nim.

O pisaniu w CSS za każdym razem "BODY > ..." też mi nic nie wiadomo, ale może coś przegapiłem tongue.gif

Tak samo jeśli dajesz #menu_l to samo id wystarczy.

margin: 0px 0px 0px 0px; = margin: 0;

Zamiast wpisywać padding: 0, do każdego elementu poczytaj o reset css.
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.