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

Po najechaniu napisu na stopce, tenże napis przesuwa się nieco w dół

Object Storage Arubacloud
0 głosów
535 wizyt
pytanie zadane 29 września 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
edycja 30 września 2017 przez Krzysiek_34

Witam.

Na samym dole strony mam stopkę i na jej środku widnieje napis. Gdy przejadę lewym przyciskiem na ten napis, to tenże napis przesuwa się nieco w dół. Bez sensu.

<!DOCTYPE HTML>
<html lang="pl">
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Strona internetowa</title>
	
	<meta name="description" content="Ogólna tematyka" />
	<meta name="keywords" content="sport, muzyka, film, wiadomości" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="obrazki/logo/logo1.png" type="image/png" sizes="16x16">
	
	<link href='http://fonts.googleapis.com/css?family=Ek+Mukta&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Nosifer&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	
</head>

<body>

	<div class="wrapper">
	
		<nav class="main-nav">
			<ul>
				<div class="login">Logowanie</div>
					<div id="fieldnet_login">
						<form method="post" action="logowanie.php">
							<label for="username">Nazwa użytkownika:</label>
							<input type="text" id="username" name="username" class="inpUsername">
							<label for="password">Hasło:</label>
							<input type="password" id="password" name="password">
								<div id="lower">
									<div class="outer">
										<label class="check" for="checkbox"><input type="checkbox"><span class="word">Zapamiętaj</span></label>
									</div>
										<input type="submit" name="login_in" value="Logowanie" class="inpLogowanie">
										<a href="logowanie/rejestracja.php" class="inpRejestracja">Rejestracja</a>
								</div>
						</form>
					</div>
			</ul>
		</nav>
		
		<div id="header">
		
			<a href="index.php" title="Odśwież bieżącą stronę" class="logo"></a>
			
			<div class="text">
				<a href="index.php" title="Odśwież bieżącą stronę">Strona <span>internetowa</span></a>
			</div>
			
		</div>
		
		<div class="tabpanel">
		
			<ul class="tablist" role="tablist">
				<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
				<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
				<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
				<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Nowości</li>
			</ul>
			
			<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
			
				<nav class="left-nav">

				</nav>
				
				<div class="image1">
					<img src="obrazki/baner-1.png" />
				</div>
				
				<div class="image2">
					<img src="obrazki/baner-2.png" />
				</div>
				
			</div>
			
			<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
				<div class="box1">
					<div class="border-left">
						<div class="border-right">
							<div class="inner1">
								<p style="text-indent: 25px">Witam na stronie internetowej.</p>
							</div>
						</div>
					</div>
				</div>
				
				<div class="photobanner">
					<div id="photoSlider">
						<div class="photos">
							<img src="obrazki/01.jpg" class="masterTooltip" title="Obrazek nr 1" style="margin-top: 12px" />
							<img src="obrazki/02.jpg" class="masterTooltip" title="Obrazek nr 2" style="margin-top: 12px" />
							<img src="obrazki/03.jpg" class="masterTooltip" title="Obrazek nr 3" style="margin-top: 12px" />
							<img src="obrazki/04.jpg" class="masterTooltip" title="Obrazek nr 4" style="margin-top: 12px" />
							<img src="obrazki/05.jpg" class="masterTooltip" title="Obrazek nr 5" style="margin-top: 12px" />
							<img src="obrazki/06.jpg" class="masterTooltip" title="Obrazek nr 6" style="margin-top: 12px" />
							<img src="obrazki/07.jpg" class="masterTooltip" title="Obrazek nr 7" style="margin-top: 12px" />
							<img src="obrazki/08.jpg" class="masterTooltip" title="Obrazek nr 8" style="margin-top: 12px" />
						</div>
					</div>
				</div>
			</div>
			
			<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
				<div class="box2">
					<div class="border-left">
						<div class="border-right">
							<div class="inner2">
							
								<ol style="list-style-type: none">
									<li>
										<img src="obrazki/kontakt/skype.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">krzysztofp_160580</span>
									</li>
									
									<li>
										<img src="obrazki/kontakt/gg.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">1701539</span>
									</li>
									
									<li>
										<img src="obrazki/kontakt/mail.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">krzysiekp1605@o2.pl</span>
									</li>
								</ol>	
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
				<div class="box3">
					<div class="border-left">
						<div class="border-right">
							<div class="inner3">
								<p style="text-indent: 25px">Tu będzie jakiś tekst.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<footer>Strona internetowa &copy; 2017</footer>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$(".login").click(function() {
				$('#fieldnet_login').toggle();
			});
		});
	</script>
	
	<script type="text/javascript">
		var one = document.querySelector(".login");
		one.addEventListener("click", function () {
			document.querySelector(".login").classList.toggle("lightblack")
		}, false);
	</script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("li[role='tab']").click(function(){
				$("li[role='tab']:not(this)").attr("aria-selected","false");
				$(this).attr("aria-selected","true");
				
				var tabpanid= $(this).attr("aria-controls");
				var tabpan = $("#"+tabpanid);
				$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
				$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

				tabpan.removeClass("hidden");
				tabpan.attr("aria-hidden","false");
			});
			
			$("li[role='tab']").keydown(function(ev) {
				if (ev.which ==13) {
					$(this).click();
				}
			});
			
			$("li[role='tab']").keydown(function(ev) {
				if ((ev.which ==39)||(ev.which ==37))  {
					var selected= $(this).attr("aria-selected");
					if  (selected =="true"){
						$("li[aria-selected='false']").attr("aria-selected","true").focus() ;
						$(this).attr("aria-selected","false");

						var tabpanid= $("li[aria-selected='true']").attr("aria-controls");
						var tabpan = $("#"+tabpanid);
						$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
						$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

						tabpan.attr("aria-hidden","false");
						tabpan.removeClass("hidden");
					}
				}
			});
		});
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('.masterTooltip').on('mouseenter', function(e) {
				var title = $(this).attr('title');
				var mousex = e.pageX + 0;
				var mousey = e.pageY + 0;
				$(this).data('tipText', title).removeAttr('title');
				$('<p class="tooltip"></p>')
				.text(title)
				.appendTo('body')
				.css({top: mousey, left: mousex})
				.fadeIn('normal');
			} ).on('mouseleave', function() {
				$(this).attr('title', $(this).data('tipText'));
				$('.tooltip').remove();
			}).mousemove(function(e) {
				var mousex = e.pageX + 0;
				var mousey = e.pageY + 0;
				$('.tooltip')
				.css({top: mousey, left: mousex})
			});
		});
	</script>
	
</body>
</html>
body
{
	background: #000000 url("obrazki/background/body_background.png");
	font-family: Verdana;
	margin: 0;
	width: 100vw;
	height: 135vh;
	position: relative;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.main-nav
{
	overflow: hidden;
	background-color: #C34F4F;
	padding: 6px;
	margin-top: 10px;
}

.main-nav ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.login
{
	float: right;
	display: block;
	padding: 5px;
	background-color: #002D6E;
	color: white;
	font-size: 11px;
	text-decoration: none;
	outline: none;
	transition-duration: 1s;
}

.login:hover
{
	background-color: #191919;
	color: white;
	transition-duration: 1s;
	cursor: pointer;
}

.lightblack
{
	background-color: #191919;
}

.tablist
{
	padding: 0;
	list-style: none;
}

.tab
{
	float: left;
	margin-left: 0px;
	width: 180px;
	line-height: 35px;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
	background: linear-gradient(#CAFF5A, #60A822);
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	outline: none;
	display: inline;
	margin-right: 8px;
	box-shadow: inset 0px 0px 180px #8AA4B7;
	transition: all linear;
	transition-duration: 0.5s;
}

.tab:last-child
{
	float: right;
	margin-right: 0px;
}

.tab:hover
{
	box-shadow: inset 0px 0px 0px #8AA4B7;
	transition-delay: 0.5s;
	transition-duration: 2s;
	color: black;
	cursor: pointer;
}

.panel-1
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #BFBFBF;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	position: relative;
}

.margin_top
{
	margin-top: 5px;
}

.panel-1 .image1
{
	position: absolute;
	left: 600px;
	top: -11px;
}

.panel-1 .image2
{
	position: absolute;
	left: 458px;
	top: 5px;
}

.panel-2
{
	clear: both;
}

.box1
{
	background-color: #000000;
	width: 100%;
}

.box1 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box1 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box1 .inner1
{
	padding: 10px 50px 138px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

.photobanner
{
	overflow: hidden;
	position: relative;
	bottom: 138px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#photoSlider
{
	width: 1100px;
	height: 124px;
}

#photoSlider img
{
	width: 200px;
	height: 100px;
	transition: all 0.5s ease;
}

#photoSlider img:hover
{
	transform: scale(1.2,1.2);
	cursor: pointer;
}

.photos
{
	animation: bannermove 400s linear infinite;
}

.tooltip
{
	display: none;
	position: absolute;
	border: 1px solid #191919;
	border-radius: 5px;
	background-color: #B51031;
	color: white;
	font-size: 12px;
	padding: 5px;
}

.panel-3
{
	clear: both;
	width: 1000px;
}

.box2
{
	background-color: #000000;
	width: 100%;
}

.box2 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box2 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box2 .inner2
{
	padding: 1px 0px 1px;
}

.box2 .inner2 ol >li
{
	display: block;
	padding: 15px 0px 0px;
}

.box2 .inner2 ol >li span
{
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 26px;
}

.panel-4
{
	clear: both;
}

.box3
{
	background-color: #000000;
	width: 100%;
}

.box3 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box3 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box3 .inner3
{
	padding: 10px 50px 30px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

li[aria-selected='true']
{
	background: linear-gradient(#CAFF5A, #60A822);
	color: black;
	font-size: 12px;
	font-weight: bold;
	width: 180px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	outline: none;
	display: inline;
	margin-right: 8px;
	box-shadow: inset 0px 0px 1px #8AA4B7;
	transition: all linear;
	transition-duration: 0.5s;
}

div[aria-hidden='true']
{
	display: none;
}

div[aria-hidden='false']
{
	display: block;
}

footer
{
	text-align: center;
	background-color: #191919;
	color: #FC9E00;
	font-family: Calibri;
	font-size: 16px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 64px;
	border-top-left-radius:.4em;
	border-top-right-radius:.4em;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}

Na podstronie pierwszej i drugiej mam taką samą stopkę i zapis w CSS jest tam dokładnie taki sam. I wtedy tenże napis na stopce nie przesuwa się już w dół.

Wiecie co jest przyczyną, że na stronie głównej w stopce ten napis przesuwa się nieco w dół?

komentarz 30 września 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Dobrze znasz kod PHP z obsługą biblioteki PDO ?
komentarz 30 września 2017 przez HaKIM Szeryf (87,590 p.)

Używasz złego... słownictwa.

To powinny być dwa różne pytania:

„Czy dobrze znasz PHP?” oraz „Czy orientujesz się co i i jak jeśli chodzi o bibliotekę PDO?”.

Łap:

https://pl.wikibooks.org/wiki/PHP/Biblioteka_PDO

http://php.net/pdo

komentarz 30 września 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Chciałbyś wykonać dla mnie zlecenie? Zależy mi na wykonaniu tego zlecenia. Oczywiście zapłacę Tobie za fatygę. Wyślę Tobie treść tego zlecenia w nowej wiadomości.
komentarz 30 września 2017 przez HaKIM Szeryf (87,590 p.)
Przykro mi, nie mam czasu. :/

Tak czy inaczej, możesz założyć nowy temat na forum z kategorią „Ogłoszenia i zlecenia”, może znajdzie się jakiś śmiałek który podejmie się Twojego zlecenia. :-)
komentarz 30 września 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Pisałem już do wielu śmiałków na tym forum, ale każdy z nich pisał, że chciałby mi pomóc, ale nie ma czasu. Mam się zgłosić do kogo innego - i tak w kółko. :) Zróbmy tak - podeślę Ci temat, a Ty sam podejmiesz decyzję czy chciałbyś się tego podjąć. Możesz to wykonać w kilka godzin (jeśli dobrze znasz PHP), a mnie sie nie spieszy z czasem. Wysłać Ci to?

1 odpowiedź

+1 głos
odpowiedź 30 września 2017 przez shotokan Nałogowiec (39,660 p.)
ciężko stwierdzić po kodzie, spróbuj poszukać analizując stronę w przeglądarce za pomocą, np. firebuga, jeżeli się przesuwa po zarejestrowaniu zdarzenia kliknięcia myszy to winny jest JavaScript, być może jakiś margin lub padding się dodaje, firebug powinien pomóc
komentarz 30 września 2017 przez Krzysiek_34 Mądrala (6,050 p.)
OK, dzięki.

Podobne pytania

0 głosów
2 odpowiedzi 682 wizyt
+1 głos
1 odpowiedź 119 wizyt
0 głosów
3 odpowiedzi 278 wizyt

92,536 zapytań

141,377 odpowiedzi

319,456 komentarzy

61,922 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...