DIV wyświetlany pod zamiast obok Opcje

[Mikele7]

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 
<?php //Plik główny index.php
 
   require_once('includes/config.php');
   $page_title = 'Witamy na stronie Old Schoola Nowosielce!';
   include('includes/header.php');
 
 
 
?>
<div id="ilewe">
	 <div class="1kol">vcxvcxz xcvxcv x v</div>
	 <div class="2kol">vxcv xc vxcvxcvxcv x vdss eae a</div>
  </div>
<div id="iprawe">
</div>
 
 
<?php 
   include('includes/footer.php');
?>
[PHP] pobierz, plaintext 

A to style.css

[HTML] pobierz, plaintext 
#tlo {
  background: url(images/tlo.jpg) /*fixed no-*/repeat ;
  background-position: top center;
 
}
 
#kontener {
  background: white;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 10px; 
}
 
#naglowek {
  background: url(images/naglowek.png);
  width: 900px;
  height: 150px;
}
 
.naglowek {
  float: right;
  margin: 15px;
}
 
.naglowek a {
  color: #ffd008;
  text-decoration: none; 
  font: 13px Arial;  
  font-weight: bold; 
  margin-left: 10px;
  margin-right: 10px;   
}
 
.naglowek a:hover {
  color: #ffd008;
  font: 13px Arial;
  font-weight: bold;   
  text-decoration: underline;  
}
 
 
/*Menu*/
#menu {
  background: url(images/menu.jpg);
  width: 900px;
  height: 50px;
  margin-top: -17px;
}
 
#menu li {
  font: 14px Verdana; 
  font-weight: bold;
  text-shadow: 2px 2px 3px #000000;
  list-style-type: none;
  display: inline;
  padding-left: 30px;
  float: left;
  color: white;
  padding-top: 15px;
  padding-bottom: 12px;
}
 
#meny li a {
  float: left;
  display: block;
  color: white;
}
 
#menu a {
  color: white;
  text-decoration: none; 
}
 
#menu a:hover {
  font: 15px Verdana;
  font-weight: bold;
  text-decoration: none; 
}
 
/*PASIAK*/
 
#pasiak{
  background: url(images/pasiak.jpg) repeat;
  width: 900px;
  height: 400px;
  margin-top: 10px;
}
 
.slider {
  padding: 10px 10px 10px 10px ;
  float: left; 
  width: 525px;
}
 
.slider img{
  margin-bottom: 5px;
}
 
.mecze {
  float: left;
  width: 345px;
  padding-top: 10px ;
}
 
.mecze img{
  margin-bottom: 5px;
}
 
/*SRODEK*/
#srodek {
  width: 1200px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 770px;
}
 
.srodek-lewe{
  width: 525px;
  height: 750px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
 
.srodek-lewe h2{
  background: url(images/pasek_dlugi.png);
  width: 525px;
  height: 22px;
}
 
 
.srodek-lewel {
  margin-right: 20px;
  width: 250px;
  float: left;
  margin-bottom: 10px;
}
 
.srodek-lewer {
  width: 250px;
  float: left;
  margin-bottom: 10px;
}
 
.data {
  color: #494f48;
  font: 12px Arial;
  font-weight: 600; 
  margin-bottom: 0px;
}
 
.tytul {
  color: #2e302e;
  font:  12px Verdana;
  font-weight: 800;
  margin-top:0
}
 
.tytul a{
  color: #2e302e;
  font:  12px Verdana;
  font-weight: 800;
  text-decoration: none;
}
 
.tytul a:hover{
  color: #2e302e;
  font:  12px Verdana;
  font-weight: 800;
  text-decoration: underline;
}
 
 
.srodek-prawe{
  width: 345px;
  height: 750px;
  float: left;
  margin-right: 10px;
}
 
.tabela h2{
  background: url(images/tabela.png);
  width: 345px;
  height: 22px;
}
 
.tabela img {
  margin-left: auto;
  margin-right: auto;
}
 
.sylwetka h2{
  background: url(images/sylwetka.png);
  width: 345px;
  height: 22px;
}
 
/*Multimedia*/
#multimedia{
  background: url(images/multimedia.jpg);
  height: 463px;
  width: 900px;
  position: relative;
  z-index: 0;
}
 
#multimedia h2{
  color: white;
  font: 20px Tahoma;
  font-weight: bold;
  margin: 0;
}
 
#multimedia p{
  color: white;
  font: 15px Arial;
}
 
.zdj{
  margin: 20px 0 0 0;
 
}
 
.multimedia {
  padding: 5px 0px 0px 10px;
}
 
.przedzial {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 560px;
 
}
 
.yt1{
  position: absolute;
  z-index: 1;
  top: 65;
  left: 585px;  
}
 
.yt2{
  position: absolute;
  z-index: 1;
  top: 245;
  left: 585px;  
}
 
/*Stopka*/
#stopka{
  background: url(images/pasiak.jpg);
  height: 150px;
  width: 900px;
  clear: both;
  box-shadow: inset 0 0 5px ;
}
 
.lewe-stopka {
  width: 440px;
  height: 130px;
  margin:5px;
  float: left;
}
 
.lewe-stopka img{
    float: left;
}       
 
.lewe-stopka p{
  color: white;
  font: 14px Verdana;
  text-align: right;
}    
 
.prawe-stopka {
  width: 450px;
  height: 150px;
  float: left;
  position: relative;
  z-index: 0;
} 
 
.prawe-stopka li{
  list-style-type: none;
  font: 13px Verdana;
  font-weight: bold;
  color: white;
} 
 
.prawe-stopka a{
  font: 13px Verdana;
  font-weight: bold;
  color: white;
  text-decoration: none; 
}
 
.prawe-stopka a:hover{
  font: 13px Verdana;
  font-weight: bold;
  color: #ffd008;
  text-decoration: none;
}
 
.kol1 {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 30px;
}
 
.kol2 {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 160px;
}
 
.kol3 {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 290px;
}
 
.autor {
  color: white;
  font: 16px Impact;
  position: absolute;
  z-index: 1;
  top:100px;
  left: 200px;
}
 
/*Sponsorzy*/
#sponsorzy {
  width: 880px;
  margin-left: 10px;
  margin-right: 10px;
}
 
#sponsorzy h2{
  font: 15px Arial ;
  font-weight: 900;
  margin-bottom: 0;
}
 
#sponsorzy li{
  list-style-type: none;
  display: inline;
  padding-left: 10px;
}
 
#sponsorzy li img{
  list-style-type: none;
  height: 60px;
  opacity : 0.70;
  filter : alpha(opacity=70);
}
 
#sponsorzy img:hover{
  opacity : 1.00;
  filter : alpha(opacity=100);
}
 
#nagl img{
  list-style-type: none;
  height: 60px;
  opacity : 0.70;
  filter : alpha(opacity=70);
}
 
#nagl img:hover{
  opacity : 1.00;
  filter : alpha(opacity=100);
}
 
/*Logowanie formularz*/
.login a{
  color: #1e3c1a; 
  font-weight: bold; 
  text-decoration: none;
}
 
.login a:hover{
  color: #1e3c1a; 
  font-weight: bold; 
  text-decoration: underline;
}
 
fieldset {
  width: 500px;
  margin: auto;
}
 
 
 
.error {
	color:#8f0404;
	font-size:14px;
	font-weight: bold;
	font: Arial;
	}
 
.calosc {
  margin: 10px;
}
 
/*Podział w index.php na dwie kolumny*/
 
#ilewe {
  width: 525px;
  z-index: 0;
  position: relative;
  float: right;
  margin-right:10px;
}
 
#iprawe {
  width: 345px;
  background: black;
  height: 300px;
  float: rigth;
  }
 
div.1kol {
  width: 250px;
	background: red;
	height: 200px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
 
div.2kol {
    width: 250px;
		height: 200px;
	background: pink;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 260;
}
[HTML] pobierz, plaintext 

[StrefaPi]

pierwsza sprawa nazwy klas nie mogą zaczynać się od liczby - zmień 1kol na kolumna1 albo coś w tym stylu

Ten post edytował StrefaPi 31.10.2014, 19:38:52

[Porter3]

po pierwsze brakuje px przy left:

[CSS] pobierz, plaintext 
div.2kol {
	left: 260;
}
[CSS] pobierz, plaintext 

tutaj na szybko gotowy, sprawdzony kod:

[HTML] pobierz, plaintext 
<div id="ilewe">
	 <div class="kol1">1</div>
	 <div class="kol2">2</div>
  </div>
<div id="iprawe">
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#ilewe {
  width: 525px;
  z-index: 0;
  position: relative;
}
 
#iprawe {
  width: 345px;
  background: black;
  height: 300px;
  float: rigth;
  margin-left:535px;
  }
 
div.kol1 {
  width: 250px;
	background: red;
	height: 200px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
 
div.kol2 {
    width: 250px;
		height: 200px;
	background: pink;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 260px;
}
[CSS] pobierz, plaintext 

[Mikele7]

Dzięki chłopaki. Jednak człowiek całe życie się uczy. Nie sądziłem, że coś takiego może być błędem (IMG:style_emoticons/default/smile.gif)

[StrefaPi]

@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...

Ten post edytował StrefaPi 31.10.2014, 19:51:33

[Mikele7]

Spokojnie spokojnie, nie oduczają (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif)