Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: DIV wyświetlany pod zamiast obok
Forum PHP.pl > Forum > Po stronie przeglądarki
Mikele7
31.10.2014, 15:21:27
Witam. Mam nietypowy problem otóż robiąc stronę nie mogę przebrnąć przez łątwy wydawać by się mogło kod. Chciałem zrobić po lewej stronie dwie kolumny i po prawej jedną, ale te dwie za nic nie chcą się wyświetlić tak jak powinny. Jestem zdziwiony, bo zawsze robiłem podobnie i nie wiem w czym jest problem....
[PHP] pobierz, plaintext 
  1. <?php //Plik główny index.php
  2.  
  3.    require_once('includes/config.php');
  4.    $page_title = 'Witamy na stronie Old Schoola Nowosielce!';
  5.    include('includes/header.php');
  6.  
  7.  
  8.  
  9. ?>
  10. <div id="ilewe">
  11. 	 <div class="1kol">vcxvcxz xcvxcv x v</div>
  12. 	 <div class="2kol">vxcv xc vxcvxcvxcv x vdss eae a</div>
  13.   </div>
  14. <div id="iprawe">
  15. </div>
  16.  
  17.  
  18. <?php 
  19.    include('includes/footer.php');
  20. ?>
[PHP] pobierz, plaintext


A to style.css
[HTML] pobierz, plaintext 
  1. #tlo {
  2.   background: url(images/tlo.jpg) /*fixed no-*/repeat ;
  3.   background-position: top center;
  4.  
  5. }
  6.  
  7. #kontener {
  8.   background: white;
  9.   width: 900px;
  10.   margin-left: auto;
  11.   margin-right: auto;
  12.   box-shadow: 5px 5px 10px; 
  13. }
  14.  
  15. #naglowek {
  16.   background: url(images/naglowek.png);
  17.   width: 900px;
  18.   height: 150px;
  19. }
  20.  
  21. .naglowek {
  22.   float: right;
  23.   margin: 15px;
  24. }
  25.  
  26. .naglowek a {
  27.   color: #ffd008;
  28.   text-decoration: none; 
  29.   font: 13px Arial;  
  30.   font-weight: bold; 
  31.   margin-left: 10px;
  32.   margin-right: 10px;   
  33. }
  34.  
  35. .naglowek a:hover {
  36.   color: #ffd008;
  37.   font: 13px Arial;
  38.   font-weight: bold;   
  39.   text-decoration: underline;  
  40. }
  41.  
  42.  
  43. /*Menu*/
  44. #menu {
  45.   background: url(images/menu.jpg);
  46.   width: 900px;
  47.   height: 50px;
  48.   margin-top: -17px;
  49. }
  50.  
  51. #menu li {
  52.   font: 14px Verdana; 
  53.   font-weight: bold;
  54.   text-shadow: 2px 2px 3px #000000;
  55.   list-style-type: none;
  56.   display: inline;
  57.   padding-left: 30px;
  58.   float: left;
  59.   color: white;
  60.   padding-top: 15px;
  61.   padding-bottom: 12px;
  62. }
  63.  
  64. #meny li a {
  65.   float: left;
  66.   display: block;
  67.   color: white;
  68. }
  69.  
  70. #menu a {
  71.   color: white;
  72.   text-decoration: none; 
  73. }
  74.  
  75. #menu a:hover {
  76.   font: 15px Verdana;
  77.   font-weight: bold;
  78.   text-decoration: none; 
  79. }
  80.  
  81. /*PASIAK*/
  82.  
  83. #pasiak{
  84.   background: url(images/pasiak.jpg) repeat;
  85.   width: 900px;
  86.   height: 400px;
  87.   margin-top: 10px;
  88. }
  89.  
  90. .slider {
  91.   padding: 10px 10px 10px 10px ;
  92.   float: left; 
  93.   width: 525px;
  94. }
  95.  
  96. .slider img{
  97.   margin-bottom: 5px;
  98. }
  99.  
  100. .mecze {
  101.   float: left;
  102.   width: 345px;
  103.   padding-top: 10px ;
  104. }
  105.  
  106. .mecze img{
  107.   margin-bottom: 5px;
  108. }
  109.  
  110. /*SRODEK*/
  111. #srodek {
  112.   width: 1200px;
  113.   margin-top: 10px;
  114.   margin-bottom: 10px;
  115.   height: 770px;
  116. }
  117.  
  118. .srodek-lewe{
  119.   width: 525px;
  120.   height: 750px;
  121.   float: left;
  122.   margin-left: 10px;
  123.   margin-right: 10px;
  124. }
  125.  
  126. .srodek-lewe h2{
  127.   background: url(images/pasek_dlugi.png);
  128.   width: 525px;
  129.   height: 22px;
  130. }
  131.  
  132.  
  133. .srodek-lewel {
  134.   margin-right: 20px;
  135.   width: 250px;
  136.   float: left;
  137.   margin-bottom: 10px;
  138. }
  139.  
  140. .srodek-lewer {
  141.   width: 250px;
  142.   float: left;
  143.   margin-bottom: 10px;
  144. }
  145.  
  146. .data {
  147.   color: #494f48;
  148.   font: 12px Arial;
  149.   font-weight: 600; 
  150.   margin-bottom: 0px;
  151. }
  152.  
  153. .tytul {
  154.   color: #2e302e;
  155.   font:  12px Verdana;
  156.   font-weight: 800;
  157.   margin-top:0
  158. }
  159.  
  160. .tytul a{
  161.   color: #2e302e;
  162.   font:  12px Verdana;
  163.   font-weight: 800;
  164.   text-decoration: none;
  165. }
  166.  
  167. .tytul a:hover{
  168.   color: #2e302e;
  169.   font:  12px Verdana;
  170.   font-weight: 800;
  171.   text-decoration: underline;
  172. }
  173.  
  174.  
  175. .srodek-prawe{
  176.   width: 345px;
  177.   height: 750px;
  178.   float: left;
  179.   margin-right: 10px;
  180. }
  181.  
  182. .tabela h2{
  183.   background: url(images/tabela.png);
  184.   width: 345px;
  185.   height: 22px;
  186. }
  187.  
  188. .tabela img {
  189.   margin-left: auto;
  190.   margin-right: auto;
  191. }
  192.  
  193. .sylwetka h2{
  194.   background: url(images/sylwetka.png);
  195.   width: 345px;
  196.   height: 22px;
  197. }
  198.  
  199. /*Multimedia*/
  200. #multimedia{
  201.   background: url(images/multimedia.jpg);
  202.   height: 463px;
  203.   width: 900px;
  204.   position: relative;
  205.   z-index: 0;
  206. }
  207.  
  208. #multimedia h2{
  209.   color: white;
  210.   font: 20px Tahoma;
  211.   font-weight: bold;
  212.   margin: 0;
  213. }
  214.  
  215. #multimedia p{
  216.   color: white;
  217.   font: 15px Arial;
  218. }
  219.  
  220. .zdj{
  221.   margin: 20px 0 0 0;
  222.  
  223. }
  224.  
  225. .multimedia {
  226.   padding: 5px 0px 0px 10px;
  227. }
  228.  
  229. .przedzial {
  230.   position: absolute;
  231.   z-index: 1;
  232.   top: 0;
  233.   left: 560px;
  234.  
  235. }
  236.  
  237. .yt1{
  238.   position: absolute;
  239.   z-index: 1;
  240.   top: 65;
  241.   left: 585px;  
  242. }
  243.  
  244. .yt2{
  245.   position: absolute;
  246.   z-index: 1;
  247.   top: 245;
  248.   left: 585px;  
  249. }
  250.  
  251. /*Stopka*/
  252. #stopka{
  253.   background: url(images/pasiak.jpg);
  254.   height: 150px;
  255.   width: 900px;
  256.   clear: both;
  257.   box-shadow: inset 0 0 5px ;
  258. }
  259.  
  260. .lewe-stopka {
  261.   width: 440px;
  262.   height: 130px;
  263.   margin:5px;
  264.   float: left;
  265. }
  266.  
  267. .lewe-stopka img{
  268.     float: left;
  269. }       
  270.  
  271. .lewe-stopka p{
  272.   color: white;
  273.   font: 14px Verdana;
  274.   text-align: right;
  275. }    
  276.  
  277. .prawe-stopka {
  278.   width: 450px;
  279.   height: 150px;
  280.   float: left;
  281.   position: relative;
  282.   z-index: 0;
  283. } 
  284.  
  285. .prawe-stopka li{
  286.   list-style-type: none;
  287.   font: 13px Verdana;
  288.   font-weight: bold;
  289.   color: white;
  290. } 
  291.  
  292. .prawe-stopka a{
  293.   font: 13px Verdana;
  294.   font-weight: bold;
  295.   color: white;
  296.   text-decoration: none; 
  297. }
  298.  
  299. .prawe-stopka a:hover{
  300.   font: 13px Verdana;
  301.   font-weight: bold;
  302.   color: #ffd008;
  303.   text-decoration: none;
  304. }
  305.  
  306. .kol1 {
  307.   position: absolute;
  308.   z-index: 1;
  309.   top: 5px;
  310.   left: 30px;
  311. }
  312.  
  313. .kol2 {
  314.   position: absolute;
  315.   z-index: 1;
  316.   top: 5px;
  317.   left: 160px;
  318. }
  319.  
  320. .kol3 {
  321.   position: absolute;
  322.   z-index: 1;
  323.   top: 5px;
  324.   left: 290px;
  325. }
  326.  
  327. .autor {
  328.   color: white;
  329.   font: 16px Impact;
  330.   position: absolute;
  331.   z-index: 1;
  332.   top:100px;
  333.   left: 200px;
  334. }
  335.  
  336. /*Sponsorzy*/
  337. #sponsorzy {
  338.   width: 880px;
  339.   margin-left: 10px;
  340.   margin-right: 10px;
  341. }
  342.  
  343. #sponsorzy h2{
  344.   font: 15px Arial ;
  345.   font-weight: 900;
  346.   margin-bottom: 0;
  347. }
  348.  
  349. #sponsorzy li{
  350.   list-style-type: none;
  351.   display: inline;
  352.   padding-left: 10px;
  353. }
  354.  
  355. #sponsorzy li img{
  356.   list-style-type: none;
  357.   height: 60px;
  358.   opacity : 0.70;
  359.   filter : alpha(opacity=70);
  360. }
  361.  
  362. #sponsorzy img:hover{
  363.   opacity : 1.00;
  364.   filter : alpha(opacity=100);
  365. }
  366.  
  367. #nagl img{
  368.   list-style-type: none;
  369.   height: 60px;
  370.   opacity : 0.70;
  371.   filter : alpha(opacity=70);
  372. }
  373.  
  374. #nagl img:hover{
  375.   opacity : 1.00;
  376.   filter : alpha(opacity=100);
  377. }
  378.  
  379. /*Logowanie formularz*/
  380. .login a{
  381.   color: #1e3c1a; 
  382.   font-weight: bold; 
  383.   text-decoration: none;
  384. }
  385.  
  386. .login a:hover{
  387.   color: #1e3c1a; 
  388.   font-weight: bold; 
  389.   text-decoration: underline;
  390. }
  391.  
  392. fieldset {
  393.   width: 500px;
  394.   margin: auto;
  395. }
  396.  
  397.  
  398.  
  399. .error {
  400. 	color:#8f0404;
  401. 	font-size:14px;
  402. 	font-weight: bold;
  403. 	font: Arial;
  404. 	}
  405.  
  406. .calosc {
  407.   margin: 10px;
  408. }
  409.  
  410. /*Podział w index.php na dwie kolumny*/
  411.  
  412. #ilewe {
  413.   width: 525px;
  414.   z-index: 0;
  415.   position: relative;
  416.   float: right;
  417.   margin-right:10px;
  418. }
  419.  
  420. #iprawe {
  421.   width: 345px;
  422.   background: black;
  423.   height: 300px;
  424.   float: rigth;
  425.   }
  426.  
  427. div.1kol {
  428.   width: 250px;
  429. 	background: red;
  430. 	height: 200px;
  431. 	position: absolute;
  432. 	z-index: 1;
  433. 	top: 0;
  434. 	left: 0;
  435. }
  436.  
  437. div.2kol {
  438.     width: 250px;
  439. 		height: 200px;
  440. 	background: pink;
  441. 	position: absolute;
  442. 	z-index: 1;
  443. 	top: 0;
  444. 	left: 260;
  445. }
[HTML] pobierz, plaintext
StrefaPi
31.10.2014, 19:16:09
pierwsza sprawa nazwy klas nie mogą zaczynać się od liczby - zmień 1kol na kolumna1 albo coś w tym stylu
Porter3
31.10.2014, 19:38:41
po pierwsze brakuje px przy left:
[CSS] pobierz, plaintext 
  1. div.2kol {
  2. 	left: 260;
  3. }
[CSS] pobierz, plaintext


tutaj na szybko gotowy, sprawdzony kod:
[HTML] pobierz, plaintext 
  1. <div id="ilewe">
  2. 	 <div class="kol1">1</div>
  3. 	 <div class="kol2">2</div>
  4.   </div>
  5. <div id="iprawe">
  6. </div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. #ilewe {
  2.   width: 525px;
  3.   z-index: 0;
  4.   position: relative;
  5. }
  6.  
  7. #iprawe {
  8.   width: 345px;
  9.   background: black;
  10.   height: 300px;
  11.   float: rigth;
  12.   margin-left:535px;
  13.   }
  14.  
  15. div.kol1 {
  16.   width: 250px;
  17. 	background: red;
  18. 	height: 200px;
  19. 	position: absolute;
  20. 	z-index: 1;
  21. 	top: 0;
  22. 	left: 0;
  23. }
  24.  
  25. div.kol2 {
  26.     width: 250px;
  27. 		height: 200px;
  28. 	background: pink;
  29. 	position: absolute;
  30. 	z-index: 1;
  31. 	top: 0;
  32. 	left: 260px;
  33. }
[CSS] pobierz, plaintext
Mikele7
31.10.2014, 19:47:40
Dzięki chłopaki. Jednak człowiek całe życie się uczy. Nie sądziłem, że coś takiego może być błędem smile.gif
StrefaPi
31.10.2014, 19:49:44
@Porter3 - gotowce oduczają myśleć :P

a tak wracając do kodu widzimy mały wycinek strony i trudno cokolwiek poprawić... a tak ogólnie to powinno się zmienić całą masę rzeczy zaczynając od position: absolute; z-index: 0; powtórzonych nazw klas kol1 do kol3 są już zdefiniowane ogólnie prawie identycznie...
Mikele7
31.10.2014, 20:00:24
Spokojnie spokojnie, nie oduczają wink.gif Kod od kolegi przerobiłem na własny użytek i co się okazało? Że zmieniłem wszystko to co napisano w ostatnim poście. Także nie kopiuję bezmyślnie. Pozdrawiam smile.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.