Wysuwana zakadka z facebook

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

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

odpowiedź 11 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

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

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.