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

Wysuwana zakadka z facebook

VPS Starter Arubacloud
+1 głos
405 wizyt
pytanie zadane 11 lipca 2015 w HTML i CSS przez aspoka Mądrala (5,290 p.)

WItam chciłbym na swoją stronę dodać zakładkę z fb taką jak tutaj: http://miroslawzelent.pl/demos/demo.html

Ale zamiast tego wyszło mi coś takiego:

Co mogłem zrobioć nie tak?

4 odpowiedzi

0 głosów
odpowiedź 11 lipca 2015 przez toaspzoo Dyskutant (8,300 p.)

No mnie tu wyszło. Może nadpisujesz jakieś style.

http://rankomaty.pl/forum/

komentarz 11 lipca 2015 przez aspoka Mądrala (5,290 p.)
Mi nadal nie dziła :( Nie przeszkadzają mu jakieś elementy z strałą pozycją? Ogólnie wstawia mi się w miejscu w którym wstawie kod i za holere nie chcę inaczej
0 głosów
odpowiedź 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)
Spróbuj poszerzyć tego diva. Możliwe, że divy blokują się wzajemnie :)
0 głosów
odpowiedź 11 lipca 2015 przez Bartos Użytkownik (610 p.)
Bez kodu będzie ciężko pomóc :)
komentarz 11 lipca 2015 przez aspoka Mądrala (5,290 p.)

Tutaj masz html:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Next-CNC</title>
	<meta name="description" content="Serwis o starych grach pochodzących z Nintendo Entertainment System" />
	<meta name="keywords" content="gry, komputerowe, retro, nes, konsole, retrogranie, stare gry" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="css/fontello.css" rel="stylesheet" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
	
	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="tabslideout.v1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			$('.slide-out-div').tabSlideOut({
				tabHandle: '.handle',
				pathToTabImage: 'zakladka.png',
				imageHeight: '120px',
				imageWidth: '40px',
				tabLocation: 'left',
				speed: 300,
				action: 'hover',
				topPos: '200px',
				leftPos: '20px',
				fixedPosition: true
			});
		});
	</script>
	
</head>

<body>

	<div class="slide-out-div">
		<a class="handle">Content</a>
		<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Next-CNC/1586574338282598?fref=ts&amp;width=240&amp;height=280&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:272px;" allowTransparency="true"></iframe>
	</div>

	<div class="wrapper">
		<div class="logowrapper">
			<div class="nav">
				<div class="menu">
					<div class="next">
						<ol>
							<li><a href="index.html"><h2>Next-CNC</h2></a></li>
						</ol>
					</div>
					<div class="buttons">
						<ol>
							<li><a href="index.html">Home</a></li>
							<li><a href="frezowanie.html"><h1>Frezowanie CNC</h1></a></li>
							<li><a href="uslugi.html">Usługi</a></li>
							<li><a href="ceny.html">Wyceny i zlecenia</a></li>
							<li><a href="kontakt.html">Kontakt</a></li>
						</ol>
					</div>
				</div>
			</div>
		</div>

		<div class="content">
			<img src="top/kontakt.jpg" />
			<div class="half">
				<br/>
				NEXT CNC<br/>
				Gdańsk, ul. Litewska 11/13<br/>
				80-000 Gdańsk
				<br/>
				<br/>
				<br/>
				<br/>
				Napisz do nas<br/>
				<i class="icon-mail-1"></i>biuro@nextcnc.pl<br/>
				<hr noshade="noshade" size="1"/>
				Zadzwoń<br/>
				<i class="icon-mobile"></i>666666666
				<hr noshade="noshade" size="1"/>
				Odwiedź nas osobiście<br/>
				Pracujemy od pon. do pt.<br/>
				<i class="icon-clock-5"></i>9:00-17:00
				<hr noshade="noshade" size="1"/>
				Albo na facebook'u<br/>
				<a href="https://www.facebook.com/pages/Next-CNC/1586574338282598?fref=ts" target="_blank" class="sociallink"><i class="icon-facebook"></i>fb.pl/Next-CNC</a>
			</div>
			<div class="half"></div>
			<div style="clear: both;"></div>
			<br/>
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1640.3717086802724!2d18.680143234728156!3d54.35230340110028!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46fd73069468d0c7%3A0x2fc11a8dd4b322dc!2sLitewska+11%2F13%2C+Gda%C5%84sk!5e1!3m2!1sen!2spl!4v1436464837488" width="1000" height="333" frameborder="0" style="border:0" allowfullscreen></iframe>
			<br/>
		</div>
	</div>

	
	<script src="jquery-1.11.3.min.js"></script>
	
	<script>

	$(document).ready(function() {
	var NavY = $('.logowrapper').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.logowrapper').addClass('sticky');
	} else {
		$('.logowrapper').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
	</script>	
</body>
</html>

i fragmęt css:

.slide-out-div 
{
	padding: 5px;
	width: 250px;
	background: #f2f2f2;
	border: #395A9C 2px solid;
	cursor: pointer;
}

 

komentarz 11 lipca 2015 przez toaspzoo Dyskutant (8,300 p.)

Ten plugin bardzo dupcy kod, wrzuć go np. na pastebin.com

0 głosów
odpowiedź 11 lipca 2015 przez Michau Xlow Pasjonat (15,190 p.)
Hej, taki sam efekt jak Ty masz otrzymalem po stworzeniu samego pliku index.html, dodatkowo musisz mieć pliki tabslideout.v1.3.js i jquery.min.js
Nie wiem czy masz je w jednym folderze, ale nic o tym nie wspomniałeś, więc może to jest powodem błędu.
komentarz 11 lipca 2015 przez aspoka Mądrala (5,290 p.)
A możesz podać link do tych plików bo mam jakieś inne
komentarz 11 lipca 2015 przez Michau Xlow Pasjonat (15,190 p.)
komentarz 11 lipca 2015 przez Michau Xlow Pasjonat (15,190 p.)
i jak? Działa?
komentarz 11 lipca 2015 przez aspoka Mądrala (5,290 p.)
NIe sprawdziłem, ale jutro napiszę.

Podobne pytania

0 głosów
1 odpowiedź 332 wizyt
0 głosów
1 odpowiedź 244 wizyt
pytanie zadane 8 listopada 2019 w HTML i CSS przez eric19972 Użytkownik (590 p.)
0 głosów
1 odpowiedź 136 wizyt
pytanie zadane 8 czerwca 2017 w HTML i CSS przez madmi121 Użytkownik (760 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...