Want To Add A Static "Box" To The Two Sides Of My Website

Discussion in 'HTML & Website Design' started by bad_bob00, Dec 2, 2009.

0
  1. #1
    Hi,

    I've got a website online here: Sexy Footballers and I want to be able to add a box to either side of my page, which stays put, whilst the person scrolls up/down on any of the pages of my website.

    I'm just wondering, is this possible? Would it be very hard? And how would it be done? I've uploaded an image below of what I hope it would look like...

    [​IMG]



    Thanks for any help!
     
    bad_bob00, Dec 2, 2009 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    It is posible. Just put the box style "position: fixed".

    Example:

    <style>
    .box{
    position: fixed
    }
    </style>

    <div class="box">
    Advert image
    </div>
     
    s_ruben, Dec 2, 2009 IP
  3. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Thanks s_ruben, I've done this but its not quite in the right position. The text "advert" is right in the top left corner of the page, and although it is fixed I would like it to be in the center of the sidebar, if possible (like in the screenshot above).

    Thanks again for the help!
     
    bad_bob00, Dec 9, 2009 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Try it:
    <style>
    .box{
    position: fixed
    margin-left: 100px;
    margin-top: 200px;
    }
    </style>

    <div class="box">
    Advert image
    </div>

    You can change the position by changing margin-left and margin-top pixels.
     
    s_ruben, Dec 9, 2009 IP
    bad_bob00 likes this.
  5. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Thanks again s_ruben, and sorry got one final problem. I can get the text to appear on the left hand column, but can't seem to get it to appear on the right hand column. I think its just a case of knowing where to paste this code:

    <div class="box2">
    <p>Advert image</p>
    </div>

    Thanks for any more help!
     
    bad_bob00, Dec 9, 2009 IP
  6. Piggy

    Piggy Active Member

    Messages:
    574
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    70
    #6
    You're not putting any padding on the right hand box are you? That could cause the text to not show up if too much padding is applied. Also, that code should be pasted after the main content div of your website, assuming that the main content is centered. (I'm at school, can't pull the site up.)
     
    Piggy, Dec 9, 2009 IP
  7. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #7
    Paste it just after
    <div class="box">
    Advert image
    </div>

    so write after it

    <style>
    .box2{
    position: fixed
    margin-left: 700px;
    margin-top: 200px;
    }
    </style>

    <div class="box2">
    Advert image
    </div>

    and change the position by changing margin-left and margin-top pixels.
     
    s_ruben, Dec 9, 2009 IP
  8. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #8
    Hi guys, thanks for trying to help again. Nope, still can't get it to show up, even when removing all of the padding (I thought it might have been showing off the page) but I just can't seem to get it to show on the opposite side to the first advert image text.

    I've uploaded the changes to the Sexy Footballers site, but removed the code below because I can't get it showing in the right place.

    <div class="box2">
    <p>Advert image</p>
    </div>

    Thanks for any more help offered :)
     
    bad_bob00, Dec 10, 2009 IP
  9. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #9
    Anybody able to help? :( I can give them the code on my site if you need it or anything like that...

    Thanks to anyone who tries helping
     
    bad_bob00, Dec 11, 2009 IP
  10. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #10
    Probably the z-index could bring them up front:

    .box{
  z-index: 100;
  text-align: center;
  position: fixed;
  margin-left: 100px;
  margin-top: 200px;
  background-color:green;
  width:100px;
  height:100px;
}

.box2{
  z-index:100;
  text-align: center;
  position: fixed;
  margin-right: 100px;
  margin-top: 200px;
  background-color:blue;
  width:100px;
  height:100px;
}
    PHP:
    Also, declare box and box div container right after <body> tag:
    ...
<body>
<div class="box">
<p>Advert image</p>
</div> 
<div class="box2">
<p>Advert image2</p>
</div> 

<div id="wrap">
...
    PHP:
     
    hdewantara, Dec 14, 2009 IP