Autor
Wiadomość
RokkyelRockey
Tytuł: HTML
Napisane: 17 cze 2012, 15:47
Pierwszy gamepad
Dołączył(a): 08 cze 2012, 19:32Posty: 61
Siemka, otóż piszę stronę w HTML i borykam się z pewnym problemem. Muszę wyśrodkować całą stronę ale nie wiem jak to zrobić. <centre> tu nie pomoże ponieważ każdy element jest ustawiany za pomocą style="position: absolute; left: 0px; top: 0px;"
Góra
loneirus
Tytuł: Re: HTML
Napisane: 17 cze 2012, 16:15
Nałogowiec
Dołączył(a): 22 mar 2012, 03:11Posty: 3074
Każdy? trochę to niewygodne. Pokaż no źródło, ogólny zarys struktury.
Na szybko, na "zgadywanie":
Kod:
<div style="position: relative; width: 500px; margin: 0 auto; text-align: center; border: 1px solid black;"> <div style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px; border: 1px solid blue;"></div> <div style="position: absolute; left: 20px; top: 0px; width: 10px; height: 10px; border: 1px solid green;"></div> <div style="position: absolute; left: 40px; top: 0px; width: 10px; height: 10px; border: 1px solid red;"></div> </div>
- pojemniki z
absolute zamknięte w jednym, który ma ustaloną szerokość, marginesy Oraz pozycjonowanie.
Góra
RokkyelRockey
Tytuł: Re: HTML
Napisane: 17 cze 2012, 18:53
Pierwszy gamepad
Dołączył(a): 08 cze 2012, 19:32Posty: 61
Robię strone klanu:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="Shortcut icon" href="favicon.ico" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Reply-to" content="forh@op.pl" /> <meta name="Keywords" content="FORH, Clan, Factory, of, Red, Hawk, Crysis, 2" /> <meta name="Description" content="Strona Klanu Factory of Red Hawk" /> <meta http-equiv="content-language" content="pl" /> <meta name="author" content="RokkyelRockey" /> <meta name="Robots" content ="all" /> <title>Clan - Factory of Red Hawk</title> </head> <body> <div style="position: relative; width: 800px; margin-left: -400px; left: 50%;"> <!-- Obrazy --> <span style="font-family: Tekton Pro Ext; color: white;"> <a href="O_klanie.html"><img src="Obrazy/Menu 2.png" style="position: absolute; left: 408px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Forum" onmouseover="this.src = 'Obrazy/Menu 2a.png'" onmouseout="this.src = 'Obrazy/Menu 2.png'" onmousedown="this.src = 'Obrazy/Menu 2b.png'" onmouseup="this.src = 'Obrazy/Menu 2.png'" /></a> <a href="http://forh-forum.comlu.com/"><img src="Obrazy/Menu 3.png" style="position: absolute; left: 517px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Galeria" onmouseover="this.src = 'Obrazy/Menu 3a.png'" onmouseout="this.src = 'Obrazy/Menu 3.png'" onmousedown="this.src = 'Obrazy/Menu 3b.png'" onmouseup="this.src = 'Obrazy/Menu 3.png'" /></a> <a href="Informacje.html"><img src="Obrazy/Menu 4.png" style="position: absolute; left: 626px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Kontakt" onmouseover="this.src = 'Obrazy/Menu 4a.png'" onmouseout="this.src = 'Obrazy/Menu 4.png'" onmousedown="this.src = 'Obrazy/Menu 4b.png'" onmouseup="this.src = 'Obrazy/Menu 4.png'" /></a> <a href="Pozostałe.html"><img src="Obrazy/Menu 5.png" style="position: absolute; left: 735px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Informacje" onmouseover="this.src = 'Obrazy/Menu 5a.png'" onmouseout="this.src = 'Obrazy/Menu 5.png'" onmousedown="this.src = 'Obrazy/Menu 5b.png'" onmouseup="this.src = 'Obrazy/Menu 5.png'" /></a> <img src="Obrazy/Karta 1.png" style="position: absolute; left: 45px; top: 275.5px; z-index: -2; width: 799px; height: 1200px; border: 0;" /> <img src="Obrazy/Karta 2.png" style="position: absolute; left: 435.5px; top: 63px; z-index: 0; width: 381px; height: 189px; border: 0;" onmouseover="this.src = 'Obrazy/Karta 2a.png'" onmouseout="this.src = 'Obrazy/Karta 2.png'" onmousedown="this.src = 'Obrazy/Karta 2b.png'" onmouseup="this.src = 'Obrazy/Karta 2.png'" /> <a href="http://translate.google.pl/translate?sl=pl&tl=en&js=n&prev=_t&hl=pl&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fforh-clan.webatu.com%2F&act=url"><img src="Obrazy/Tłumaczenie 1a.png" style="position: absolute; left: 118px; top: 730px; z-index: 0; width: 172px; height: 125px; border: 0;" onmouseover="this.src = 'Obrazy/Tłumaczenie 1.png'" onmouseout="this.src = 'Obrazy/Tłumaczenie 1a.png'" onmousedown="this.src = 'Obrazy/Tłumaczenie 1.png'" onmouseup="this.src = 'Obrazy/Tłumaczenie 1a.png'" /></a> <img src="Obrazy/Menu P.png" style="position: absolute; left: 68px; top: 298px; z-index: -2; width: 272px; height: 361px; border: 0;" /> <img src="Obrazy/Menu Pa.png" style="position: absolute; left: 68px; top: 666px; z-index: -2; width: 272px; height: 240px; border: 0;" /> <img src="Obrazy/Menu Pb.png" style="position: absolute; left: 68px; top: 924.4px; z-index: -2; width: 272px; height: 336px; border: 0;" /> <img src="Obrazy/Twórca.png" style="position: absolute; left: 68px; top: 1268px; z-index: -2; width: 272px; height: 123px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 298px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 664px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 1029.9px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <a target="_blank" href="http://crysiscore.pl/"><img src="Obrazy/Polecane 1.png" style="position: absolute; left: 116.5px; top: 980px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="http://crysis2grom.xup.pl/"><img src="Obrazy/Polecane 2.png" style="position: absolute; left: 116.5px; top: 1030px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1080px; z-index: -2; width: 167.5px; height: 45px; border: 0;"/></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1130px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1180px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a href="index.html"><img src="Obrazy/Intro.png" alt="Intro" class="style1" style="position: absolute; left: 45px; top: 0px; z-index: 0; width: 363.5px; height: 250px; border: 0;" /></a> <!-- Koniec Obrazów --> <!-- Tekst --> <span style="font-family: Tekton Pro Ext; font-size: 13pt; color: black;"> <a style="position: absolute; left: 603px; top: 71px; z-index: 0">Menu:<a> <a style="position: absolute; left: 179px; top: 301.5px; z-index: 0">Spis:<a> <a style="position: absolute; left: 145px; top: 669px; z-index: 0">Tłumaczenie:<a> <a style="position: absolute; left: 156px; top: 927px; z-index: 0">Polecamy:<a> </span> <!-- Post 1 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black; position: absolute; left: 381px; top: 305px; z-index: 0">Oglądaj nasze bitwy na żywo</a> <iframe style="position: absolute; left: 386px; top: 349.5px; z-index: 0; width: 409px; 292px;" src="http://cdn.livestream.com/embed/battleliveforh?layout=4&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc&allowchat=true&height=385&width=640" frameborder="0" scrolling="no"></iframe> <!-- Post 2 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black; position: absolute; left: 381px; top: 670px; z-index: 0">Youtube.</a> <img src="Obrazy/youtube.png" style="position: absolute; left: 396.5px; top: 697px; z-index: 0; width: 380px; height: 190px; border: 0;" /> <a style="position: absolute; left: 389px; top: 852px; z-index: 0"> Powstał oficjalny kanał Youtube naszego klanu.<br /> Od czasu do czasu będą tam pojawiać się filmiki z<br /> naszych starć i treningów, poradniki, filmy<br /> tpis & tricks i oraz inne. Będziemy też informować<br /> was o nowych audycjach na Livestream'ie więc<br /> warto zasubskrybować. Będzie to też forma<br /> możliwej komunikacjii pomimo Twittera.<br /> Można nas oglądać pod</a> <!-- Post 3 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black;position: absolute; left: 381px; top: 1035px; z-index: 0">Tytuł 3</a> <!-- Koniec Tekstu --> </span> </div> </body> </html>
Ifrexalis : z rozpędu zmieniłem Ci post, tj. kod, podmieniłem zmodyfikowanym. Pardon .
Góra
loneirus
Tytuł: Re: HTML
Napisane: 17 cze 2012, 20:24
Nałogowiec
Dołączył(a): 22 mar 2012, 03:11Posty: 3074
a myślałem, że widziałem już dużo
. Totalnie pogmatwane, wszędzie ogromne wartości, czasem z połówkami. Dorobiłeś sobie niepotrzebnie roboty, gdyż ten układ można osiągnąć znacznie prościej. Ponadto masa innych błędów - część poprawiłem.
Trochę to przepisałem, teoretycznie wyśrodkowałem (bez głębszych zmian się nie obejdzie):
Spoiler:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="Shortcut icon" href="favicon.ico" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Reply-to" content="forh@op.pl" /> <meta name="Keywords" content="FORH, Clan, Factory, of, Red, Hawk, Crysis, 2" /> <meta name="Description" content="Strona Klanu Factory of Red Hawk" /> <meta http-equiv="content-language" content="pl" /> <meta name="author" content="RokkyelRockey" /> <meta name="Robots" content ="all" /> <title>Clan - Factory of Red Hawk</title> </head> <body> <div style="position: relative; width: 800px; margin-left: -400px; left: 50%;"> <!-- Obrazy --> <span style="font-family: Tekton Pro Ext; color: white;"> <a href="O_klanie.html"><img src="Obrazy/Menu 2.png" style="position: absolute; left: 408px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Forum" onmouseover="this.src = 'Obrazy/Menu 2a.png'" onmouseout="this.src = 'Obrazy/Menu 2.png'" onmousedown="this.src = 'Obrazy/Menu 2b.png'" onmouseup="this.src = 'Obrazy/Menu 2.png'" /></a> <a href="http://forh-forum.comlu.com/"><img src="Obrazy/Menu 3.png" style="position: absolute; left: 517px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Galeria" onmouseover="this.src = 'Obrazy/Menu 3a.png'" onmouseout="this.src = 'Obrazy/Menu 3.png'" onmousedown="this.src = 'Obrazy/Menu 3b.png'" onmouseup="this.src = 'Obrazy/Menu 3.png'" /></a> <a href="Informacje.html"><img src="Obrazy/Menu 4.png" style="position: absolute; left: 626px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Kontakt" onmouseover="this.src = 'Obrazy/Menu 4a.png'" onmouseout="this.src = 'Obrazy/Menu 4.png'" onmousedown="this.src = 'Obrazy/Menu 4b.png'" onmouseup="this.src = 'Obrazy/Menu 4.png'" /></a> <a href="Pozostałe.html"><img src="Obrazy/Menu 5.png" style="position: absolute; left: 735px; top: 0px; z-index: 0; width: 109px; height: 35.5px; border: 0;" alt="Informacje" onmouseover="this.src = 'Obrazy/Menu 5a.png'" onmouseout="this.src = 'Obrazy/Menu 5.png'" onmousedown="this.src = 'Obrazy/Menu 5b.png'" onmouseup="this.src = 'Obrazy/Menu 5.png'" /></a> <img src="Obrazy/Karta 1.png" style="position: absolute; left: 45px; top: 275.5px; z-index: -2; width: 799px; height: 1200px; border: 0;" /> <img src="Obrazy/Karta 2.png" style="position: absolute; left: 435.5px; top: 63px; z-index: 0; width: 381px; height: 189px; border: 0;" onmouseover="this.src = 'Obrazy/Karta 2a.png'" onmouseout="this.src = 'Obrazy/Karta 2.png'" onmousedown="this.src = 'Obrazy/Karta 2b.png'" onmouseup="this.src = 'Obrazy/Karta 2.png'" /> <a href="http://translate.google.pl/translate?sl=pl&tl=en&js=n&prev=_t&hl=pl&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fforh-clan.webatu.com%2F&act=url"><img src="Obrazy/Tłumaczenie 1a.png" style="position: absolute; left: 118px; top: 730px; z-index: 0; width: 172px; height: 125px; border: 0;" onmouseover="this.src = 'Obrazy/Tłumaczenie 1.png'" onmouseout="this.src = 'Obrazy/Tłumaczenie 1a.png'" onmousedown="this.src = 'Obrazy/Tłumaczenie 1.png'" onmouseup="this.src = 'Obrazy/Tłumaczenie 1a.png'" /></a> <img src="Obrazy/Menu P.png" style="position: absolute; left: 68px; top: 298px; z-index: -2; width: 272px; height: 361px; border: 0;" /> <img src="Obrazy/Menu Pa.png" style="position: absolute; left: 68px; top: 666px; z-index: -2; width: 272px; height: 240px; border: 0;" /> <img src="Obrazy/Menu Pb.png" style="position: absolute; left: 68px; top: 924.4px; z-index: -2; width: 272px; height: 336px; border: 0;" /> <img src="Obrazy/Twórca.png" style="position: absolute; left: 68px; top: 1268px; z-index: -2; width: 272px; height: 123px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 298px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 664px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <img src="Obrazy/Post.png" style="position: absolute; left: 363.5px; top: 1029.9px; z-index: -2; width: 454px; height: 361px; border: 0;" /> <a target="_blank" href="http://crysiscore.pl/"><img src="Obrazy/Polecane 1.png" style="position: absolute; left: 116.5px; top: 980px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="http://crysis2grom.xup.pl/"><img src="Obrazy/Polecane 2.png" style="position: absolute; left: 116.5px; top: 1030px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1080px; z-index: -2; width: 167.5px; height: 45px; border: 0;"/></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1130px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a target="_blank" href="link do strony"><img src="Obrazy/Polecane 3.png" style="position: absolute; left: 116.5px; top: 1180px; z-index: -2; width: 167.5px; height: 45px; border: 0;" /></a> <a href="index.html"><img src="Obrazy/Intro.png" alt="Intro" class="style1" style="position: absolute; left: 45px; top: 0px; z-index: 0; width: 363.5px; height: 250px; border: 0;" /></a> <!-- Koniec Obrazów --> <!-- Tekst --> <span style="font-family: Tekton Pro Ext; font-size: 13pt; color: black;"> <a style="position: absolute; left: 603px; top: 71px; z-index: 0">Menu:<a> <a style="position: absolute; left: 179px; top: 301.5px; z-index: 0">Spis:<a> <a style="position: absolute; left: 145px; top: 669px; z-index: 0">Tłumaczenie:<a> <a style="position: absolute; left: 156px; top: 927px; z-index: 0">Polecamy:<a> </span> <!-- Post 1 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black; position: absolute; left: 381px; top: 305px; z-index: 0">Oglądaj nasze bitwy na żywo</a> <iframe style="position: absolute; left: 386px; top: 349.5px; z-index: 0; width: 409px; 292px;" src="http://cdn.livestream.com/embed/battleliveforh?layout=4&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc&allowchat=true&height=385&width=640" frameborder="0" scrolling="no"></iframe> <!-- Post 2 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black; position: absolute; left: 381px; top: 670px; z-index: 0">Youtube.</a> <img src="Obrazy/youtube.png" style="position: absolute; left: 396.5px; top: 697px; z-index: 0; width: 380px; height: 190px; border: 0;" /> <a style="position: absolute; left: 389px; top: 852px; z-index: 0"> Powstał oficjalny kanał Youtube naszego klanu.<br /> Od czasu do czasu będą tam pojawiać się filmiki z<br /> naszych starć i treningów, poradniki, filmy<br /> tpis & tricks i oraz inne. Będziemy też informować<br /> was o nowych audycjach na Livestream'ie więc<br /> warto zasubskrybować. Będzie to też forma<br /> możliwej komunikacjii pomimo Twittera.<br /> Można nas oglądać pod</a> <!-- Post 3 --> <a style="font-family: Tekton Pro Ext; font-size: 14pt; color: black;position: absolute; left: 381px; top: 1035px; z-index: 0">Tytuł 3</a> <!-- Koniec Tekstu --> </span> </div> </body> </html>
.
Góra
RokkyelRockey
Tytuł: Re: HTML
Napisane: 17 cze 2012, 20:33
Pierwszy gamepad
Dołączył(a): 08 cze 2012, 19:32Posty: 61
Okey. Wielkie dzięki. Muszę parę rzeczy poprawić ale nie jest źle
Góra
loneirus
Tytuł: Re: HTML
Napisane: 17 cze 2012, 20:38
Nałogowiec
Dołączył(a): 22 mar 2012, 03:11Posty: 3074
Szczerze? jest. PS. popraw też deklarację strony, przejściówka html 4.01 jest pod ie6/5/.., a te wersje są oficjalnie "pogrzebane" (popularne w Chinach ludowych, dodam).
Góra
RokkyelRockey
Tytuł: Re: HTML
Napisane: 17 cze 2012, 21:59
Pierwszy gamepad
Dołączył(a): 08 cze 2012, 19:32Posty: 61
Jest też jeden wątek z zabezpieczeniem podstrony. Chciałbym zrobić podstronę zabezpieczaną hasłem, tak by dopiero po wpisaniu hasła przechodziła na nią stronę. Użyłbym
Kod:
<form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <input type="password" name="password" /> <input type="submit" value="Wyślij" /> </form>
jednak hasłem jest nazwa podstrony. Jest masa programów którymi można pobrać z całego serwera wszystkie pliki (nawet w firefox jest taka opcja), wraz z daną podstroną i po otworzeniu jej w "warunkach offline" można by zobaczyć jej zawartość, czego nie chcę. Dlatego mam dwa wyjścia:
1. Zrobić hasło w php
2. Zabezpieczyć stronę przed pobraniem.
Myślę że to drugie dało by mi więcej pożytku gdybym musiał na serwerze coś przechować, czym nie chciałbym się pochwalić (na przykład zdjęcia z wyjazdu, na którym troszeczkę zaszalałem
albo jakieś informacje) z powodu reinstalacjii Windowsa itp.
Problem: nie wiem jak ją zabezpieczyć przed pobraniem. W Google szukałem trochę ale znalazłem tylko możliwość szyfrowania kodu. Jednak kiedy nazwy danych podstron zostaną komuś pokazane on je po prostu wpisuje w formularz i po kłopocie.
Góra
Peterek
Tytuł: Re: HTML
Napisane: 17 cze 2012, 22:03
Pierwszy gamepad
Dołączył(a): 28 lut 2012, 21:15Posty: 77Lokalizacja: Stalowa Wola / Kraków
Polecam się wziąć za naukę php, przyda Ci się nie tylko do zabezpieczania podstron
Góra
RokkyelRockey
Tytuł: Re: HTML
Napisane: 18 cze 2012, 06:29
Pierwszy gamepad
Dołączył(a): 08 cze 2012, 19:32Posty: 61
Php nauczę się tak czy siak. Przydatne jest do robienia forów i wielu innych opcji. Jest to też lepsze zabezpieczenie ponieważ zabezpieczenie leży po stronie MySQL i serwera a nie po mojej jako komputera. Tyle że to by oznaczało zaczynanie strony od nowa, a mnie trochę goni czas :/
Góra
Ksawery
Tytuł: Re: HTML
Napisane: 23 lip 2012, 00:22
Casual
Dołączył(a): 23 lip 2012, 00:19Posty: 0
Jak juz nie chcesz sie uczyc HTML5 to polecam chociaz wersje 4.0 Strict.
_________________Hosting serwerow gier
Góra