Witam, napisałem stronkę z pomocą pustych divów z tym, że niewiem czy tak się robi. Jak pociąć layout i jak później to układać, czy tak jak ja zrobiłem ?
Proszę o ściągnięcie Mojej stronki i o zajrzenie w kod.
http://www.sendspace.pl/file/21d0ace9f8eb303bce326d5
Pozdrawiam
Proszę o ściągnięcie Mojej stronki i o zajrzenie w kod.
http://www.sendspace.pl/file/21d0ace9f8eb303bce326d5
Pozdrawiam
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<meta name-"robots" content="index, follow" />
<title>www</title>
<meta name="description" content="www" />
<meta name="keywords" content="www" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kontener">
<div id="top"></div>
<!-- koniec top-->
<div id="przerwa_01"></div>
<!-- koniec przerwa_1-->
<div id="menu">
<div id="przerwa_02"> </div>
<div id="przycisk_01"> </div>
<div id="przerwa_02"> </div>
<div id="przycisk_02"> </div>
<div id="przerwa_02"> </div>
<div id="przycisk_03"> </div>
<div id="przerwa_02"> </div>
<div id="przycisk_04"> </div>
<div id="przerwa_02"> </div>
<div id="przycisk_05"> </div>
<div id="przerwa_02"> </div>
<div id="przycisk_06"> </div>
</div> <!-- koniec menu-->
<div id="przerwa_03"></div> <!-- koniec przerwa_03 -->
<div id="srodek_top_pusty">
<div id="przerwa_04"></div>
<div id="srodek_top_lewy"></div>
<div id="przerwa_05"></div>
<div id="srodek_top_prawy"></div>
<div id="przerwa_04"></div>
</div> <!-- koniec srodek_top_pusty -->
<div id="srodek_pusty">
<div id="przerwa_06"></div>
<div id="srodek_lewo"> jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis teksttekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst</div>
<div id="przerwa_07"> </div>
<div id="srodek_prawo"> jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekst jakis tekstjakis tekst jakis </div>
<div id="przerwa_06"></div>
<div class="clear"></div>
</div> <!-- koniec srodek pusty -->
<div id="dol_pusty">
<div id="przerwa_06"> </div>
<div id="dol_lewy"></div>
<div id="przerwa_07"> </div>
<div id="dol_prawy"></div>
</div> <!-- koniec dol pusty -->
<div id="przerwa_08"></div>
<div id="dol"></div>
</div><!-- koniec kontener -->
</body>
</html>Kod:
@charset "utf-8";
/* CSS Document */
*
{
padding: 0; /* dopełnienie ustawione na 0*/
margin: 0; /* margines ustawiony na 0 */
}
body
{
background-image: url('images/tlo_03.jpg'); /* osadzenie tła strony */
background-attachment: fixed; /*ustawienie przymocowania tła: na ustalone z góry */
}
#kontener /* kontener - przetrzymuje reszte elementów naszej strony */
{
width: 1024px; /*szerokosc prawidłowo powinna byc 1004px*/
margin: 0 auto; /* wysrodkowanie- dodatkowo ustawione w divie align="center" dla starych przeglądarek */
}
/* GORNA CZESC STRONKI */
#top
{
position: relative; /* pozycjonowanie relatywne wzdledem siebie */
margin-top: 10px; /*margines gorny ustawiony na 10 px */
background-image: url('images/top_01.jpg'); /* adres obrazka */
width: 1024px; /* szerokosc */
height: 50px; /* wysokosc */
}
#przerwa_01
{
width: 1024px; /* szerokosc */
height: 15px; /* wysokosc */
}
#menu
{
width: 1024px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_01
{
background-image: url('images/rejestracja_04.jpg'); /* adres obrazka */
float: left;
width: 233px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przerwa_02
{
float: left;
width: 10px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_02
{
background-image: url('images/przycisk_04.jpg'); /* adres obrazka */
float: left;
width: 144px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_03
{
background-image: url('images/przycisk_04.jpg'); /* adres obrazka */
float: left;
width: 144px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_04
{
background-image: url('images/przycisk_04.jpg'); /* adres obrazka */
float: left;
width: 144px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_05
{
background-image: url('images/przycisk_04.jpg'); /* adres obrazka */
float: left;
width: 144px; /* szerokosc */
height: 74px; /* wysokosc */
}
#przycisk_06
{
background-image: url('images/przycisk_04.jpg'); /* adres obrazka */
float: left;
width: 144px; /* szerokosc */
height: 74px; /* wysokosc */
}
/* SRODEK TOP STRONKI */
#przerwa_03
{
width: 1024px; /* szerokosc */
height: 15px; /* wysokosc */
}
#srodek_top_pusty
{
width: 1024px;
}
#przerwa_04
{
float: left;
width: 10px; /* szerokosc */
height: 13px;
}
#srodek_top_lewy
{
background-image: url('images/srodek_top_krotki_lewy_04.jpg'); /* adres obrazka */
float: left;
width: 387px; /* szerokosc */
height: 13px; /* wysokosc */
}
#przerwa_05
{
float: left;
width: 37px; /* szerokosc */
height: 13px; /* wysokosc */
}
#srodek_top_prawy
{
background-image: url('images/srodek_top_krotki_prawy_06.jpg'); /* adres obrazka */
float: left;
width: 579px; /* szerokosc */
height: 13px; /* wysokosc */
}
/*SRODEK STRONKI */
#srodek_pusty
{
width: 1024px;
background-image:url('images/srodek_srodek_dlugi_08.jpg');
background-repeat: repeat-y;
margin-left: 10px;
}
#przerwa_06
{
float: left;
width: 10px; /* szerokosc */
}
#srodek_lewo
{
background-image: url('images/srodek_srodek_krotki_lewy_08.jpg'); /* adres obrazka */
background-repeat: repeat-y;
width: 387px; /* szerokosc */
float: left;
}
#przerwa_07
{
float: left;
width: 37px; /* szerokosc */
}
#srodek_prawo
{
background-image: url('images/srodek_srodek_krotki_prawy_09.jpg'); /* adres obrazka */
background-repeat:repeat-y;
width: 579px; /* szerokosc */
float: left;
margin-right: 10px;
}
.clear
{clear: both; }
/*SRODEK DOL STRONKI */
#dol_pusty
{
width: 1024px;
height: 11px;
}
#dol_lewy
{
background-image: url('images/srodek_dol_krotki_lewy_12.jpg'); /* adres obrazka */
width: 387px; /* szerokosc */
height: 11px;
float: left;
}
#dol_prawy
{
background-image: url('images/srodek_dol_krotki_prawy_13.jpg'); /* adres obrazka */
width: 579px; /* szerokosc */
height: 11px;
float: left;
}
/*DOL*/
#przerwa_08
{
width: 1024px;
height: 15px;
}
#dol
{
background-image: url('images/dol_16.jpg'); /* adres obrazka */
width: 1024px; /* szerokosc */
height: 87px;
float: left;
}
