[HTML/CSS] budowanie szablonu

0

Witam,

Mam mały problem ze zbudowaniem mojego szablonu w divach. Kiedy odpalam stronę w przeglądarce (chrome/ie/ff) to zamiast zbudowanego szablonu wyświetla się biała strona. Nie mam pojęcia co robię źle. Mam nadzieje na odpowiedź i z góry dziękuje.

Kod index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="styl.css" />
</head>

<body>
	
 <div class="layout"> <!--Główny div-->
   	  <div class="1"></div>
      <div class="2"></div>
      
      	<div class="3"> <!--Nagłówek-->
      	
        
      	</div>
      
      <div class="4"></div>
      <div class="5"></div>
      
		<div class="6"> <!--Okno duże-->
        
        
        </div>
      
      <div class="7"></div>
      <div class="8"></div>
      
      
      	<div class="9"> <!--Okno małe górne-->
        
        
        </div>
      
      
		
 </div> 
    
    

</body>
</html>

oraz styl.css

@charset "utf-8";
/* CSS Document */
div.1 {
	background-image:url(layout/images/Untitled-1_01.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:0px;
	left:0px;
	width:1024px;
	height:28px;
}
div.2 {
	background-image:url(layout/images/Untitled-1_02.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:29px;
	left:0px;
	width:60px;
	height:747px;
	z-index:-1;
}
div.3 {
	background-image:url(layout/images/Untitled-1_03.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:28px;
	left:60px;
	width:917px;
	height:77px;
	z-index:2;
}
div.4 {
	background-image:url(layout/images/Untitled-1_04.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:29px;
	left:977px;
	width:47px;
	height:747px;
}
div.5 {
	background-image:url(layout/images/Untitled-1_05.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:105px;
	left:60px;
	width:917px;
	height:64px;
}
div.6 {
	background-image:url(layout/images/Untitled-1_06.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:169px;
	left:60px;
	width:466px;
	height:542px;
}
div.7 {
	background-image:url(layout/images/Untitled-1_07.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:169px;
	left:526px;
	width:451px;
	height:1px;
}
div.8 {
	background-image:url(layout/images/Untitled-1_08.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:170px;
	left:526px;
	width:59px;
	height:605px;
}
div.9 {
	background-image:url(layout/images/Untitled-1_09.gif);
	position:absolute;
	margin:0px;
	padding:0px;
	border:0px;
	top:170px;
	left:585px;
	width:392px;
	height:171px;
}

Mogę również wysłać katalog ze stroną jeśli będzie trzeba. Uprzedzam również, że sprawdziłem ścieżki do plików i są ok (obrazki w folderze z plikiem index [podfolder layout/images]).

0

Oj...? Rozumiem, że ten kod jest automatycznie wygenerowany? Pozwolę sobie zauważyć, że HTML jest semantycznie nonsensowny. Jeśli pozostawisz go bez treści, to w Google swojej strony nie uświadczysz ;). Pozycjonowanie bezwzględne w CSS jest nieelastyczne i należy go używać tylko w niektórych przypadkach -- w większości trzeba wykorzystywać inne sposoby, zwykle pozycjonowanie statyczne (rzadziej: względne) i ew. pływanie (float).

Błąd masz taki, że nazwy klas nie mogą być po prostu cyframi. Nie powinny się zaczynać od cyfry. A Ty masz nazwy klas "1", "2" i tak dalej. Zmień to przynajmniej na "c1", "c2" itd. -- ważne, żeby na początku była litera.

Ponownie ostrzegam jednak, że jeśli masz w miarę normalną stronę i chcesz ją zakodować, to nie tędy droga. Jeśli jesteś grafikiem to wiedz, że w miarę porządne zakodowanie strony nie sprowadza się do kliknięcia paru opcji w menu Photoshopa. Niestety, nie da się tego zrobić automatycznie. Trzeba ogarnąć CSS i semantyczny HTML. W przeciwnym wypadku, strona najprawdopodobniej będzie nieelastyczna (tj. nie rozszerzy się gdy dojdzie do niej więcej treści), nie będzie dostępna (tj. googlebotowi ciężko będzie ją zaindeksować) itp.

0

Dziękuje za odpowiedź.

Kod wygenerowany jest przeze mnie ;). Próbowałem różnych atrybutów positioning ale tylko przy absolute szablon się nie rozjechał. Przeglądałem różne kursy (chociażby ten od w3) ale to są tylko "suche" opisy atrybutów. Po prostu nie potrafię ich widocznie zastosować tak, jakbym tego chciał. Może znasz jakiś kurs gdzie jest to lepiej opisane?

Raz jeszcze dziękuje za odpowiedź. Pozdrawiam.

0

Mała rada, to tworzenia CSS użyj SASS

0

@scooby_3:
W takim razie koniecznie przerób jakiś normalny kurs, bo idziesz w złą drogę. Pocieszę Cię (?), że wiele osób na początku nią właśnie idzie, bo pozycjonowanie bezwzględne wydaje im się proste i oczywiste. Niestety, ze względu na brak elastyczności, jest to ślepy zaułek.

Co do kursów, to ja uczyłem się tego tak dawno, że kursów jeszcze nie było. A tych, co były, już nie ma. Teraz nie czytam raczej takich artykułów, bo nie potrzebuję. Ja jestem na takim etapie, że w razie czego mogę sobie zerknąć bezpośrednio do specyfikacji CSS od W3C.

Jednak specyfikacja ta jest stosunkowo słabym źródłem dla webdeveloperów: jest raczej niewygodna w użyciu, skomplikowana, szczegółowa, tworzona raczej z myślą o twórcach silników renderujących przeglądarek niż o webdeveloperach. Specyfikacja mówi także o tym, jak POWINNO być, a nie jak JEST we wszystkich przeglądarkach -- szczególnie starsze wersje IE odbiegają miejscami od specyfikacji i to poważnie.

Mogę polecić kursy, o których SŁYSZAŁEM, że są dobre i mam podstawy by przypuszczać, że są rozsądne.

Po polsku to będzie http://www.kurshtml.boo.pl/ . Kurs traktuje zarówno o HTML, jak i CSS, ponieważ te dwie warstwy są jednak ze sobą związane.

Ostatnio pojawił się też artykuł na A List Apart (w skrócie: ALA) o podstawach pozycjonowania CSS: http://www.alistapart.com/articles/css-positioning-101/ . Nie czytałem artykułu, ale te na ALA mają praktycznie zawsze bardzo wysoką jakość.

0

Cześć,

Dziękuje za odpowiedzi. Biorę się właśnie do czytania. Dam znać czy pomogło.

Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1