Jump to content


Photo

Newbie Css Problem

css

  • Please log in to reply
6 replies to this topic

#1 BeFreebies

BeFreebies

    Newbie

  • New Members
  • Pip
  • 4 posts

Posted 26 November 2012 - 07:51 PM

I have been strugling with the same problem for a few days now and I am about to give up. I have a website from a template and I am trying to insert vertical banners into the site (http://www.befreebies.com) and the only way I could figure out how to do that was with the code listed below, but when I resize the browser window the vertical banners float on the page, usually exactly over something I don't want to cover. I have googled and fiddled for days and I don't want to sound lazy... but is there anyone who can tell me if there a way to do this with CSS that that tells it to change its size and position on the page if I resize the screen? Thanks in advance.

<DIV ID="Banner" style="visibility:hidden;position:absolute;top:250px; left:1245px"> <script type="text/javascript"><!-- google_ad_client = (((my banner goes here))) </div>

Thanks.

#2 parkerj

parkerj

    Advanced Member

  • Members
  • PipPipPip
  • 167 posts
  • LocationBoston, MA

Posted 26 November 2012 - 08:04 PM

I see that you are using "float" for some of your "div" elements. Would "float:left" not work instead of "position"?

eduTrac ERP | College Management System


#3 BeFreebies

BeFreebies

    Newbie

  • New Members
  • Pip
  • 4 posts

Posted 26 November 2012 - 08:10 PM

I am sorry -- I have struggled with this for days but I do not really understand it. As I said, this was a template and I have managed to botch it up pretty good. Most of everything on that page is from the original template. I personally added the code to add the ad banners a few days ago and have tried almost nonstop to get them to work. I have tried many different things. Are you saying I should use float:left instead of "position"?

#4 parkerj

parkerj

    Advanced Member

  • Members
  • PipPipPip
  • 167 posts
  • LocationBoston, MA

Posted 26 November 2012 - 08:21 PM

Yes, I would edit the first part of each like so:
<div class=banner>

Then in your css add (you may need to adjust the margins to get it to sit where you want it):

.banner {
float:left;
margin:100px 10px 0px 10px;
}

It's hard to read your html code, but I think your first banner code should come before:
<div id=wrapper>

And the second banner code should come after the closing </div> for "wrapper".

Edited by parkerj, 26 November 2012 - 08:22 PM.

eduTrac ERP | College Management System


#5 BeFreebies

BeFreebies

    Newbie

  • New Members
  • Pip
  • 4 posts

Posted 26 November 2012 - 09:04 PM

Thank you so much for the help. I changed it, I think like you suggested, and where the left banner sits is perfect, but it seems to push down the remainder of the page. How do I tell it not to do that? (thanks again)

#6 parkerj

parkerj

    Advanced Member

  • Members
  • PipPipPip
  • 167 posts
  • LocationBoston, MA

Posted 26 November 2012 - 09:39 PM

Oh, sorry. I forgot to mention that you will need to calculate the width and make adustments. The width, margins and padding of .banner and the wrapper must not exceed the overall width of the section. However, I can't determine what that width is. This is why the main section is being push down.

eduTrac ERP | College Management System


#7 BeFreebies

BeFreebies

    Newbie

  • New Members
  • Pip
  • 4 posts

Posted 26 November 2012 - 11:19 PM

Okay - thank you for your help. I don't know how to find it but at least I know what I am looking for thanks to your help.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com