Moving banner down a few pixels?

  • 1
  • Question
  • Updated 8 years ago
Hello All,
I'm trying to put a new navigation bar on my site that I've made myself, the HTML file is here. What I thought I could do was IFrame it to the top of my site, Rapitweet, but I lose some of my banner when I do that. I was wondering, is there another way I can get it on my site? Or is there a CSS hack to move the banner down a few pixels? Here's an example of what's happening: New Nav Bar
Any Ideas?
Thanks,
Callum Booth
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Try this Callum. Add it somewhere near the top of the page.

<!--

<style type="text/css">
#sys_banner {
margin: 5px 0 0 0;
}
</style>

-->

If it moves to much or not enough change the 5px value (also don't remove the 0's)

I can not test it so let me know if it works.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Also, you can use this if you want:

<style type="text/css">
#sys_banner {
padding-top:5px;
border:0px solid black;
}
</style>

Lee's code or my code will work. So, you can try both if you want. I usually use padding though since margin will apply around the whole banner. You can also put in a border if you want. (Just change '0' to whatever # of pixels you want.)

-->
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Nathan padding refers to space inside of a div, margin is the space outside. and the margin will not effect the whole div, the margin that I have set will only effect the top, 5px 0 0 0 is short hand for 5 at the top 0 everywhere else.
Padding might work out better, what I would actually do in this case is fully remove the banner and have the banner as an image. But It's to much to explain.
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Thanks for the suggestions UK Duke and Nathan! UK Duke's method worked best for me! Thanks again!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Sorry for the wrong information! If you want to do what Lee said that you could remove the banner and replace it as an image, here is the intructions:

1. First, put in this code:

<style type="text/css">

/*
***********************************
CSS to hide default Banner
***********************************
*/

#sys_banner {
display:none;
visibility:hidden;
}
</style>

2. Then, put this code in:

<style type="text/css">
/*
************************************
CSS to position new Banner
************************************
*/

.banner {
position:absolute;
top:10px;
right:25%;
}

/*
*******************************
CSS for img in Banner
*******************************
*/

img.banner {
width:500px;
height:300px;
border:0px;
}

/*
********************************
End of CSS
********************************
*/

</style>

<div class="banner">
<img src="resources/BANNER-IMAGE.JPG" />
</div>

4. Remember to change "BANNER-IMAGE.JPG" to the actual banner image in your File Manager. Also, make sure to change the "25%" part to however much you need for it to be and to change the "10px" part to however much pixels you need it to be from the top.

5. Now, it should be just like the other banner but you can now position it any where on the page! If you need it just a few more pixels down, change the "10px" part.

I hope this helps!

Nathan

-->