Skocz do zawartości
  • 0

Kafle jak na minecraft.net w HTML

Cubixor

Pytanie zadane przez Cubixor,

 Udostępnij

Pytanie

14 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 0
TheMolkaPL

TheMolkaPL 344

Opublikowano
Opublikowano

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
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano

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%;

 

Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Cubixor

Cubixor 7

Opublikowano
  • Autor
Opublikowano
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
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano (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 przez Oedeopol
Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Cubixor

Cubixor 7

Opublikowano
  • Autor
Opublikowano
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
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano
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. 

Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Cubixor

Cubixor 7

Opublikowano
  • Autor
Opublikowano
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:'

IjiepRH.png

Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano


 

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ć

Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Cubixor

Cubixor 7

Opublikowano
  • Autor
Opublikowano (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 przez Cubixor
Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano (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 przez Oedeopol
Odnośnik do komentarza
Udostępnij na innych stronach
  • 0
Cubixor

Cubixor 7

Opublikowano
  • Autor
Opublikowano
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
  • 0
Oedeopol

Oedeopol 67

Opublikowano
Opublikowano
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;

Odnośnik do komentarza
Udostępnij na innych stronach
Nieaktywny
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij
Pytania

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...