• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kurs Html odcinek 3 - Problem z kafelkami i ich kolorem

VPS Starter Arubacloud
0 głosów
495 wizyt
pytanie zadane 20 lipca 2015 w HTML i CSS przez jacob47 Nowicjusz (120 p.)
Witam, zatrzymałem się na kursie html odcinek 3, przy dodawniu trzeciego kafelka. Problem w tym, iż kafelek 3 mam taki sam kolor jak 2 czyli szary #666666, mimo iż w kodzie wpisałem kod na jasno zielony czyli background-color: #93c748. Czwarty kafelek nie wyświetla mi się wcale. Nie wiem, w czym problem, proszę o pomoc. Pozdrawiam :)

1 odpowiedź

+1 głos
odpowiedź 20 lipca 2015 przez Eimens Maniak (69,240 p.)
podaj cały kod, html'a i css'a
komentarz 20 lipca 2015 przez jacob47 Nowicjusz (120 p.)
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Description" content="Tu wpisz opis zawartości strony" />
	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
	<title>Tu wpisz tytuł strony</title>
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	</head>
<body>

<div id="container">

	<div class="rectangle"></div>
		<div id="logo"> Jan Kowalski</div>
		<div id="zegar">12:00:00</div>
		<div style="clear: both;"></div>
		</div>
		
	
	<div class="square"></div>
		<div class="tile1">1</div>
		<div class="tile1">1</div>
		<div style="clear:both;"></div>
		
		<div class="tile2">2</div>
		<div class="tile2">3</div>
		<div style="clear: both;"></div>
	
	</div>
	<div class="square"></div>
	<div style="clear: both;"> </div>
	
	<div class="rectangle"></div>

</div>

</body>
</html>

 

 

CSS

body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}

#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin: 20px;
}

.square
{
width: 50%;
float: left; 
}

#logo
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
width: 600px;
}

#zegar
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
}

.tile1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #3095d3;
float: left;
}

.tile2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #666666;
float: left;
}

.tile3
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #93c748;
float: left;
}

.tile4
{
margin: 10px;
width: 230px;
height: 142px;
background-color:#ee5a32;
}

 

komentarz 20 lipca 2015 przez Eimens Maniak (69,240 p.)

<div class="tile2">2</div>
<div class="tile2">3</div>  --> <div class="tile3">3</div>

 

Nic dziwnego, to ten sam element tylko cyferkę zamieniłeś :) 

 

W css masz tile1, 2, 3, 4. A w html tylko 1,2 musisz zmieniać nazwy, żeby to działało.

komentarz 20 lipca 2015 przez jacob47 Nowicjusz (120 p.)

Ogromne dzięki za pomoc Patryku, głupi błąd z mojej strony :)

Teraz mam problem z kafelkiem 4, ponieważ nie wyświetla mi się. Cyfry się zgadzają 4 jest w html i 4 jest w css. Przesyłam kod :)

 

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Description" content="Tu wpisz opis zawartości strony" />
	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
	<title>Tu wpisz tytuł strony</title>
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	</head>
<body>

<div id="container">

	<div class="rectangle"></div>
		<div id="logo"> Jan Kowalski</div>
		<div id="zegar">12:00:00</div>
		<div style="clear: both;"></div>
		</div>
		
	
	<div class="square"></div>
		<div class="tile1">1</div>
		<div class="tile1">1</div>
		<div style="clear:both;"></div>
		
		<div class="tile2">2</div>
		<div class="tile3">3</div>
		<div style="clear: both;"></div>
		
		<div class="tile4">4</div>
		
	</div>
	<div class="square"></div>
	<div style="clear: both;"> </div>
	
	<div class="rectangle"></div>

</div>

</body>
</html>

 

 

CSS

body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}

#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin: 20px;
}

.square
{
width: 50%;
float: left; 
}

#logo
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
width: 600px;
}

#zegar
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
}

.tile1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #3095d3;
float: left;
}

.tile2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #666666;
float: left;
}

.tile3
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #93c748;
float: left;
}

.tile4
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #ee5a32;
}

 

komentarz 20 lipca 2015 przez Czort Nałogowiec (32,500 p.)
<div class="square"></div>

25 linia tu nie powinno być zamknięcia</div>

Poza tym jak ustawiasz szerokość rodzica w procentach to szerokość i marginesy dzieci też w procentach.

komentarz 20 lipca 2015 przez Eimens Maniak (69,240 p.)
Dziwne, tutaj wszystko działa :)

http://codepen.io/ReVieR/pen/yNxLLr
komentarz 20 lipca 2015 przez jacob47 Nowicjusz (120 p.)

NotePad chyba dostał zadyszki, wczytałem pliki jeszcze raz i się wyświetliło :). Obecnie jest przy kafelku nr. 5, chce aby był na prawej stronie, a nie pod kaflem numer 4 :)

 

Podaje kod

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Description" content="Tu wpisz opis zawartości strony" />
	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
	<title>Tu wpisz tytuł strony</title>
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	</head>
<body>

<div id="container">

	<div class="rectangle"></div>
		<div id="logo"> Jan Kowalski</div>
		<div id="zegar">12:00:00</div>
		<div style="clear: both;"></div>
		</div>
		
	
	<div class="square"></div>
		<div class="tile1">1</div>
		<div class="tile1">1</div>
		<div style="clear:both;"></div>
		
		<div class="tile2">2</div>
		<div class="tile3">3</div>
		<div style="clear: both;"></div>
		
		<div class="tile4">4</div>
		<div style="clear:both;"></div>
	</div>
	
	<div class="square">
		<div class="tile5">5</div>
	<div style="clear: both;"> 
	</div>
	
	<div class="rectangle"></div>

</div>

</body>
</html>


CSS
body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}

#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.rectangle
{
	width: 100%;
	margin: 20px;
}

.square
{
width: 50%;
float: left; 
}

#logo
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
width: 600px;
margin-top: 10px;
margin-bottom: 10px;
}

#zegar
{
float: left;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
margin-top: 10px;
margin-bottom: 10px;
}

.tile1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #3095d3;
float: left;
}

.tile2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #666666;
float: left;
}

.tile3
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #93c748;
float: left;
}

.tile4
{
margin: 10px;
width: 480px;
height: 142px;
background-color: #ee5a32;
}

.tile5
{
margin: 10px;
width: 480px;
height: 304px;
background-color: #666666;
float: left;
}

 

komentarz 20 lipca 2015 przez Eimens Maniak (69,240 p.)

<div class="square">
        <div class="tile1">1</div>
        <div class="tile1">1</div>
        <div style="clear:both;"></div>
         
        <div class="tile2">2</div>
        <div class="tile3">3</div>
        <div style="clear: both;"></div>
         
        <div class="tile4">4</div>
        <div style="clear:both;"></div>
</div></div>

KOLEGA TO JUŻ CI POPRAWIŁ

 

Gubisz się, nie masz bladego pojęcia co piszesz, co krok to wklejanie kodu na forum, owszem pomogę ci, ale nie będę za ciebie robił tego całego, zapoznaj się do KOŃCA z filmami o HTML'u a jeżeli w połowie uznasz że nuda i przewiniesz to daj sobie jeszcze czas :) 

 

komentarz 20 lipca 2015 przez Czort Nałogowiec (32,500 p.)
Rozwiązanie jest banalne i kryje się w liniach 18 i 25 html - mianowicie zbędne znaczniki </div>
komentarz 22 lipca 2015 przez jacob47 Nowicjusz (120 p.)

Kurs Html 3 oglądałem już z 3 razy i po tym właśnie, przeszedłem do działa. Nie wymagam zrobienia za mnie całego kursu, robię głupię błędy jak to laik, mimo wszystko postaram się wchonąć jeszcze więcej teorii, a kurs nie nudzi mnie :)

 

Obecnie mam problem z czcionki ze strony fontello, ściągam plik a on zapisuje mi się od nazwami school.css itd, a nie fontello css, jak jest na fimiku nie wiem, dlaczego.

 

Zmieniłem więc, ścieżkę pliku css na

<link rel="stylesheet" href="css/school.css" type="text/css"/>

A ścieżkę do fonta zapisałem tak:

<div class="yt"><i class="demo-icon icon-youtube"></i>
        </div>

 

Nie wiem, w czym problem pół dnia wczoraj się męczyłem :(

 

Przesyłam kod całość kodu

 

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Description" content="Tu wpisz opis zawartości strony" />
	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
	
	<title>Jan Kowalski</title>
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link rel="stylesheet" href="css/school.css" type="text/css"/>
	<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	</head>
<body>

<div id="container">

<div class="rectangle">
	<div id="logo">Jan Kowalski</div>
	<div id="zegar">12:00:00</div>
	<div style="clear:both;"></div>
</div>

<div class="square">
	<div class="tile1">1</div>
	<div class="tile1">1</div>
	<div style="clear:both;"></div>
	
	<div class="tile2">2</div>
	<div class="tile3">3</div>
	<div style="clear:both;"></div>
	
	<div class="tile4">4</div>
	</div>
	
	<div class="square">
		<div class="tile5">5</div>
		
		<div class="yt"><i class="demo-icon icon-youtube"></i>
		</div>
		
		
		<div class="fb">fb</div>
		<div class="gplus">gplus</div>
		<div class="tw">tw</div>
		<div style="clear:both;"></div>
		
		
	</div>
	<div style="clear:both;"></div>
<div class="rectangle">2015 Jan Kowalski - Portfolio. Programista Webowy zaprasza do współpracy. jan.kowalski@adres.pl
</div>

</div>

</body>
</html>

 

body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}


#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin: 20px;
	text-align: center;
}

.square
{
width: 50%;
float:left;
}

#logo
{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	text-align: left;
	}
	
#zegar
{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	text-align: left;
	}

.tile1
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #3095d3;
float: left; 
}

.tile2
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #666666;
float: left; 
}

.tile3
{
margin: 10px;
width: 230px;
height: 142px;
background-color: #93c748;
float: left; 
}

.tile4
{
margin: 10px;
width: 480px;
height: 142px;
background-color: #ee5a32;
}

.tile5
{
margin: 10px;
width: 480px;
height: 304px;
background-color: #666666;
}

.yt
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #d94348;
float: left; 
}

.fb
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #4668b3;
float: left; 
}

.gplus
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #d95333;
float: left; 
}

.tw
{
margin: 10px;
width: 105px;
height: 142px;
background-color: #3095d3;
float: left; 
}

Plik demo końcówka

<div id="icons" class="container">
      <div class="row">
        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-youtube">&#xe800;</i> <span class="i-name">icon-youtube</span><span class="i-code">0xe800</span></div>
        <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-twitter">&#xe801;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xe801</span></div>
        <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-facebook">&#xe802;</i> <span class="i-name">icon-facebook</span><span class="i-code">0xe802</span></div>
        <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-googleplus">&#xe803;</i> <span class="i-name">icon-googleplus</span><span class="i-code">0xe803</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-user">&#xe804;</i> <span class="i-name">icon-user</span><span class="i-code">0xe804</span></div>
        <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-laptop">&#xe805;</i> <span class="i-name">icon-laptop</span><span class="i-code">0xe805</span></div>
        <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-college">&#xe806;</i> <span class="i-name">icon-college</span><span class="i-code">0xe806</span></div>
        <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xe807;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xe807</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-mail">&#xe808;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe808</span></div>
      </div>
    </div>
    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
  </body>
</html>

komentarz 22 lipca 2015 przez Eimens Maniak (69,240 p.)

<div class="yt"><i class="demo-icon icon-youtube"></i>

        </div>

 

<i class="icon-youtube"></i>

 

►Pobierasz całą paczkę wklejasz do swojego folderu i odnosisz się do css'a:

<link rel="stylesheet" href="css/fontello.css" type="text/css"/>

 

Podobne pytania

+1 głos
1 odpowiedź 121 wizyt
0 głosów
1 odpowiedź 536 wizyt
pytanie zadane 2 lutego 2018 w Rozwój zawodowy, nauka, praca przez xxx1990 Początkujący (490 p.)
0 głosów
2 odpowiedzi 243 wizyt

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...