Cubixor 7 Opublikowano 29 kwietnia 2017 Udostępnij Opublikowano 29 kwietnia 2017 Hej, Czy da się zrobić w html kafelki takie jak na minecraft.net? Jeśli tak to jak? Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 TheMolkaPL 344 Opublikowano 29 kwietnia 2017 Udostępnij Opublikowano 29 kwietnia 2017 W HTML robisz format, strukturę, wygląd robisz natomiast w CSS. Przede wszystkim każdy kafelek, musi być oddzielnym divem. W każdym kafelku robisz img, którego zawartością będzie grafika. Następnie robisz div, który będzie opisem, oraz a, który będzie przyciskiem. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Gość Ewald Opublikowano 29 kwietnia 2017 Udostępnij Opublikowano 29 kwietnia 2017 Sprawdź kurs Pana Mirosława Zelenta. Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! () Powinien być w tej playliście. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 30 kwietnia 2017 Udostępnij Opublikowano 30 kwietnia 2017 Kafelek - div Tworzysz strukturę. <html> <head> <title>Kafelki</title> </head> <body> <div id="kafelek_pierwszy"/> <div id="kafelek_drugi"/> <div id="kafelek_trzeci"/> <div id="kafelek_czwarty"/> </body> </html> Następnie dodajesz style. Albo dodajesz załącznik w znaczniku <head>, bądź piszesz w znaczniku <style> po znaczniku </body> coś takiego: #kafelek_pierwszy { display: inline-block; width: 500px; height: 250px; background-color: #000; color: #fff } #kafelek_drugi { display: inline-block; width: 500px; height: 250px; background-color: #9d9d9d; color: #fff } #kafelek_trzeci { display: inline-block; width: 500px; height: 250px; background-color: #6d6d6d; color: #fff } #kafelek_czwarty { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; color: #fff Aby dodać tekst, obrazek, cokolwiek do kafelka, musisz usunąć " / " przed zamknięciem znaczników divów, następnie dorobić pod każdym znacznikiem <div id="kafelek_(liczba)"> znacznik </div> i pomiędzy nimi wpisać np. <img src="obrazek.png">. Później musisz ustalić jak obrazek ma się pozycjonować. Więc wpisujesz coś takiego: #kafelek_pierwszy > img { width: 100%; height: 100%; Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 20 godzin temu, Oedeopol napisał: Kafelek - div Tworzysz strukturę. <html> <head> <title>Kafelki</title> </head> <body> <div id="kafelek_pierwszy"/> <div id="kafelek_drugi"/> <div id="kafelek_trzeci"/> <div id="kafelek_czwarty"/> </body> </html> Następnie dodajesz style. Albo dodajesz załącznik w znaczniku <head>, bądź piszesz w znaczniku <style> po znaczniku </body> coś takiego: #kafelek_pierwszy { display: inline-block; width: 500px; height: 250px; background-color: #000; color: #fff } #kafelek_drugi { display: inline-block; width: 500px; height: 250px; background-color: #9d9d9d; color: #fff } #kafelek_trzeci { display: inline-block; width: 500px; height: 250px; background-color: #6d6d6d; color: #fff } #kafelek_czwarty { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; color: #fff Aby dodać tekst, obrazek, cokolwiek do kafelka, musisz usunąć " / " przed zamknięciem znaczników divów, następnie dorobić pod każdym znacznikiem <div id="kafelek_(liczba)"> znacznik </div> i pomiędzy nimi wpisać np. <img src="obrazek.png">. Później musisz ustalić jak obrazek ma się pozycjonować. Więc wpisujesz coś takiego: #kafelek_pierwszy > img { width: 100%; height: 100%; Możesz dać gotowy przykład bo mi coś nie idzie. (Chce też aby po kliknięciu w kafelek przenosiło do innej strony) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 1 maja 2017 Udostępnij Opublikowano 1 maja 2017 (edytowane) 51 minut temu, Cubixor napisał: Możesz dać gotowy przykład bo mi coś nie idzie. (Chce też aby po kliknięciu w kafelek przenosiło do innej strony) Okej, tylko musisz chwile poczekać Edit: <html> <head> <title>Kafelki</title> </head> <body> <a href="pierwszy"> <div id="kafelek_pierwszy"> <h1>Kafelek pierwszy</h1> </div> </a> <a href="drugi"> <div id="kafelek_drugi"> <h1>Kafelek drugi</h1> </div> </a> <a href="trzeci"> <div id="kafelek_pierwszy"> <h1>Kafelek trzeci</h1> </div> </a> <a href="czwarty"> <div id="kafelek_czwarty"> <h1>Kafelek czwarty</h1> </div> </a> </body> <style> #kafelek_pierwszy { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; z-index: 999; } #kafelek_drugi { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_trzeci { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_czwarty { display: inline-block; width: 350px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_pierwszy > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_drugi > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_trzeci > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_czwarty > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_pierwszy:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_drugi:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_trzeci:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_czwarty:hover > h1 { opacity: 1; transition: 0.1s; } </html> Gotowe. Edytowane 1 maja 2017 przez Oedeopol Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 3 godziny temu, Oedeopol napisał: Okej, tylko musisz chwile poczekać Edit: Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Ukryj zawartość <html> <head> <title>Kafelki</title> </head> <body> <a href="pierwszy"> <div id="kafelek_pierwszy"> <h1>Kafelek pierwszy</h1> </div> </a> <a href="drugi"> <div id="kafelek_drugi"> <h1>Kafelek drugi</h1> </div> </a> <a href="trzeci"> <div id="kafelek_pierwszy"> <h1>Kafelek trzeci</h1> </div> </a> <a href="czwarty"> <div id="kafelek_czwarty"> <h1>Kafelek czwarty</h1> </div> </a> </body> <style> #kafelek_pierwszy { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; z-index: 999; } #kafelek_drugi { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_trzeci { display: inline-block; width: 500px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_czwarty { display: inline-block; width: 350px; height: 250px; background-color: #3d3d3d; margin-left: 1%; text-align: center; } #kafelek_pierwszy > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_drugi > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_trzeci > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_czwarty > h1 { opacity: 0; margin-top: 100px; font-family: Verdana; color: #fff; transition: 0.5s; } #kafelek_pierwszy:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_drugi:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_trzeci:hover > h1 { opacity: 1; transition: 0.1s; } #kafelek_czwarty:hover > h1 { opacity: 1; transition: 0.1s; } </html> Gotowe. Dobra a gdzie dać link aby na kfalu był obrazek z linku? Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 1 maja 2017 Udostępnij Opublikowano 1 maja 2017 1 minutę temu, Cubixor napisał: Dobra a gdzie dać link aby na kfalu był obrazek z linku? Obrazek z linku? Jeśli chodzi ci o <img src="[sciezka]"> To wpisujesz <img src="[sciezka]"> pod znacznikami <h1> i dopisujesz w stylach coś takiego: #kafelek_pierwszy > img { width: 100%; height: 100%; } Itd. Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 10 minut temu, Oedeopol napisał: Obrazek z linku? Jeśli chodzi ci o <img src="[sciezka]"> To wpisujesz <img src="[sciezka]"> pod znacznikami <h1> i dopisujesz w stylach coś takiego: #kafelek_pierwszy > img { width: 100%; height: 100%; } Itd. Zrobiłem to co mówiłeś na jednym kafelku (dla testu a jest ich 5 bo 1 sam se dorobiłem) i oto co wyszło:' Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 1 maja 2017 Udostępnij Opublikowano 1 maja 2017 1 minutę temu, Cubixor napisał: Zrobiłem to co mówiłeś na jednym kafelku (dla testu a jest ich 5 bo 1 sam se dorobiłem) i oto co wyszło:' Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Ukryj zawartość Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Dodaj do wszystkich kafelków obrazki a następnie do każdego z nich w sekcji <style> dodaj linijke margin-top: -(ileśtam)%, w #kafelek_(numer) > img i powinno działać Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 (edytowane) 2 godziny temu, Oedeopol napisał: Dodaj do wszystkich kafelków obrazki a następnie do każdego z nich w sekcji <style> dodaj linijke margin-top: -(ileśtam)%, w #kafelek_(numer) > img i powinno działać Teraz problem jest z tytułami kafelków... Wygląda to dziwnie. <wideo zostało usunięte> Edytowane 1 maja 2017 przez Cubixor Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 1 maja 2017 Udostępnij Opublikowano 1 maja 2017 (edytowane) 6 minut temu, Cubixor napisał: Teraz problem jest z tytułami kafelków... Wygląda to dziwnie. Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Hmm.. To nie jest takie proste. Wydaje mi się ze w tym przypadku trzeba zastosować skrypty. Edit:Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Poczytaj to może ci coś podpowie. Edytowane 1 maja 2017 przez Oedeopol Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 11 minut temu, Oedeopol napisał: Hmm.. To nie jest takie proste. Wydaje mi się ze w tym przypadku trzeba zastosować skrypty. Edit:Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść! Poczytaj to może ci coś podpowie. Dobra, poczytam ale jeszcze jeden: jak widziałeś kafelki przylegają do dirtowego pasku i nie wygląda to najlepiej. Da się zrobić jakiś odstęp między tym paskiem a kafelkami? Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Oedeopol 67 Opublikowano 1 maja 2017 Udostępnij Opublikowano 1 maja 2017 9 minut temu, Cubixor napisał: Dobra, poczytam ale jeszcze jeden: jak widziałeś kafelki przylegają do dirtowego pasku i nie wygląda to najlepiej. Da się zrobić jakiś odstęp między tym paskiem a kafelkami? Tak, wystarczy ze dopiszesz do #kafelek_(numer) - na przykład: margin-top: 100px; Cubixor 1 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
0 Cubixor 7 Opublikowano 1 maja 2017 Autor Udostępnij Opublikowano 1 maja 2017 Wielkie dzięki ale mam następny, osobny problem. Jeśli chcesz możesz pomóc Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść!. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Pytanie
Cubixor 7
Hej,
Czy da się zrobić w html kafelki takie jak na minecraft.net? Jeśli tak to jak?
Odnośnik do komentarza
Udostępnij na innych stronach
14 odpowiedzi na to pytanie
Rekomendowane odpowiedzi