Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Gdzie jest błąd?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
KR2615
18.03.2015, 21:22:57
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?



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4.         <link rel="icon" type="image/png" href="images/favicon.ico">
  5.  
  6.         <link href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css" />
  7.         <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css" />
  8.  
  9.         <link href="style.css" rel="stylesheet">
  10.         <link href="images/font-awesome.css" rel="stylesheet">
  11.         <link href="images/jquery-ui.css" rel="stylesheet">
  12.  
  13.         <script type="text/javascript" src="images/jquery.js"></script>
  14.         <script type="text/javascript" src="images/jquery-ui.js"></script>
  15.         <script type="text/javascript" src="images/scripts.js"></script>
  16.     </head>
  17.     <body>
  18.        <div id="wrapper">
  19. 	    <div id="main">
  20. 		<div id="reglogin">
  21. 		    <a href="zaloguj">Zaloguj</a> | <a href="zarejestruj">zarejestruj</a>
  22. 		</div>
  23.                         <div id="topbar"><a class="logo" href=""></a>
  24. 			<span class="slogan"><b>slogan/b></span>
  25. 			    <div class="likeboxcontainer">FB</div>
  26. 			</div>
  27. 	    <div class="toplinks">
  28. 		<a href="kat1">Kategoria1</a>
  29. 		<a href="kat1">Kategoria2</a>
  30. 		<a href="kat1">Kategoria3</a>
  31. 		<a href="kat1">Kategoria4</a>
  32. 	    </div>
  33.             <div id="glownatresc">
  34. 		<div id="kollewa">
  35. 		    Lewa slider
  36.  
  37.  
  38. 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.
  39.  
  40. 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.
  41.  
  42. 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.
  43.  
  44. 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.
  45.  
  46. 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. 
  47. 		</div>
  48. 		<div id="kolprawa">
  49. 		    Prawa najnowsze
  50. 		</div>
  51. 	    </div>
  52. 	</div>
  53.     </div>
  54. </body></html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  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.  
[HTML] pobierz, plaintext


Z góry dzięki!
ikssde
18.03.2015, 21:39:44
Po <div id="kolprawa">...</div> wstaw <div style="clear:both"></div> albo alternatywnie poszukaj jak to zrobić w CSS przy użyciu :after.
KR2615
18.03.2015, 22:29:01
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:

markuz
18.03.2015, 22:32:13
Poczytaj o:
overflow: hidden, float: left, float: right, clear: both
powinno wystarczyć.
KR2615
18.03.2015, 22:37:01
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ć.
markuz
19.03.2015, 00:14:18
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.
ikssde
19.03.2015, 10:38:01
Przecież pisałem, żebyś wrzucił ten kod za prawą kolumnę, a ty najwidoczniej wrzuciłeś też za lewą kolumnę.

Ma być tak:

[PHP] pobierz, plaintext 
  1. <div id="kollewa">...</div>
  2. <div id="kolprawa">...</div>
  3. <div style="clear:both"></div>
[PHP] pobierz, plaintext
KR2615
19.03.2015, 10:53:44
Racja, mój błąd. Wrzuciłem za prawą, na FF jest ok na Chrome na urzadzeniach mobilnych opływa na dole.
ikssde
19.03.2015, 11:10:22
Wrzuć to gdzieś i daj linka smile.gif
maniakowy
17.07.2015, 17:40:54
Dobrze, że wszedłem na to forum, nawet nie wiecie, jak mi pomogliście.
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-2024 Invision Power Services, Inc.