vForums Support > vForums :: Support :: > Ad overlaps forum?
Ad overlaps forum? - Posted By Nick (nickb) on 22nd Jan 12 at 5:19am
Forum URL: http://pwh.vforums.co.uk | http://support.powerwh.com/
Experienced By: me
Browser: Comodo Dragon (Chromium)
Operating System: Windows 7 Ultimate

Problem:

It seems when floating to the left for ads it overlaps the forum. I don't think it could be my external CSS would it?


Code:
Select All
 
  1. body {
  2.     background:white url(http://powerwh.com/images/bg.jpg) repeat-y center;
  3.     margin:0;
  4.     text-align:center;
  5. }
  6. body,td,th {
  7.     font-family: Arial, Helvetica, sans-serif;
  8.     font-size: 12px;
  9.     color: #686868;
  10. }
  11. a:link, a:visited {
  12.     color: #3370a6;
  13. }
  14. a:hover{
  15.     color:#00529a
  16. }
  17. #wrapper{
  18.     width:958px;
  19.     margin:0 auto;
  20.     text-align:left;
  21.     padding:2px;
  22.     position:relative;
  23.     background:url(http://powerwh.com/images/contentrepeat.jpg) repeat-y;
  24. }
  25.  
  26. .clear{
  27.     clear:both;
  28. }
  29. img.border{
  30.         background:#fff;
  31.         padding:3px;
  32.         border:1px solid #dadada;
  33.     }
  34.     img.fright{
  35.         float:right;
  36.         background:#fff;
  37.         border:1px solid #ccc;
  38.         padding:3px;
  39.         margin-left:10px;
  40.         margin-bottom:10px;
  41.         margin-top:10px;
  42.     }
  43.         img.fleft{
  44.         float:left;
  45.         background:#fff;
  46.         border:1px solid #ccc;
  47.         padding:3px;
  48.         margin-right:10px;
  49.         margin-bottom:10px;
  50.         margin-top:10px;
  51.  
  52. #header{
  53.     width:100%;
  54.     background:url(http://powerwh/images/header.jpg) repeat-x top;
  55.     height:64px;
  56.     padding-top:15px;
  57. }
  58. /* === Logo === */
  59.  
  60. #logo {
  61.   position:absolute;
  62.   top:-10px;
  63.   
  64.  
  65. }
  66.     
  67.     
  68. #social{
  69.  
  70.     position:relative;
  71.     float: right;
  72.     
  73. }
  74.  
  75.     
  76.     
  77. /* === Nav === */
  78. #nav{
  79.     background:url(http://powerwh/images/navbg-repeat.jpg) repeat-x top;
  80.     height:56px;
  81.     width:100%;
  82.     margin:2px 0;
  83.     position:relative;z-index:999;
  84. }
  85. #nav .inner{
  86.     width:100%;z-index:999;
  87.     height:56px;
  88.     background:url(http://powerwh/images/navbg-middle.jpg) top center no-repeat;
  89. }
  90. #nav ul {
  91.     font-size:18px;
  92.     padding: 5px 0 0 30px;
  93.     margin: 7px 0;
  94.     list-style: none;
  95.     float: left;
  96.     text-shadow:1px 1px white;
  97.     z-index:999;
  98. }
  99. #nav ul li{
  100.     display:inline;
  101.     float:left;
  102.     z-index:100;
  103. }
  104. #nav ul li a:link, #nav ul li a:visited{
  105.     display:inline;
  106.     color:#525252;
  107.     display:block;
  108.     text-decoration:none;
  109.     height:44px;
  110. }
  111. #nav ul li a:hover{
  112.     display:inline;
  113.     color:#000;
  114.     background:url(http://powerwh/images/bgright.jpg) no-repeat top right ;
  115.     display:block;
  116.     text-decoration:none;
  117.     height:44px;
  118. }
  119. #nav ul li a.current{
  120.         background:url(http://powerwh/images/bgright.jpg) no-repeat top right ;
  121.         height:44px;
  122. }
  123. #nav ul li a.active{
  124.         background:url(http://powerwh/images/bgright.jpg) no-repeat top right ;
  125.         height:44px;
  126. }
  127. #nav ul li a.current span.link,#nav ul li a.active span.link, #nav ul li a:hover span.link {
  128.     background: url(images/bgleft.jpg) no-repeat top left;
  129. }
  130. #nav ul li a span.link {
  131.     margin: 0 18px 0 0px;
  132.     padding: 12px 8px 14px 18px;
  133.     position: relative; /*To fix IE6 problem (not displaying)*/
  134.     float:left;
  135.     cursor:pointer;
  136. }
 
Re: Ad overlaps forum? - Posted By Ross (admin) on 22nd Jan 12 at 10:03pm
Overlapping will occur on small screens if you make the forum width too wide. Say on my main monitor (1280px), looks fine. But when I move across to a smaller one at 1024px resolution, yes, it will overlap because you've set the forum to be about 900px wide. I believe about 750px allows for display on 1024px with no problems. Or you can use the right hand column advert positioning which I believe allows for a little extra room.
Re: Ad overlaps forum? - Posted By Nick (nickb) on 22nd Jan 12 at 11:07pm
Well I'm using a 1600x900 resolution.

http://uploads.vforums.co.uk/forums/support/Untitled-3hs.jpeg

It's floating to the right. I've had it next to the edge of my screen before on iDirectory. Basically I thought it was like how my own site is http://powerwh.com when it floats on the left side of the screen.

If you look at my other skin (Website or even Plain) It shows that it is close to the screen.

http://uploads.vforums.co.uk/forums/support/Untitled-3hl.jpeg

Now my suspicions lie within my external CSS.

edit: now that I removed my CSS it's all the way to the edge of the screen... {Sad}

http://uploads.vforums.co.uk/forums/support/Untitled-kpt.jpeg
Re: Ad overlaps forum? - Posted By Ross (admin) on 22nd Jan 12 at 11:31pm
You hadn't specified which skin this was on - so assumed the default (Website).

Would guess it's something to do with the width/styling of #wrapper. If you want to add the CSS back on can take a look (although am still not sure which skin was having the problem).
Re: Ad overlaps forum? - Posted By Nick (nickb) on 23rd Jan 12 at 3:08am
Ohh.... haha. Sorry. Skin1. :> lol.
Re: Ad overlaps forum? - Posted By Nick (nickb) on 28th Jan 12 at 2:57am
Fixed. Changed a few things in the CSS, now I have to figure out how to get the CSS to work in the Header. Can't seem to figure that out. {Unsure}