(24-12-2010, 19:25)Kartofelek napisał(a): Osobiście dziwie się, że to w ogóle działa.
Pierwsza sprawa - błędne pocięcie strony.
<div class="header">
<center>
Pal licho to. Ale potem umieszczasz menu w header, a takiej potrzeby nie ma. Samo menu to zbiór linków, które nie stanowią całości. Wyłącz style to zobaczysz o czym mówię.
onmouseover="this.src='images/menu_07_on.gif';" menu(1)' onmouseout="this.src='images/menu_07.gif;"
To też jest błędne.
http://doman.art.pl/kursjs/kurs/events.html - przeczytaj
To też pal licho. Ale style - dziwy nad dziwami. Pozycjonoujesz absolutnie względem całej strony, a nie podajesz koordynatów? Dziwne, że ci tego w narożniku nie ustawiło. No i zapominasz o średnikach na końcu linii (.header).
Przy takich lajach naprawdę nie ma co tak kombinować.
<dv class="container">
<h1></h1>
<ul id="menu"></ul>
<div class="content">
</div>
</div>
I tyle w zupełności wystarczy.
Li w Ul sobie floatujesz do lewej, potem dajesz li:hover i żadnego JS nie musisz stosować. Plusy są tego 2. 1- Nie ma JS. 2 - jak zastosujesz technikę CSS sprajtów, wtedy zyskasz na szybkości, czasie itp. Same plusy. 3 - mniej pracy
Moje narzekanie nie ma na celu dokopanie tobie. To tylko wytknięcie nieprawidłowości, które postaraj się nie robić, bo są złe i stwarzają dodatkowych głupich problemów.
Rozumiem i dzięki za krytykę dopiero zaczynam kodować ,jest to mój pierwszy szablon ,który koduje więc wszelkie uwagi będą mile widziane.
Co jest źle pocięte?.
Trochę pozmieniany index oraz .css
Kod:
<html><head><title></title><link rel="stylesheet" type="text/css" href="iloooolo.css" />type="text/css" />
</head>
<body>
<div class="header">
<img src="header.gif">
<div class="menu">
<ul>
<li> <img src="images/menu_00.gif">
<li> <a href="?"><img src="images/menu_01.gif"onmouseover="this.src='images/menu_01_on.gif';" menu(1)' onmouseout="this.src='images/menu_01.gif';"></a>
<li> <a href="?"><img src="images/menu_02.gif"onmouseover="this.src='images/menu_02_on.gif';" menu(1)' onmouseout="this.src='images/menu_02.gif';"></a>
<li> <a href="?"><img src="images/menu_03.gif"onmouseover="this.src='images/menu_03_on.gif';" menu(1)' onmouseout="this.src='images/menu_03.gif';"></a>
<li> <a href="?"><img src="images/menu_04.gif"onmouseover="this.src='images/menu_04_on.gif';" menu(1)' onmouseout="this.src='images/menu_04.gif';"></a>
<li> <a href="?"><img src="images/menu_05.gif"onmouseover="this.src='images/menu_05_on.gif';" menu(1)' onmouseout="this.src='images/menu_05.gif';"></a>
<li> <a href="?"><img src="images/menu_06.gif"onmouseover="this.src='images/menu_06_on.gif';" menu(1)' onmouseout="this.src='images/menu_06.gif';"></a>
<li> <a href="?"><img src="images/menu_07.gif"onmouseover="this.src='images/menu_07_on.gif';" menu(1)' onmouseout="this.src='images/menu_07.gif';"></a>
<li> <a href="?"><img src="images/menu_08.gif"onmouseover="this.src='images/menu_08_on.gif';" menu(1)' onmouseout="this.src='images/menu_08.gif';"></a>
<li> <a href="?"><img src="images/menu_09.gif"onmouseover="this.src='images/menu_09_on.gif';" menu(1)' onmouseout="this.src='images/menu_09.gif';"></a>
<li> <img src="images/menu_10.gif">
</li>
</ul>
</body>
</html>Kod:
html, body {margin:0; padding:0; width:100%; height:100%; text-align:left;}
body{background: url('background.gif') ; width:100%; height:100%;}
.header {
background-repeat: no-repeat;
position:relative
width:100%;
height:100%;
}
.menu{width:1010px; height:35px;}
.menu ul{list-style: none; margin: 0px; padding: 0;}
.menu li{float: left; border:0px;}
.menu img{border:0px;}