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

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

Jak zrobić by na każdym monitorze sidebar wyglądał tak samo?

Inne  Założony przez  TheKubski.

27.04.2016, 22:00
#1
wersja skryptu MyBB: 1.8.7
adres forum: http://polscy-youtuberzy.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Ustawiłem wszędzie szerokość 293px, ale na różnych monitorach różnie to wygląda
<div class="sidebar" style="float: right; width: 293px; margin-top: 18px;">
{$topStats['LastThreads']}
{$fic_news}
<script>
   var sticked = $('#getsticky').val().split(",");
   $.each(sticked,function(i){
       $('td#'+sticked[i]).addClass('fic_sticky');
   });
</script>
{$topStats['LastActiveThreads']}
{$topStats['Posters']}
{$topStats['TimeOnline']}
    
    
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
               <tr><td class="baner_suz" colspan="1"><strong>Nasi Youtuberzy [BETA!!]</strong></td>
               </tr>
               <tr>
               <td class="trow1">    
<div class="rotator" style="float: top; width: 100%;">
<ul>
<li class="show">
<a href="https://www.youtube.com/c/madix7" target="_blank">
<img src="images/madix.png" width="293" height="150" alt="pic1" />
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCT_Va_D1EW5TgJYnT2Y_m0A" target="_blank">
<img src="images/kulturoznawca.jpg" width="293" height="150" alt="pic2" />
</a>
</li>
<li>
<a href="https://www.youtube.com/user/LYSYvBLACK2" target="_blank">
<img src="images/lysy.png" width="293" height="150" alt="pic3" />
</a>
</li>
</ul>
</div></td>
</tr>
</table>
 
    

    
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpolscy-youtuberzypl-1653579971569433%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=1593159891007843" width="293" height="340" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Reklama -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-7206387719026414"
    data-ad-slot="8086538086"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        
    </div>

U mojego kolegi z rozdziałką 1920x1080:
   

I u kolejnego kolegi z rozdziałką 1360x768:
   

U mnie:
   

Próbowałem też wszystko dać w procentach, ale efekt jeszcze gorszy..
27.04.2016, 22:12
#2
ustawić szerokości procentowo - pomoże
27.04.2016, 22:24
#3
(27.04.2016, 22:12)Supryk napisał(a): ustawić szerokości procentowo - pomoże

Rzeczywiście. Jak wtedy ustawiałem procentowo wyglądało to koszmarnie, gdyż bannery były o różnej rozdziałce :D
27.04.2016, 22:34
#4
a w czym problem ustawić dla banner max-width:100%; i wysokość na auto
27.04.2016, 22:46 (Ten post był ostatnio modyfikowany: 27.04.2016, 22:58 przez TheKubski.)
#5
<div class="sidebar" style="float: right; width: 22%; margin-top: 18px;">
{$topStats['LastThreads']}
{$fic_news}
<script>
   var sticked = $('#getsticky').val().split(",");
   $.each(sticked,function(i){
       $('td#'+sticked[i]).addClass('fic_sticky');
   });
</script>
{$topStats['LastActiveThreads']}
{$topStats['Posters']}
{$topStats['TimeOnline']}
   
   
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
               <tr><td class="baner_suz" colspan="1"><strong>Nasi Youtuberzy [BETA!!]</strong></td>
               </tr>
               <tr>
               <td class="trow1">    
<div class="rotator">
<ul>
<li class="show">
<a href="https://www.youtube.com/channel/UCT_Va_D1EW5TgJYnT2Y_m0A" target="_blank">
<img src="images/kulturoznawca.png" width="106%" height="150" alt="pic1" />
</a>
</li>
<li>
<a href="https://www.youtube.com/user/LYSYvBLACK2" target="_blank">
<img src="images/lysy.png" width="106%"height="150" alt="pic2" />
</a>
</li>
</ul>
</div></td>
</tr>
</table>

   Tylko, że mam problem z tym że jak ustawię szerokość sidebara na tyle co banner to sidebar rozjeżdża się na całe forum. Popróbuję jeszcze z tym auto;

Dobra popróbowałem. Rozmiar lysy.png jest większy od kulturoznawca.png i jak daję max-width:100% to banner lysy.png się rozjeżdża.

@Aktualizacja - Dobra widzę, że na komórce w miarę ok to wygląda. Dla bannerów dałem 106% width, dla likebox'a 100% bo jak dawałem 106% to był szerszy niż te bannery. Mimo wszystko temat niech będzie jeszcze otwarty bo jutro popytam moich kolegów z mniejszą rozdziałką ode mnie.
28.04.2016, 13:00 (Ten post był ostatnio modyfikowany: 28.04.2016, 13:01 przez Divir.)
#6
(27.04.2016, 22:46)TheKubski napisał(a): Mimo wszystko temat niech będzie jeszcze otwarty bo jutro popytam moich kolegów z mniejszą rozdziałką ode mnie.
Amm... Zmień rozmiar okna przeglądarki.
Btw nie spotkalem się jeszcze z sytuacją, gdzie dawanie szerokości na większej niż 100% byłoby dobrym rozwiązaniem. Warto rozważyć zmianę rozmiaru rodzica.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



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

1 gości