Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]HTML5 - przeskakujący element
Forum PHP.pl > Forum > Przedszkole
patryk9200
23.10.2011, 18:07:52
Witam,

Od 2 dni męczę się z problemem w HTML5.
Mianowicie stworzyłem małą stronkę w której obok siebie są po 3 kwadraty na rząd.
Problem w tym, że jeśli wypełnię jakikolwiek kwadrat, to on w tedy przesuwa się w dół.
Co jest przyczyną?
Kod HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <meta charset="utf-8">
  4. <meta name="Author" content="">
  5. <link rel="Stylesheet" href="css/style.css">
  6. <script src="js/view.js"></script>
  7. <body>
  8. <section class="wrapper">
  9. <nav class="top"><a href="java script:ScrollTo('glowna');" >Strona główna</a> <a href="java script:ScrollTo('kontakt');">Kontakt</a>  <a href="java script:ScrollTo('cennik');">cennik</a> <a href="java script:ScrollTo('nasze_projekty');">Nasze projekty</a></nav>
  10. <section id="data-wrapper" class="data-wrapper">
  11.     <section class="article-wrapper" id="glowna">
  12.         <article class="article">   
  13.         </article>
  14.     </section>
  15.     <section class="article-wrapper" id="cennik">
  16.         <article class="article">test
  17.         </article>
  18.     </section>
  19.     <section class="article-wrapper">
  20.         <article class="article">
  21.         </article>
  22.     </section>
  23. </section>
  24. <section class="data-wrapper">
  25.     <section class="article-wrapper">
  26.         <article class="article"></article>
  27.     </section>
  28.     <section class="article-wrapper">
  29.  
  30.         <article class="article"></article>
  31.     </section>
  32.     <section class="article-wrapper">
  33.         <article class="article"><time></time></article>
  34.     </section>
  35. </section>
  36. <section class="data-wrapper">
  37.     <section class="article-wrapper">
  38.         <article class="article"></article>
  39.     </section>
  40.     <section class="article-wrapper">
  41.         <article class="article"></article>
  42.     </section>
  43.     <section class="article-wrapper" id="kontakt">
  44.         <article class="article"><time></time></article>
  45.     </section>
  46. </section>    
  47. <footer></footer>
  48. </body>
  49. </div>
  50. </html>
[HTML] pobierz, plaintext

i CSS:
[HTML] pobierz, plaintext 
  1. .top {
  2.  position: fixed;
  3.  margin-left: 70px;
  4.  margin-top: -8px;
  5. }
  6. .top a {
  7.     font-size: 30px;
  8. color: silver;
  9. font-family: "Impact", Verdana, sans-serif;
  10.  text-decoration: none;
  11.  margin-right: 20px;
  12. }
  13. .top a:hover {
  14.     font-size: 30px;
  15. color: gray;
  16. font-family: "Impact", Verdana, sans-serif;
  17.  text-decoration: none;
  18.  margin-right: 20px;
  19. }
  20. html {
  21.     margin:  0px;
  22. }
  23. .data-wrapper {
  24.     width: 3000px;
  25.     height: 100%;   
  26. }
  27. .article-wrapper {
  28.     width: 880px;
  29.     height: 500px;
  30.     margin-left:  40px; 
  31.     margin-top:  40px;
  32.     /*border: solid 1px black;*/
  33.     display:inline-block;
  34. }
  35. .article {
  36.         width: 860px;
  37.     height: 480px;
  38.     padding: 10px;
  39. }
  40. footer {
  41.     height: 100px;
  42.     width: 100%;
  43. }
[HTML] pobierz, plaintext
Korab
23.10.2011, 21:03:28
Wrzuciłbyś jeszcze JS?
croc
23.10.2011, 21:14:19
A jakbyś dla .article-wrapper dał float: left zamiast display:inline-block?
patryk9200
23.10.2011, 21:53:48
JavaScript nie ma z tym nic wspólnego, bez JS się dzieje to samo.
Ok, już działa, faktycznie, float: left jest rozwiązaniem, dzięki!
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.