Z-index - pomocy

Potrzebuję małej pomocy przy z-indexie a mianowicie: 
Chciałbym uzyskać efekt jak tutaj:

A udaje mi się coś takiego: 

Tutaj kod z footer.php

</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<center>
<div class="fb-like-box" data-href="https://www.facebook.com/Bronze4Evah" data-width="700" data-height="300" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</center>	
</div>
<div id="footer">
	<div class="furniture">
		<div class="links">
			<a href="<?php echo $rewrite->contact; ?>">Kontakt</a>
			<img src="<?php echo $page->host(); ?>_themes/<?php echo $theme; ?>/img/navigation_symbol.png" alt="symbol" />
			<a href="<?php echo $rewrite->rules; ?>">Regulamin</a>
		</div>
		<span class="copyrights"><font color="white">Powered by TenTego 2</font></span>
	</div>
</div>
</div>
<script type="text/javascript" src="http://cookiealert.sruu.pl/CookieAlert.js"></script>
<!-- End Footer -->
</body>
</html>

Wiem, że, żeby z-index działał obiekty muszą być w jednym divie, bo inaczej ten wyżej go zakrywa. Jednak nie mam pojęcia jakby połączyć to w jedno.. Próbowałem już ten div odpowiedzialny za likebox wrzucić niżej do <div id="footer> jednak, potem był inny problem bo stopka się powielała i no-repeat nic nie dawało :/ Jak będzie taka potrzeba mogę dodać fragment pliku .css.
Z góry dziękuje za pomoc.

Z tego co widzę jak to masz zrobione, to trzeba albo zmienić sposób wyświetlania tego gostka, albo:

1. W css dla #footer dać: 

padding-top: 75px;

 i bg ustawić w taki sposób:

background: url(img/footer.png) no-repeat 100% 100%;

2. Dla #wrapper wywalić lub ustawić na 0:

margin-bottom: 40px;

Nie jest to efekt do końca taki jaki chciałem uzyskać, ale i tak dzięki

@edit

Żeby nie robić tematu napisze od razu tutaj. 
Chciałbym uzyskać taki efekt, jednak nie mogę do tego dojść (mianowicie obramowanie tych przycisków do głosowania itp.)

U mnie wygląda to w ten sposób:

Fragment kodów z .css

/*---------------------------------
:: BLOCZEK Z OBIEKTEM
---------------------------------*/
#content .block { 
	color: #737272;
	background: url('img/bg_object.png');
	padding: 0px;
	-moz-box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
	margin-top: 100px;
	position: relative;
}
.block .tresc {
	text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
	margin: 10px 0px 0 0px;
	position: relative;
	z-index: 10;
	padding: 10px;
	font-size: 12px;
}

/* :: OBIEKT --------------------*/
.object, .ytobject {
	border: 0px solid #fff;
	float: left;
	position: relative;
	width: 700px;
	min-height:auto;
	background: url('img/bg_object.png');
	text-align: center;
}
.object img {
	margin-bottom: 0px;
	max-width: 700px;
	max-height: auto;
}
.mod_tools {
	background: url('img/bg_object.png');
	margin:0px 0px 10px 0px;
	z-index:15;
	position:relative;
}
.mod_tools a {
	display:inline-block;
	padding:10px;
	color:#000000;
	font-weight:bold;
}
.mod_tools a:hover {
	color:#60badc;
}
.share {
	position: absolute;
	bottom: 10px;
	right: 10px;
	text-align: center;
	z-index: 11;
}
.share ul {
	list-style: none;
	display: block;
}
.share li { 
	display: block; 
	margin: 0; 
	padding: 10px;
	float: left;
}
.share .socialite { 
display: block;
position: relative; 
}
.share .twitter-share { width: 15px; height: 15px; background-position: 0 0; }
.share .googleplus-one { width: 15px; height: 15px; background-position: -75px 0; }
.share .facebook-like { width: 15px; height: 15px; background-position: -145px 0; }
.share .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }

/*---------------------------------
:: INFORMACJE O OBIEKCIE
---------------------------------*/
.info {
	float: left;
	color: #b1b1b1;
	font-family: 'PT Sans Narrow', sans-serif;
	margin: 35px 10px 10px 10px;
}
.info li {
	float: left;
	list-style-type: none;
	margin-right: 10px;
}
.info li b {
	font-weight: normal;
	color: #8d8d8d;
}
.info li a {
	color: #b1b1b1;
	text-decoration: none;
}
.info li a:hover {
	color: #b1b1b1;
	text-decoration: underline;
}

Użytkownik Bartoll edytował ten post 29 września 2013 - 12:47

Wystarczy dodać w odpowiednim miejscu border-top: 1px solid #000000; i border-right: 1px solid #000000; gdzie zamiast 000000 wpisujesz odpowiedni kolor, jednak aktualnie nie bardzo mogę ci powiedzieć w którym miejscu dokładnie. Przydałby się kod html z tego paska.

No niestety nie jest tak łatwo Próbowałem już tak jak napisałeś, ale ramka dodaje się wtedy zaraz nad przyciskami od głosowania, trzeba by dodać chyba do tego coś jeszcze i w tym jest haczyk

Po 1. masz tam zamieszanego HTML-a, bo masz to w ul, ale masz jako span. Zamień ul oraz span na div.

Po 2.:

style.css

Linia 300 elementowi .info wywal całkiem margin (zostaw tylko dla top)

Linia 284, elementowi .lewa dodaj border-top:1px solid #000000;

Dodajesz element, w okolicach linii 300 to dodaj:

.lewa > a{padding-top: 10px;padding-right:10px;border-right:1px solid #000;}

+

 

Nie jest to efekt do końca taki jaki chciałem uzyskać, ale i tak dzięki

 

To powiedz co dokładnie chciałeś to się dostosuje

Zaraz zobacze z tymi ramkami. A tego gostka chciałem zrobić tak, żeby nakładał się na like boxa tak jak zresztą na zdjęciu widać

@edit

wprowadziłem to co napisałeś wyżej, to wyszło coś takiego:

bo niestety .lewa jest tylko na szerokosc głosowania 

Zaraz zobacze z tymi ramkami. A tego gostka chciałem zrobić tak, żeby nakładał się na like boxa tak jak zresztą na zdjęciu widać

To po pierwsze wywal Wrapperowi z html (syl inline) min-height

Teraz footerowi dodajesz:

margin-top:-50px; /* tutaj możesz sobie ustawić jakieś bardziej pod siebie :) */
position:relative;
z-index:20;

@edit

wprowadziłem to co napisałeś wyżej, to wyszło coś takiego:

 

bo niestety .lewa jest tylko na szerokosc głosowania 

To wsadź to wszystko w diva (to co po lewej i po prawej) daj temu divowi border-top i ostyluj odpowiednio, myślę że naprowadziłem Cię na odpowiednią drogę

Na przyszłość proszę każdy problem w osobnym temacie. Zrobił się teraz bałagan