4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

</Div> - is the magic number !

by Melodican
3 replies
  • WEB DESIGN
    • |
Hey guys, I'm sorry for a newb question, but your help could prove invaluable....

I am trying to create a myspace header with an image, with other pictures as links over the top in order to create an interactive header.

I've uploaded my pics and have my background one in place but the other images to be used as buttons are not going over the top after inserting the code, moreso, they are putting them selves in the section "about me" when i want them to overlap the image....

I'm assuming this is due to some 'container' or holding 'div'

my code looks like this:






<a href=""> </a><style>body { margin-top: 545px; } .mybannerheadbanner-mainpicture { position: absolute; top: -9; width: 800px; text-align:center; margin-top: 0px; margin-left: -400px; left: 50%; }</style><div class="mybannermakerheadbanner"><a href=""><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/mainpic_01.jpg" alt='Glen Kirkham Myspace' border="0" /></a></div>



<div class="Top Click Banner">


<a href="http://www.glenkirkham.com" title="" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/clickhereforalbum.jpg" width="649" height="37" alt="Facebook" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopB {position:absolute; top:450px; left:50%; margin-left:-400px;}
</style>




<div class="GlenKirkham.com">


<a href="http://www.glenkirkham.com" title="" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/Glenkirkhamcom.jpg" width="237" height="64" alt="Glenkirkham.com" style="border:0" /></a>
</div>

<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopC {position:absolute; top:450px; left:50%; margin-left:-200px;}
</style>




<div class="Youtube">




<a href="http://www.youtube.com/glenkirkhammusic" Bookmark and Share" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/youtube.jpg" width="237" height="61" alt="Youtube" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopD {position:absolute; top:450px; left:50%; margin-left: 0px;}
</style>



<div class="Facebook">



<div class="Facebook">
<a href="http://www.facebook.com/pages/Glen-Kirkham/16395236658" title="Facebook" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/Facebook.jpg" width="237" height="60" alt="Contact" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopE {position:absolute; top:450px; left:50%; margin-left: 200px;}
</style>




<div class="Twitter">





<div class="Twitter">
<a href="http://www.twitter.com/glenkirkham" title="Contact" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/Twitter.jpg" width="237" height="40" alt="Twitter" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopE {position:absolute; top:450px; left:50%; margin-left: 200px;}
</style>









<div class="Myspace">
<a href="http://www.myspace.com/glenkirkham=" title="Myspace" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/Myspace.jpg" width="237" height="45" alt="Contact" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopE {position:absolute; top:450px; left:50%; margin-left: 200px;}
</style>













Many thanks in advance for your help with this issue...

:-)

GK
#&lt or div&gt #< or div> #magic #number
  • Profile picture of the author Loren Woirhaye
    I don't know CSS well enough to answer exactly, but you should
    know that the order, from top to bottom, of your images in your
    CSS affects which images show on top of others. Also the sizes
    of the "boxes" containing your images can force other images to
    show up below them.

    It looks to me like you've established a position for only your first
    image, so the rest are stacking up underneath it as if in a single
    table. What you want is to set them up so they are individual
    entities layered on top of each other.
    Signature
    {{ DiscussionBoard.errors[1591877].message }}
  • Profile picture of the author smoke.sessions
    The last 3 images have margin-left: 200px, the same in each one. Maybe you need to add 200 to each of them, like you've done in the first, second, and third image?

    I'm no CSS expert, just my two cents.
    Signature

    PM me if you need a custom WP plugin or a website built!

    {{ DiscussionBoard.errors[1593072].message }}
    • Profile picture of the author CarloD.
      If you give me the whole theme i will try loading it at my random myspace domain, and then I can play around with the code...

      But your main banner... you should have all your other <divs> within the background <div>

      Code:
      <div class="Top Click Banner">


<a href="http://www.glenkirkham.com" title="" target="_blank"><img src="http://i237.photobucket.com/albums/ff240/Glenkirkham/clickhereforalbum.jpg" width="649" height="37" alt="Facebook" style="border:0" /></a>
</div>
<style>
{! code author:Eileen; xiii | Welcome !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:535px;}
{! position div !}
div.iTopB {position:absolute; top:450px; left:50%; margin-left:-400px;}
</style>
      If this is the top main div, you are closing it then adding the clickable links below it.
      Signature

      {{ DiscussionBoard.errors[1593527].message }}

Trending Topics