Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Gdzie jest błąd?
KR2615
post 18.03.2015, 21:22:57
Post #1





Grupa: Zarejestrowani
Postów: 251
Pomógł: 12
Dołączył: 7.05.2007

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


Czy ktoś mógł mi powiedzieć, gdzie leży błąd w tym kodzie, że biała ramka kończy się u góry a nie z końcem strony a tekst lorem ipsum z niej ucieka?



  1. <!DOCTYPE html>
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <link rel="icon" type="image/png" href="images/favicon.ico">
  4.  
  5. <link href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css" />
  6. <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css" />
  7.  
  8. <link href="style.css" rel="stylesheet">
  9. <link href="images/font-awesome.css" rel="stylesheet">
  10. <link href="images/jquery-ui.css" rel="stylesheet">
  11.  
  12. <script type="text/javascript" src="images/jquery.js"></script>
  13. <script type="text/javascript" src="images/jquery-ui.js"></script>
  14. <script type="text/javascript" src="images/scripts.js"></script>
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <div id="main">
  19. <div id="reglogin">
  20. <a href="zaloguj">Zaloguj</a> | <a href="zarejestruj">zarejestruj</a>
  21. </div>
  22. <div id="topbar"><a class="logo" href=""></a>
  23. <span class="slogan"><b>slogan/b></span>
  24. <div class="likeboxcontainer">FB</div>
  25. </div>
  26. <div class="toplinks">
  27. <a href="kat1">Kategoria1</a>
  28. <a href="kat1">Kategoria2</a>
  29. <a href="kat1">Kategoria3</a>
  30. <a href="kat1">Kategoria4</a>
  31. </div>
  32. <div id="glownatresc">
  33. <div id="kollewa">
  34. Lewa slider
  35.  
  36.  
  37. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada, leo et dignissim lobortis, velit erat tincidunt libero, non vestibulum metus est rhoncus ipsum. Aliquam sed rhoncus felis. Etiam aliquet mauris eget varius elementum. Phasellus rutrum tellus ac commodo rhoncus. Duis venenatis feugiat lorem, et condimentum mi semper ac. Integer turpis orci, ultricies id condimentum non, consectetur ut nibh. Suspendisse ac mauris in lacus lacinia ultricies. Aliquam enim justo, tempus ut est ut, dapibus egestas leo. Ut ac eros risus. Praesent lobortis dui sed ligula pharetra, at efficitur ligula elementum. Curabitur eget maximus nisl, at commodo nulla. Donec quam leo, cursus non ultrices tincidunt, rhoncus ac urna. Nulla ac libero a massa pulvinar laoreet. Sed lacus nunc, maximus nec magna at, pellentesque mollis ex. Nam maximus lectus id risus volutpat, sit amet mattis nisi malesuada. Vivamus id sem velit.
  38.  
  39. Nunc vel nisl enim. Praesent nec ante fringilla, fermentum diam eu, scelerisque dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis mauris risus, eget auctor enim euismod at. Pellentesque eget sem gravida, tincidunt ante eu, interdum massa. Donec eu augue in purus faucibus tincidunt sit amet consectetur libero. Aliquam eget tellus sed mi porta varius. Nunc et efficitur lectus. Aliquam ullamcorper, lorem et elementum lobortis, erat purus ultricies turpis, a aliquet metus neque at leo. Proin iaculis lacinia neque tincidunt auctor. Integer feugiat vulputate porttitor.
  40.  
  41. Maecenas non lacus rhoncus, tincidunt sapien vitae, vestibulum nisl. Nam augue sapien, blandit ut molestie a, maximus id tellus. Curabitur interdum libero id blandit efficitur. Maecenas vehicula ultricies auctor. Suspendisse leo est, varius eget porttitor vitae, facilisis sit amet tortor. Aliquam fermentum tempus mi et sollicitudin. Pellentesque viverra nibh eget dolor pretium, vel aliquet arcu porta. Cras vehicula mi ac nisi aliquet, nec aliquam augue pretium. Aenean feugiat, magna nec varius convallis, enim purus pellentesque augue, at sodales magna leo accumsan mi. Vivamus suscipit venenatis aliquet.
  42.  
  43. Cras consectetur lacus eget dolor sodales ullamcorper. Duis faucibus, tortor in imperdiet egestas, eros elit rhoncus eros, id convallis lacus diam a sapien. Pellentesque vehicula quis orci vitae condimentum. Sed maximus sit amet purus vitae dictum. Sed rhoncus, eros non varius aliquet, diam leo sodales ipsum, eget dictum felis risus ac enim. Nullam ornare ex magna, id pellentesque mi sagittis nec. Pellentesque ornare vel ex a tincidunt. Sed auctor feugiat leo vitae dignissim.
  44.  
  45. Sed tempor orci leo, sit amet semper velit congue et. Sed imperdiet, risus id dapibus gravida, est tortor maximus elit, et sollicitudin ipsum nibh a lectus. Mauris pretium odio vel diam malesuada, eget convallis sapien porta. Donec pharetra elit massa, a congue dui faucibus vitae. Morbi eget ex ac orci viverra semper. Integer blandit accumsan convallis. Donec massa nisl, vulputate nec faucibus quis, tincidunt id libero. Sed lorem nisl, ultrices eget leo sit amet, efficitur porttitor mauris. Maecenas sagittis varius sapien et posuere. Pellentesque laoreet, lectus quis gravida porttitor, purus massa venenatis lectus, elementum ullamcorper tellus eros ut neque.
  46. </div>
  47. <div id="kolprawa">
  48. Prawa najnowsze
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </body></html>


  1. @font-face {
  2. font-family: 'Roboto';
  3. font-style: normal;
  4. font-weight: 100;
  5. src: local('Roboto Thin'), local('Roboto-Thin'), url(http://fonts.gstatic.com/s/roboto/v14/idLYXfFa1c7oAPILDl4z0fesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  6. }
  7. @font-face {
  8. font-family: 'Roboto';
  9. font-style: normal;
  10. font-weight: 300;
  11. src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v14/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  12. }
  13. @font-face {
  14. font-family: 'Roboto';
  15. font-style: normal;
  16. font-weight: 400;
  17. src: local('Roboto Regular'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v14/Xyjz-jNkfiYuJf8UC3Lizw.woff) format('woff');
  18. }
  19. @font-face {
  20. font-family: 'Roboto';
  21. font-style: normal;
  22. font-weight: 700;
  23. src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v14/97uahxiqZRoncBaCEI3aWz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  24. }
  25. @font-face {
  26. font-family: 'Oxygen';
  27. font-style: normal;
  28. font-weight: 300;
  29. src: local('Oxygen Light'), local('Oxygen-Light'), url(http://fonts.gstatic.com/s/oxygen/v5/-1odZCVpKpOs9pNLq607fj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  30. }
  31. @font-face {
  32. font-family: 'Oxygen';
  33. font-style: normal;
  34. font-weight: 400;
  35. src: local('Oxygen'), local('Oxygen-Regular'), url(http://fonts.gstatic.com/s/oxygen/v5/OFgyER5uFw7Cy-F01PjbVg.woff) format('woff');
  36. }
  37. @font-face {
  38. font-family: 'Oxygen';
  39. font-style: normal;
  40. font-weight: 700;
  41. src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://fonts.gstatic.com/s/oxygen/v5/fSUtikcZd7PHZK0t2hzTeT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  42. }
  43.  
  44. body {
  45. font-size: 16px;
  46. font-family: Arial,Helvetica,sans-serif;
  47. }
  48.  
  49. #wrapper {
  50. margin: 17px auto;
  51. padding: 4px 0px 13px;
  52. max-width: 1020px;
  53. min-width: 750px;
  54. min-height: 100%;
  55. box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.4);
  56. background: none repeat scroll 0% 0% #FFF;
  57. cursor: default;
  58. }
  59.  
  60. #main {
  61. margin: 0px 10px 10px;
  62. }
  63.  
  64. #topbar {
  65. padding: 0px;
  66. height: 128px;
  67. margin: 0px -7px;
  68. background: linear-gradient(to bottom, #EBEBEB 0%, #BBB 100%) repeat scroll 0% 0% transparent;
  69. }
  70.  
  71. a.logo {
  72. display: block;
  73. background: url("images/logo.jpg") repeat scroll 0% 0% transparent;
  74. width: 200px;
  75. height: 110px;
  76. border: 2px solid #FFF;
  77. box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
  78. margin: 5px;
  79. float: left;
  80. }
  81.  
  82. #reglogin {
  83. text-transform: uppercase;
  84. height: 17px;
  85. font-size: 0.6em;
  86. font-weight: bold;
  87. margin: 0px -7px 0px -5px;
  88. }
  89.  
  90. #reglogin a {
  91. color: #666;
  92. }
  93.  
  94. .slogan {
  95. float: left;
  96. font-weight: normal;
  97. font-size: 0.8em;
  98. padding: 36px 0px 0px 10px;
  99. color: #666;
  100. }
  101.  
  102. .likeboxcontainer {
  103. padding: 10px 9px 7px 0px;
  104. float: right;
  105. width: 30%;
  106. }
  107.  
  108. .toplinks {
  109. background: none repeat scroll 0% 0% #D00;
  110. color: #FFF;
  111. margin: 0px -7px 0px -7px;
  112. float: inherit;
  113. }
  114.  
  115. .toplinks a {
  116. text-decoration: none;
  117. color: #FFF;
  118. font-weight: bold;
  119. text-transform: uppercase;
  120. font-size: 0.75em;
  121. padding: 2px 6px;
  122. margin: 2px 1px;
  123. display: inline;
  124. line-height: 16px;
  125. }
  126.  
  127.  
  128. #glownatresc {
  129. padding: 15px 0px 0px 0px;
  130. color: #666;
  131. }
  132.  
  133. #kollewa {
  134. float: left;
  135. width: 660px;
  136. }
  137.  
  138. #kolprawa {
  139. background: none repeat scroll 0% 0% #F1F1F1;
  140. width: 300px;
  141. float: right;
  142. max-width: 100%;
  143. padding: 5px;
  144. margin: 0px 0px 10px;
  145. }
  146.  


Z góry dzięki!
Go to the top of the page
+Quote Post
ikssde
post 18.03.2015, 21:39:44
Post #2





Grupa: Zarejestrowani
Postów: 217
Pomógł: 40
Dołączył: 20.08.2008

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


Po <div id="kolprawa">...</div> wstaw <div style="clear:both"></div> albo alternatywnie poszukaj jak to zrobić w CSS przy użyciu :after.

Ten post edytował ikssde 18.03.2015, 21:41:14
Go to the top of the page
+Quote Post
KR2615
post 18.03.2015, 22:29:01
Post #3





Grupa: Zarejestrowani
Postów: 251
Pomógł: 12
Dołączył: 7.05.2007

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


Dzięki, pomogło na tyle, że tekst wszedł w białą ramkę. Niestety prawa kolumna zacyna się na dole, tam gdzie lewa kończy:



Dodałem również tego diva za prawą kolumnę ale efekt tylko taki:

Go to the top of the page
+Quote Post
markuz
post 18.03.2015, 22:32:13
Post #4





Grupa: Zarejestrowani
Postów: 1 208
Pomógł: 272
Dołączył: 11.03.2008

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


Poczytaj o:
overflow: hidden, float: left, float: right, clear: both
powinno wystarczyć.
Go to the top of the page
+Quote Post
KR2615
post 18.03.2015, 22:37:01
Post #5





Grupa: Zarejestrowani
Postów: 251
Pomógł: 12
Dołączył: 7.05.2007

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


Czytałem ale kompletnie tego nie rozumiem sad.gif Może jakbyś dał mi gotowca i powiedział, dlaczego zachowuje się tak a nie inaczej to łatwiej byłoby mi to zrozumieć.
Go to the top of the page
+Quote Post
markuz
post 19.03.2015, 00:14:18
Post #6





Grupa: Zarejestrowani
Postów: 1 208
Pomógł: 272
Dołączył: 11.03.2008

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


Ok. Tutaj jest to rozpisane w "dość zrozumiały" sposób: http://kurs.browsehappy.pl/CSS/Float
Poświęć nawet 30 minut na przeczytanie tego artykułu ze zrozumieniem (wskazówka: w treści są linki do gotowców o które prosiłeś).

Następnie postaraj się poprawić swój szablon - jeżeli nie da rady, wstaw swój kod na https://jsfiddle.net/ a wszystkim będzie łatwiej go poprawić i wyłapać błędy.

Ten post edytował markuz 19.03.2015, 00:16:20
Go to the top of the page
+Quote Post
ikssde
post 19.03.2015, 10:38:01
Post #7





Grupa: Zarejestrowani
Postów: 217
Pomógł: 40
Dołączył: 20.08.2008

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


Przecież pisałem, żebyś wrzucił ten kod za prawą kolumnę, a ty najwidoczniej wrzuciłeś też za lewą kolumnę.

Ma być tak:

  1. <div id="kollewa">...</div>
  2. <div id="kolprawa">...</div>
  3. <div style="clear:both"></div>
Go to the top of the page
+Quote Post
KR2615
post 19.03.2015, 10:53:44
Post #8





Grupa: Zarejestrowani
Postów: 251
Pomógł: 12
Dołączył: 7.05.2007

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


Racja, mój błąd. Wrzuciłem za prawą, na FF jest ok na Chrome na urzadzeniach mobilnych opływa na dole.
Go to the top of the page
+Quote Post
ikssde
post 19.03.2015, 11:10:22
Post #9





Grupa: Zarejestrowani
Postów: 217
Pomógł: 40
Dołączył: 20.08.2008

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


Wrzuć to gdzieś i daj linka smile.gif
Go to the top of the page
+Quote Post
maniakowy
post 17.07.2015, 17:40:54
Post #10





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 17.07.2015

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


Dobrze, że wszedłem na to forum, nawet nie wiecie, jak mi pomogliście.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 25.06.2018 - 18:41