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

Css Position Fixed

Fiszki IT
Fiszki IT
0 głosów
83 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez Jakub Chomicz 1 Użytkownik (840 p.)

Witam mam problem otóż nie chce mi działać position:fixed;

otóż kiedy odpalam strone i scrolluje to obiekt nie scrolluje sie razem z stroną oraz musze dać bottom:800px; żeby wgl mi sie na ekranie startowym pojawił ten obiekt. o co moze chodzić ? 

<!DOCTYPE HTML>

<html lang "eng">
<head>

	<meta charset = "utf-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1"/>
	
	<title>Playing Crocodile - Games are what we all love </title>
	
	<meta name = "description" content "Games are what we all love"/>
	<meta name = "keywords" content "games,gry,Playing Crocodile"/> 
	
	<link rel = "stylesheet" href = "CSS/style.css" type = "text/css"/>
	<link rel = "stylesheet" href = "CSS/fontello.css" type = "text/css"/>
	<script src = "Js/timer.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lato&display=swap" 
	rel="stylesheet" type = "text/css">

</head>

<body onload = "odliczanie();">
		<a href= "#" class = "scrollup"></a>
		<div class = "box1">
			<div id = "logo"></div>
			<div id ="search">
				<div id = "searchicon">
					<i class = "icon-search"></i>
				</div>
					<input type="text" name = "fraza" value = ""placeholder = "Search">
			</div>
			<div class ="BF"><a class = "tilelink2"href = "#">Log In</a></div>
			<div class ="BF"><a class = "tilelink2"href = "#">Sign Up</a></div>
			<div class ="tile0"><i class = "icon-menu"></i></div>
		</div>
		<div id = "logocontainer"></div>
		<div class = "box2">
			<div id ="clock">12:00:00</div>
		</div>
			<div class = "square">
				<div class = "tile1"><a class = "tilelink1"href = "Horror.html">1</a></div>
				<div class = "tile1">2</div>
				<div class = "tile1">3</div>
				<div class = "tile1">4</div>
				<div class = "tile1">5</div>
				<div class = "tile1">6</div>
				<div class = "tile1">7</div>
				<div class = "tile1">8</div>
				<div class = "tile1">9</div>
				<div class = "tile1">10</div>
				<div class = "tile1">11</div>
				<div class = "tile1">12</div>
				<div class = "tile1">13</div>
				<div class = "tile1">14</div>
			</div>
			<div style = "clear:both;"></div>
		<div class = "box2">
			<div class ="name">HOT</div>
		</div>
		<div class = "square2">
			<div class = "tile2">1</div>
			<div class = "tile2">2</div>
			<div class = "tile2">3</div>
			<div style = "clear:both;"></div>
			<div class = "tile2">4</div>
			<div class = "tile2">5</div>
			<div class = "tile2">6</div>
			<div style = "clear:both;"></div>
			<div class = "tile2">7</div>
			<div class = "tile2">8</div>
			<div class = "tile2">9</div>
			<div style = "clear:both;"></div>
		</div>
		<div class = "box2">
			<div class ="name">BEST</div>
		<div class = "square2">
			<div class = "tile2">1</div>
			<div class = "tile2">2</div>
			<div class = "tile2">3</div>
			<div style = "clear:both;"></div>
			<div class = "tile2">4</div>
			<div class = "tile2">5</div>
			<div class = "tile2">6</div>
			<div style = "clear:both;"></div>
			<div class = "tile2">7</div>
			<div class = "tile2">8</div>
			<div class = "tile2">9</div>
			<div style = "clear:both;"></div>
		</div>
		<div class = "info"></div>
		<div class = "footer"></div>
		</div>
</body>
</html>
html
{
	height:100%
	overflow: hidden;
}
body
{
	background-image:linear-gradient(120deg,#464646,#131313);
	font-family: 'Lato', sans-serif;
	color: #ffffff;
	font-size: 20px;
	margin: 0px;
	perspective: 1px;
	transform-style:preserve-3d;
	height: 100%;
	overflow-y:scroll;
	overflow-x:hidden;
}
#logocontainer
{
	height: 400px;
	width: 100%;
	background-image:linear-gradient(120deg,#2c3e50,#8e44ad);
}
#logo
{
	width: 305px;
	height: 40px;
	background-color: #FE0101;
	float:left;
}
.box1
{
	height: 40px;
	width: 100%;
	position: sticky;
	top:0;
}
.box2
{
	height: 50px;
	width: 100%;
}
.info
{
	height: 200px;
	width: 100%;
	background-color: #111111;
}
.footer
{
	height: 150px;
	width: 100%;
}
.square
{
	width: 100%;
}
.square2
{
	width: 80%;
	margin-left:auto;
	margin-right:auto;
}
.tile0
{
	width: 40px;
	height: 40px;
	background-color: #1c74b2;
	float:left;
	font-size:25px;
	line-height:40px;
	text-align: center;
	display: inline-block;
}
.tile0:hover
{
	background-color: #2084c2;
}
#search
{
	background-color: #353535;
	float:left;
	font-family: 'Josefin Slab',sans-serif;
	width: 1356px;
	height: 40px;
	font-size:20px;
	line-height:40px;
	background-image:linear-gradient(120deg,#464646,#131313);
}
#searchicon
{
	width: 40px;
	height: 40px;
	float:left;
	font-size:25px;
	line-height:45px;
	text-align: center;
	display: inline-block;
}
#search:hover
{
	background-image:linear-gradient(120deg,#575757,#242424);
	border-bottom: 1px solid #c0392b;
}
#search input
{
	background: none;
	border:none;
	outline: none;
	width:1310px;
	font-size:14px;
	color: #ffffff;
}
.BF
{
	background-image:linear-gradient(120deg,#464646,#353535);
	height : 40px;
	float:left;
	font-family: 'Josefin Slab',sans-serif;
	font-size:20px;
	width: 100px;
	text-align:center;
	line-height:40px;
	border-left: 1px dashed #010101;
}
.BF:hover
{
	background-image:linear-gradient(120deg,#575757,#242424);
	border-bottom: 1px solid #c0392b;
}
.name
{
	height:60px;
	float:left;
	font-family: 'Josefin Slab',sans-serif;
	font-size:40px;
	width: 100%;
	text-align:center;
	line-height:60px;
}
#clock
{
	height:60px;
	float:left;
	font-family: 'Josefin Slab',sans-serif;
	font-size:40px;
	width: 100%;
	text-align:center;
	line-height:60px;
}
#clock:hover
{
	background-color: #242424;
}
.name:hover
{
	background-color: #242424;
}
.tile1
{
	margin: 10px;
	width: 115px;
	height: 150px;
	background-color: #1c74b2;
	float:left;
}
.tile1:hover
{
	background-color: #2084c2;
}
.tile2
{
	margin: 10px;
	width: 480px;
	height: 297px;
	background-color: #650000;
	float:left;
}
.tile2:hover
{
	background-color: #760000;
}
a.tilelink1
{
	display:block;
	color:#ffffff;
	text-decoration:none;
	width: 115px;
	height: 150px;
}
a.tilelink2
{
	display:block;
	color:#ffffff;
	text-decoration:none;
	width: 100px;
	height: 40px;
}
.scrollup
{
	width:64px;
	height:64px;
	text-decoration:none;
	background-image:linear-gradient(120deg,#2c3e50,#8e44ad);
	position :fixed;
	right:50px;
	bottom:800px;
}

 

1 odpowiedź

0 głosów
odpowiedź 14 września 2019 przez Chess Maniak (74,770 p.)
wybrane 14 września 2019 przez Jakub Chomicz 1
 
Najlepsza

Wyrzuć z body właściwość perspective i transform-style. Napisz jeszcze tak

<div style="position: fixed; top: 0;">
   <div class ="BF"><a class="tilelink2" href="#">Log In</a></div>
   <div class ="BF"><a class="tilelink2" href="#">Sign Up</a></div>
   <div class ="tile0"><i class="icon-menu"></i></div>
</div>
komentarz 14 września 2019 przez Jakub Chomicz 1 Użytkownik (840 p.)
dzięki już działa :D

Podobne pytania

0 głosów
1 odpowiedź 69 wizyt
pytanie zadane 7 kwietnia 2019 w HTML i CSS przez Dru Nowicjusz (180 p.)
0 głosów
1 odpowiedź 48 wizyt
pytanie zadane 2 lutego w HTML i CSS przez Mlorism Użytkownik (580 p.)
0 głosów
1 odpowiedź 465 wizyt
pytanie zadane 3 maja 2016 w HTML i CSS przez skrzatjedyny Gaduła (3,170 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

84,751 zapytań

133,554 odpowiedzi

295,976 komentarzy

56,009 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...