Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Partnerzy - wyśrodkowanie rotatora bannerów

Założony przez  Sabat.

21.03.2014, 15:25 (Ten post był ostatnio modyfikowany: 28.03.2014, 14:02 przez Sabat.)
#1
wersja skryptu MyBB: 1.6.12
adres forum: www.sabatserv.eu
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Otóż mam problem, banery w ramce partnerzy nie są na środku i nie wiem jak to wyśrodkować aby na każdej rozdzielczości był on na środku, oraz mam problem ponieważ banery te jak się przewija stronę, to najeżdżają NA pasek z logowaniem, a powinny być POD nim

Global.css
/* Banner rotator */
div.rotator {
    position: relative;
    height: 220px;
    margin: 0px auto;
}

/* rotator css */
div.rotator ul li {
    
    position: absolute;
    list-style: none;
}

div.rotator ul li.show {
    z-index:500;
}

Szablon Index
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}{$serversboard_index}
<div class="sidebar" style="float: right;width: 22%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" style="text-align:center;">
<div class="theadtitle" style="float:none;"><a href="#"><center>Partnerzy</center></a></div>
</td>
</tr>
<tbody style="{$collapsed['2_e']}" id="2_e">
<td>
<div class="rotator">
<ul>
<li class="show">
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="images/df/banner1.png" width="200" height="200" alt="pic1" />
</a>
</li>
<li>
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="images/df/banner2.png" width="200" height="200" alt="pic2" />
</a>
</li>
<li>
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="images/df/banner3.png" width="200" height="200" alt="pic3" />
</a>
</li>
</ul>
</div>
</div>
</td>
</tbody>
</table>
{$topStats['MostViews']}
{$topStats['Posters']}
{$topStats['Timeonline']}
</div>
<div class="forums" style="float: left;width: 77%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" style="text-align:center;">
<div class="theadtitle" style="float:none;"><a href="#"><center>Shoutbox</center></a></div>
</td>
</tr>
</tbody>
</table>
{$dvz_shoutbox}
{$forums}
</div>
<br class="clear" />
{$boardstats}
<br style="clear: both" />
{$footer}
</body>
</html>
21.03.2014, 16:29
#2
Możesz sobie pokombinować z marginesami w tym:
div.rotator ul li {
    
    position: absolute;
    list-style: none;
} 
np. margin-left: -30%;, chociaż nie wiem ile to da, bo masz na sztywno wciśnięte position: absolute.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
21.03.2014, 17:00
#3
Margin nie działa przy position absolute, tylko top, left...
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
21.03.2014, 21:11
#4
dobra, a jak to zrobić by nie najeżdżało na pasek nawigacji przy scrolowaniu??
21.03.2014, 23:16
#5
<td style="text-align:center;">
zamiast
<td>
pod
<tbody style="{$collapsed['2_e']}" id="2_e">
24.03.2014, 08:52 (Ten post był ostatnio modyfikowany: 24.03.2014, 18:51 przez Sabat.)
#6
no raczej to nie zadziała, ponawiam pytanie:


JAK to zrobić by nie najeżdżało na pasek nawigacji przy scrolowaniu??
25.03.2014, 15:26
#7
Gdybym zajrzał do tego tematu wcześniej, szybciej otrzymałbyś odpowiedź :)

W CSS jest coś takiego jak stopniowanie klas, czyli dla twojego banera dajemy niższe stopniowanie od paska nawigacji, dzięki czemu baner chowa się pod pasek.

1. W global.css dla klasy topwrap1 dodaj:

z-index: 100; 

2. Również w global.css dla klasy div.rotator dodaj:

z-index: 1; 

Wszystko powinno działać :)
Pomoc poza forum - odpłatnie.
27.03.2014, 09:18 (Ten post był ostatnio modyfikowany: 28.03.2014, 08:37 przez Sabat.)
#8
Dobra odnawiam temat, wypadało by to jednak wyśrodkować, bo dużo osób korzysta z laptopów, a wtedy to już wygląda nie za fajnie, próbowałem coś tam w css pokombinować i zamieniłem <td> na <td style="text-align:center;">

ale nic to nie dało jak na razie, a sam przez jakiś czas na lapku będę siedzial

Gobal.css
/* rotator bannerow */
div.rotator {
    position: relative;
    height: 220px;
    margin-left: 0px auto;
    marigin-right: 0px auto;
    text-align:center;
}

/* rotator css */
div.rotator ul li {
    
    position: absolute;
    list-style: none;
    margin-left: 0px auto;
    marigin-right: 0px auto;
    text-align:center;
}

div.rotator ul li.show {
    z-index:1;
    margin-left: 0px auto;
    marigin-right: 0px auto;
    text-align:center;
}

index
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}{$serversboard_index}

<div class="sidebar" style="float: right;width: 22%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" style="text-align:center;">
<div class="theadtitle" style="float:none;"><a href="#"><center>Partnerzy</center></a></div>
</td>
</tr>
<tbody style="{$collapsed['2_e']}" id="2_e">
<td style="text-align:center;">
<div class="rotator">
<ul>
<li class="show">
<a href="http://www.google.pl" target="_blank">
<img src="images/df/banner1.png" width="200" height="200" alt="pic1" />
</a>
</li>
<li>
<a href="http://www.google.pl" target="_blank">
<img src="images/df/banner2.png" width="200" height="200" alt="pic2" />
</a>
</li>
<li>
<a href="http://www.google.pl" target="_blank">
<img src="images/df/banner3.png" width="200" height="200" alt="pic3" />
</a>
</li>
</ul>
</div>
</div>
</td>
</tbody>
</table>
{$topStats['MostViews']}
{$topStats['Posters']}
{$topStats['Timeonline']}
</div>
<div class="forums" style="float: left;width: 77%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" style="text-align:center;">
<div class="theadtitle" style="float:none;"><a href="#"><center>Shoutbox</center></a></div>
</td>
</tr>
</tbody>
</table>
{$dvz_shoutbox}
{$forums}
</div>
<br class="clear" />

{$boardstats}
<br style="clear: both" />
{$footer}
</body>
</html>



Użytkownicy przeglądający ten wątek:

2 gości