|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
Problem tło
|
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
Witam
Mam problem zrobiłem tło auto dopasowujace sie do rodzielczosci , ktore znalazlem na jakiejs stronie. Problemem jest to ze przyciski sa widoczne ale nie mozna ich nacisnac i sie nie podswietlaja ,a gdy nacisne prawym przycisk na ktoryms z nich zeby zapisac obrazek to sciaga tlo nie przycisk.
Kod: <html><head><title></title><link rel="stylesheet" type="text/css" href="iloooolo.css" /><script src="js/bbcode.js" language="jscript" type="text/javascript"></script><link rel="stylesheet" href="just.css" type="text/css" />
</head>
<body>
<div>
<img id="background" src="background.gif" alt="" title="" />
</div>
<div class="header">
<center><img src="header.gif"></center>
<div class="menu">
<img src="images/menu_00.gif">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<img src="images/menu_10.gif">
</div>
</body>
</html>
Kod: html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
.header {
background-repeat: no-repeat;
background-position: 50% 0px;
position:absolute
width:100%;
height:100%;
}
.menu ul{list-style: none; margin: 0px; padding: 0; position:absolute;}
.menu li{float: left; border:0px;}
.menu img{border:0px;}
Liczba postów: 90
Liczba wątków: 29
Dołączył: 22-12-2009
Reputacja:
1
Mógłbyś podać adres tej strony?
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
robie to narazie na komputerze
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
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.
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
24-12-2010, 23:32
(Ten post był ostatnio modyfikowany: 24-12-2010, 23:37 przez trolololo.)
(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;}
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
25-12-2010, 02:12
(Ten post był ostatnio modyfikowany: 25-12-2010, 02:14 przez Kartofelek.)
No dobra. Po wigilijnej imprezie mogę ci odpowiedzieć na twoje pytanie.
Menu. Nigdy nie rób menu w taki sposób.
Menu powinno wyglądać tak:
Kod: <ul class="menu">
<li class="menu_link1"><a href="">To jest pierwszy link</a></li>
<li class="menu_link1"><a href="">To jest drugi link</a></li>
</ul>
Potem w stylach obrabiasz to tak:
Kod: .menu {height:20px;}
.menu li {backgrouund:url(menu_sprite.gif) no-repeat; width:100px; height:20px; float:left;}
.menu li a {display:block; text-indent:-999px; overflow:hidden; width100%; height:20px; cursor:pointer;}
.menu_link1 {background-position:0 0;}
.menu_link1:hover {background-position:0 -20px;}
.menu_link2 {background-position:-100px 0;}
.menu_link2:hover {background-position:-100px -20px;}
.....
Pokazałem ci tutaj metodę sprite, czyli taką w której wszystkie obrazki menu są w 1 obrazku. Pozycje początkowe są ułożone obok siebie, a pozycje hover są pod nimi czyli
[poz1 ][poz2 ][poz3 ]....
[poz1hover][poz2hover][poz3hover]....
Oczywiście w necie lepiej ci to wyjaśnią. Wystarczy, że poszukasz CSS SPRITE itp.
---------------
Cytat:<link rel="stylesheet" type="text/css" href="iloooolo.css" />type="text/css" />
Błąd. Śmietnik na końcu linijki. Zwracaj na to uwagę.
Cytat:<div class="header">
<img src="header.gif">
To nie jest najlepsze rozwiązanie. Wyłącz style w przeglądarce - zobaczysz czemu. Lepiej będzie tak:
Kod: <h1 class="header">To jest nagłówek strony</h1>
a potem w stylach
Kod: .header {background:url(header.gif) no-repeat; overflow:hidden; wdth:...px; height:....px; text-indent:-999px;}
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
Jak wysrodkowac header bo zmienilem na ten sposob co napisany jest wyzej i proboje wysrodkowac w stylach i nic.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
<div class="container">
<h1 class="header"></h1>
<ul class="menu"></ul>
<div class="content"></div>
<div class="footer"></div>
</div>
.container {width:960px; margin:0 auto;}
.header {width:960px; height:150px; oveflow:hidden; text-indent:-999px;}
.menu {width:960px; height:30px;}
.menu li {float:left; width....; height:30px;}
.menu li a {display:block; width:100%; height:30px; overflow:hidden; text-indent:-999px;}
.content {width:960px;}
.footer {width:960px; clear:both; height:100px;}
Tak naprawdę width nie będzie potrzebny, bo te elementy są typu block czyli mają width 100%.
Ogólnie najlepiej stosować właśnie taką konstrukcję. To taka baaardzo ogólna struktura.
Jezeli jednak masz umieszczony h1 jako oddzielny element, wtedy centrujesz go
margin:0 auto
Piewsza wartość to y, druga to x. Jeżeli ustawiona jest na auto - wtedy centruje dany element. Ale tylko wtedy gdy ma on ustawioną szerokość.
Liczba postów: 6
Liczba wątków: 1
Dołączył: 24-12-2010
Reputacja:
0
26-12-2010, 14:49
(Ten post był ostatnio modyfikowany: 26-12-2010, 14:50 przez trolololo.)
No i znow problem.Pisales zebym poczytal o css sprites zrobilem to, wszystko jest ladnie poza tym ze menu jest prawie na samym dole.
Kod: <html><head><title></title><link rel="stylesheet" type="text/css" href="iloooolo.css" /></head>
<body>
<div class="container">
<h1 class="header"></h1>
<ul id="awesome-menu">
<li><a href="#ninja" class="lmenu">Ninja</a></li>
<li><a href="#zombie" class="glowna">Zombie</a></li>
<li><a href="#robot" class="aktualnosci">Robot</a></li>
<li><a href="#assassin" class="organizacja">Assassin</a></li>
<li><a href="#jedi" class="jedi">mecze</a></li>
<li><a href="#srninja" class="osiagniecia">Ninja</a></li>
<li><a href="#srombie" class="media">Zombie</a></li>
<li><a href="#srobot" class="tv">Robot</a></li>
<li><a href="#srassassin" class="sponsorzy">Assassin</a></li>
<li><a href="#srjedi" class="kontakt">Jedi</a></li>
<li><a href="#srgow" class="pmenu">Jedi</a></li>
</ul>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
Kod: body{color:#fff; margin:0; padding:0; background:#000000 url(background.gif) no-repeat top center; font:12px arial,tahoma,Geneva,sans-serif; text-shadow:0 -1px 0 #000;}
.container {width:1010px; margin:0 auto;}
.header {background:url(header.gif) no-repeat; overflow:hidden; width:100%; height:100%; text-indent:-999px;}
ul#awesome-menu {
width: 1010px; margin: 0 auto;
list-style: none;
}
ul#awesome-menu li { display: inline; }
ul#awesome-menu li a {
display: block; float: left; height: 36px;
background-image: url(menu_sprite.gif); text-indent: -9999px;overflow:hidden
}
ul#awesome-menu li a.lmenu {
width: 67px; background-position: 0 0;
}
ul#awesome-menu li a.glowna {
width: 136px; background-position: -67px 0;
}
ul#awesome-menu li a.aktualnosci {
width: 111px; background-position: -203px 0;
}
ul#awesome-menu li a.organizacja {
width: 89px; background-position: -304px 0;
}
ul#awesome-menu li a.mecze {
width: 77px; background-position: -381px 0;
}
ul#awesome-menu li a.osiagniecia {
width: 93px; background-position: -474px 0;
}
ul#awesome-menu li a.media {
width: 76px; background-position: -550px 0;
}
ul#awesome-menu li a.tv {
width: 88px; background-position: -638px 0;
}
ul#awesome-menu li a.sponsorzy {
width: 90px; background-position: -728px 0;
}
ul#awesome-menu li a.kontakt {
width: 82px; background-position: -810px 0;
}
ul#awesome-menu li a.pmenu {
width: 101px; background-position: -911px 0;
}
ul#awesome-menu li a.lmenu:hover, ul#awesome-menu li a.lmenu:focus {
background-position: 0 -36px;
}
ul#awesome-menu li a.glowna:hover, ul#awesome-menu li a.glowna:focus {
background-position: -67px -36px;
}
ul#awesome-menu li a.aktualnosci:hover, ul#awesome-menu li a.aktualnosci:focus {
background-position: -203px -36px;
}
ul#awesome-menu li a.organizacja:hover, ul#awesome-menu li a.organizacja:focus {
background-position: -304px -36px;
}
ul#awesome-menu li a.mecze:hover, ul#awesome-menu li a.mecze:focus {
background-position: -381px -36px;
}
ul#awesome-menu li a.osiagniecia:hover, ul#awesome-menu li a.osiagniecia:focus {
background-position: -474px -36px;
}
ul#awesome-menu li a.media:hover, ul#awesome-menu li a.media:focus {
background-position: -550px -36px;
}
ul#awesome-menu li a.tv:hover, ul#awesome-menu li a.tv:focus {
background-position: -638px -36px;
}
ul#awesome-menu li a.sponsorzy:hover, ul#awesome-menu li a.sponsorzy:focus {
background-position: -728px -36px;
}
ul#awesome-menu li a.kontakt:hover, ul#awesome-menu li a.kontakt:focus {
background-position: -810px -36px;
}
ul#awesome-menu li a.pmenu:hover, ul#awesome-menu li a.pmenu:focus {
background-position: -911px -36px;
}
a { outline: none; }
.content {width:1010px;}
.footer {width:1001px; clear:both; height:100px;}
|
Użytkownicy przeglądający ten wątek: 1 gości
|
|
|
Sponsorzy i przyjaciele
|
|
|
