+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rozmieszczanie elementów stronki (/thread-rozmieszczanie-elementow-stronki)
Rozmieszczanie elementów stronki - Italic - 02-03-2012
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
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;
}RE: Rozmieszczanie elementów stronki - Moody - 02-03-2012
Domniemam, że tego Ty nie napisałeś, bo jakbyś to faktycznie zrobił to byś się nie pytał czy dobrze i jak pociąć layout.
W dodatku nazwa jak jakiegoś gotowego szablonu "strona 22" + komentarze z ładnymi opisami.
Jest dobrze zrobione na pierwszy rzut oka.
RE: Rozmieszczanie elementów stronki - Pedro84 - 03-03-2012
- puste divy
- użycie
- po cholerę komentujesz każdą wartość w CSS?
- naum się grupować elementy
RE: Rozmieszczanie elementów stronki - Moody - 03-03-2012
Rozwiń jeśli możesz:
Puste divy? Czyli? Przecież nie zawsze musi się coś znajdywać między <div> a </div> ?
RE: Rozmieszczanie elementów stronki - Pedro84 - 04-03-2012
(03-03-2012, 23:04)Moody napisał(a): Rozwiń jeśli możesz:Oczywiście, że nie tyle musi, co powinien.
Puste divy? Czyli? Przecież nie zawsze musi się coś znajdywać między <div> a </div> ?
Używanie pustych elementów, w dodatku blokowych zbyt poprawne nie jest. Jasne, że projektant sobie czasem tak wymyślił, że trzeba, ale nie w tym przypadku.
Poza tym, należy minimalizować ilość elementów jakie przeglądarka ma do renderowania.
RE: Rozmieszczanie elementów stronki - Moody - 04-03-2012
No to masz na myśli między innymi ten kod?
Kod:
<div id="top"></div>Kod:
#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 */
}Przecież jeśli to jest top, który ma zawierać tylko obrazek to czemu uważasz, że nie powinno być pustego znacznika div?
RE: Rozmieszczanie elementów stronki - Pedro84 - 04-03-2012
Bo to znaczy, w 99% przypadków (także w tym), że wszystko jest źle pocięte.
Nawet jeśli chcesz wstawić jakąś grafikę tła, to robisz to w jakim wrapperze (np. header'a czy footer'a), a w nim całą zwartość danej sekcji.
RE: Rozmieszczanie elementów stronki - Moody - 04-03-2012
Tylko, że Ty mówisz już o html 5 tak?
Ponieważ z tego co ja wiem to nie używało się do tej pory <header> itd.
RE: Rozmieszczanie elementów stronki - Pedro84 - 04-03-2012
Nie, nie mówię o HTML5.
Header, footer, czyli nagłówek i stopka to są elementy dokumentu strony, bez względu na to w jakiej wersji HTML piszesz.