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

Strona na mieście się na ekreanie,html 3 odcinka

0 głosów
238 wizyt
pytanie zadane 3 sierpnia 2021 w HTML i CSS przez Nowicjusz89 Obywatel (1,050 p.)

Witam,

 

Strona nie mieści się na ekranie. Przeglądałem kod,linia po lini i  nic widze.Porównywałem z kodem w odcinku nie widzę.Kto pomoże.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Jan Kowalski - Portfolio </title>
	
	<meta name="description" content="Stworze dla Ciebie wyjątkową stronę www ! Zatrudnij programistę webowego " />
	<meta name="keywords" content="zamów stronę, tworzenie , www , programista" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Lato&display=swap" rel="stylesheet">
	
</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">
				<i class="icon-user"></i><br /> Kim jestem?
			</div>
			<div class="tile1">
				<i class="icon-laptop"></i><br /> Co oferuję?
				</div>
			<div style="clear:both;"></div>
			
			<div class="tile2">
				<i class="icon-graduation-cap"></i><br /> Curriculum Vitae
			</div>
			<div class="tile3">
				<i class="icon-mail"></i><br /> Kontakt ze mną
			</div>
			<div style="clear:both;"></div>
			
			<div class="tile4">
				<i>Talk is cheap.Show me the code!</i> <br /> Linus Torvalds, twórca Linuxa
			</div>
		</div>
		<div class="square">
			<div class="tile5">Tutuł podstrony <br /><br />
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis ac odio non bibendum. Cras malesuada lacus quis leo varius, eget hendrerit eros pellentesque. Mauris sit amet ex et turpis sagittis cursus id et elit. Suspendisse placerat velit leo, ut elementum eros bibendum volutpat. Vivamus eget elit in quam rhoncus rutrum. 
			</div>
			<div class="yt">
				<i class="icon-youtube"></i>
			</div>
			<div class="fb">
				<i class="icon-facebook"></i>
			</div>
			<div class="gplus">
				<i class="icon-gplus"></i>
			</div>
			<div class="tw">
				<i class="icon-twitter-bird"></i>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div style="clear:both;"></div>
		
		<div class="rectangle">2015 &copy; Jan Kowalski-Porfolio.Programista webowy zaprasza do wspólpracy! <i class="icon-mail-alt"></i>jan.kowalski@adres.com </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;
	text-align: center;
}

.tile1:hover
{
	background-color: #2084b2;
}

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

.tile2:hover
{
	background-color: #555555;
}

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

.tile3:hover
{
	background-color: #82b637;
}

.tile4
{
	margin: 10px;
	width: 420px;
	height: 82px;
	background-color: #ee5a32;
	text-align: center;
	font-size: 26px;
	padding: 30px;
	line-height: 150%;
}

.tile5
{
	margin: 10px;
	width: 420px;
	height: 244px;
	background-color: #666666;
	text-align: justify;
	padding: 30px;
}

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

.yt:hover
{
	background-color: #b83237;
}

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

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

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

.tw:hover
{
	background-color:  #2084c2;
}

 

1
komentarz 3 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
Generalnie strona mieści się na ekranie, dopóki ma on szerokość większą niż 1000(kilka-naście)px. Poniżej tej szerokości daje o sobie znać brak responsywności i pojawia się poziomy scroll.
komentarz 3 sierpnia 2021 przez Nowicjusz89 Obywatel (1,050 p.)
Właśnie chodzi o ten poziomy scroll.Na filmiku wszystko chodzi ok,bo zlikwidowaniu margin top oraz bottom  logo i zegar.Tutaj nie.Nie daje mi to spokoju.
komentarz 3 sierpnia 2021 przez VBService Ekspert (256,600 p.)

Ten kurs ma już "swoje lata", i jak już wspomniał @ScriptyChris

daje o sobie znać brak responsywności

można się pokusić o stwierdzenie, że kod css z tego kursu w ogóle nie "obsługuje" responsywności.

Proponuję zapoznać się na początek z : Flex, Grid, @media

Float nie spełnia tego zadania i nie do tego służy. [ 1 ]  [ 2 ]

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 106 wizyt
pytanie zadane 27 kwietnia 2020 w HTML i CSS przez Hadis Nowicjusz (120 p.)
0 głosów
1 odpowiedź 712 wizyt
0 głosów
2 odpowiedzi 243 wizyt
pytanie zadane 24 czerwca 2015 w HTML i CSS przez intoksynator Gaduła (3,450 p.)

93,604 zapytań

142,528 odpowiedzi

322,995 komentarzy

63,090 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

Kursy INF.02 i INF.03
...