Technical Details
Forum version : #Invision
Position : Administrator
Concerned browser(s) : Google Chrome
Who the problem concerns : A few members
When the problem appeared : About 20 minutes ago
Forum link : http://fairytailonline-rp.forumotion.com/
Description of problem
Okay so here is the real issue here, recently I discovered from two users that the forum is hard to view because the resolution of the site is pretty high, now I understand that sounds like a pc problem and not a site problem. But I discovered a site that has everything I have but it fixes itself to all resolutions automatically and not only that keeps the site rather skinny enough for all users to see it.I want the width like this site has:
http://www.strongworldrol.com/
and I want it to work with my background banner which here is the code I have for it
- Code:
body {
background: url(http://i.imgur.com/refsMhJ.png) top center no-repeat,#000000 url("http://img0.joyreactor.com/pics/post/full/art-mountains-waterfalls-torii-gate-1015682.jpeg") no-repeat fixed center center;
}
And finally I want it to work with the slider I have, I realize I will have to resize the over all images to get it to work but I am willing to do it.
My code for the slider:
- Code:
<div align="center">
<div style="width:1231px;margin:0px auto;">
<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<div style="width:1231px;height:309px;" class="nivoSlider" id="nivoslider-125">
<img alt="" title="" src="http://i.imgur.com/HwSUlFk.jpg" /><a class="postlink" href="http://fairytailonline-rp.forumotion.com/?tid=3bbcb06209f1af91f5c74aa7d058bbe0"><img alt="" title="" src="http://i.imgur.com/gYRMVt1.jpg" /></a><a href="http://fairytailonline-rp.forumotion.com/t206-manual-guild-census#1172?tid=9b6b996efb30dc91f5c74aa7d058bbe0" class="postlink"><img alt="" src="http://i.imgur.com/pfxCu6Y.jpg" /></a><img alt="" src="http://i.imgur.com/8CiM6gV.jpg" /><a rel="nofollow" target="_blank" class="postlink" href="http://www.mangapanda.com/fairy-tail"><img alt="" src="http://i.imgur.com/JbgRsYd.jpg" /></a>
</div>
</div>
<p>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-125").nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:1000,
pauseTime:7000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
</p>
</div>
</div>
Code for New Slider to work with the width:
- Code:
<div align="center">
<div style="width:1079px;margin:0px auto;">
<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<div style="width:1079px;height:309px;" class="nivoSlider" id="nivoslider-125">
<img alt="" title="" src="http://i.imgur.com/Pw0KFLR.jpg" /><a class="postlink" href="http://fairytailonline-rp.forumotion.com/?tid=3bbcb06209f1af91f5c74aa7d058bbe0"><img alt="" title="" src="http://i.imgur.com/36rHosf.jpg" /></a><a href="http://fairytailonline-rp.forumotion.com/t206-manual-guild-census#1172?tid=9b6b996efb30dc91f5c74aa7d058bbe0" class="postlink"><img alt="" src="http://i.imgur.com/DdVghNo.jpg" /></a><img alt="" src="http://i.imgur.com/t36VrZ5.png" /><a rel="nofollow" target="_blank" class="postlink" href="http://www.mangapanda.com/fairy-tail"><img alt="" src="http://i.imgur.com/LqajbCJ.jpg" /></a>
</div>
</div>
<p>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-125").nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:1000,
pauseTime:7000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
</p>
</div>
</div>
This is what I have now:
This is what they have:
Now what is the big deal? Well if you can tell mine is far too wide where as theirs is the width I want the forum to be. I hope I clarified what exactly I wanted.