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

Latające ikonki

VPS Starter Arubacloud
0 głosów
158 wizyt
pytanie zadane 8 września 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />

<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


</HEAD>

<script type="text/javascript">
$(document).ready(function(){
    $("#cwiczeniadowyboru").click(function(){
        $("#ikonki").slideToggle("fast");
        $("#turn").slideToggle("fast");
        
    }); 

});


</SCRIPT>



</script>


<BODY>
<!----------------------------------------------------------------------------------------------------------------------------->



<div id="main">

  
	<div id="text">Q FORMIE </div>
	<div id="text1">SPORTOWY STYL ŻYCIA</div>

</div>
	
<!----------------------------------------------------------------------------------------------------------------------------->	
	
	<div id="centrum">

		<!--jeżeli on/ona odpowie nie wówczas otworzy się filmik ze mną: i mówię: o nie, nie ! nie ma nie ! -->
		
			  
		        
			   
			   
			   
			   
			   
			   
					<div id="cwiczeniadowyboru" >ĆWICZENIA</div>
					
			   
		<div id="turnikonki">						
				<div id="turn"><img src="turn.png" style="width:26vh; height:18vh;"></img></div>

				
				<div id="ikonki">
					<div id="square"><img src="pushup.png"  style="padding-top:1.3vh; width:6.5vh; height:7vh; display: block; margin: 0 auto"></z></div>
					<div id="square"><img src="stomach.png"  style="padding-top:1.3vh; width:6vh; height:6.5vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="przysiady.png"  style="padding-top:1.8vh; width:5.4vh; height:5.8vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="podciaganie.png"  style="padding-top:1.5vh; width:5.4vh; height:5.6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="worek.png"  style="padding-top:1.75vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="run.png"  style="padding-top:1.6vh; width:5.2vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="hantle.png"  style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="swim.png"  style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="sztanga.png"  style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="stretching.png"  style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					<div id="square"><img src="stretching.png"  style="padding-top:1.5vh;padding-left:0.6vh; width:6vh; height:6vh; display: block; margin: 0 auto"></div>
					
				</div>
		</div>
</div>

</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div id="down">

	<div id="face"><img src="facebook.svg"></img></div>
	
</div>




</BODY>
</HTML>
body{
	
	margin:0px;
	
}

#main{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
	width:100%;
	height:16.5vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	z-index:2;
	animation-name: ghost;
    animation-duration: 4s ;
}






#text{
    position:absolute;
	right:5vh;
	top:0.3vh;
	color:white;
	font-family: 'PT Sans Caption', sans-serif;
	text-align:center;
	font-size:10vh;
	animation-name: example;
    animation-duration: 1s;

	
}
@keyframes example {
    from {opacity:0;color:black;}
    to {opacity:1; }
}

#text1{
	position:absolute;
	top:11.5vh;
	right:4.5vh;
	color:white;
	font-family: 'Handlee', cursive;
	font-size:2vh;
	letter-spacing:0.78vh;
}



#centrum{
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;

}






#klik{
	width:70%;
	height:10vh;
	position:relative;
	top:142vh;
	font-family: 'Black Ops One', cursive;
	text-align:center;
	font-size:5vh;
	left:-6vh;
	color:black;

}

#cwiczeniadowyboru{

	font-family: 'Black Ops One', cursive;
	text-align:center;
	font-size:6vh;
	left:16vh;
	color:black;
	position:relative;
	left:26vh;
	top:142vh;
	width:25%;
	height:10vh;
    padding-left: 2vh;
    text-align: center;
    background-color: white;
    border: solid 1px white;
}

#turnikonki{
	border-bottom:1vh solid black;
width:100%;
height:60vh;
position:relative;
top:7vh;
	
	
	
	
	
}


#turn{
	position:relative;
	top:133.5vh;
	left:50.5vh;
	z-index:2;
	margin:0;
	padding:0;
	display:none;
}

#ikonki {
	border:0.1vh solid black;
	position:relative;
	top:121vh;
	left:75.9vh;
    padding: 3vh;
    display: none;
	width:50%;
	height:100vh;
	z-index:0;
}

#square{
	position:relative;
	
	margin:2vh;
	margin-bottom:0.5vh;
	border-top:black solid 0.1vh;
	border-bottom:white solid 0.1vh;
	width: 9vh;
	height: 9vh;
	background-color: black;
	border-radius:100%;
    
}

#square:hover{
	
width: 9vh;
height: 9vh;
border:0.01vh solid #21a298  ;
background-color: #21a298 ;	
display:block;	
}


#down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}


#face{
	
	width:6vh;
	height:6vh;
	background-color:white;
	background-image:100% 100%;
    float:right;
	margin:0px;
	
	
}

Jak ładnie ułożyć ikonki w jednej linii, tak by po kliknięciu 1 z lewej nie przesuwały się byle gdzie ikonki poniżej. By zobaczyć ikonki należy kliknąć "ćwiczenia"

komentarz 8 września 2016 przez DariuszH Gaduła (3,100 p.)
Dzięki :) Pomogło :)

2 odpowiedzi

0 głosów
odpowiedź 8 września 2016 przez DariuszH Gaduła (3,100 p.)
I jeszcze jedno. Nie reaguje na hover, Tzn. po najechaniu powinna być turkusowa  ikonka, natomiast trzeba szukać "punktu" na ikonce, gdzie zajdzie efekt :hover, czyli zmiana koloru. Powinno reagować na kliknięcie w każdym punkcie. Jak temu zaradzić ?
0 głosów
odpowiedź 8 września 2016 przez niezalogowany
element

{

float: left;

display: block;

...

}

element:active

{

...

}

 

//** Marudzenie **//

1. Polecam przeczytać link by poprawić semantykę elementów na stronie

2. CSS inline jest bardzo złym pomysłem przy tak dużej liczbie elementów...

3. Zmienne powinny być w j.angielskim

 

EDIT: zmienił bym id="square" na klasę, może pomóc w hover ;)

Podobne pytania

0 głosów
1 odpowiedź 236 wizyt
0 głosów
4 odpowiedzi 499 wizyt
pytanie zadane 21 maja 2017 w HTML i CSS przez chmod96 Obywatel (1,380 p.)
+1 głos
3 odpowiedzi 210 wizyt
pytanie zadane 25 kwietnia 2018 w HTML i CSS przez Krzysio4224 Obywatel (1,690 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 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!

...