Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    May 2008
    Posts
    65
    Member #
    16874
    Hey everyone,
    Hope you had a great week.
    I'm trying to put a logo on the side (or outside) of a container div. Not sure exactly how. I know I want it to be attached so that when the user moves the browser window the logo and container move together.
    Here is the code for that area -
    I also attached a screen shot.

    body {
    background-image: url(images/background.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    padding: 0;
    margin: 0;
    }
    #logo-side {
    background-image:url(images/blueCat-graphics_logo_side.png);
    height: 230px;
    width: 55px;
    background-repeat: no-repeat;
    padding: 0px;
    float: left;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: absolute;
    left: 260px;
    }

    #container {
    height: 600px;
    width: 707px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    overflow:hidden;
    }
    #top {
    height: 19px;
    width: 707px;
    background-image: url(images/main_top.png);
    float: left;
    background-repeat: no-repeat;
    background-position: left top;
    }
    Thanks for your help
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    We need to see the markup too to see how you have the divs nested, or not.

  4. #3
    Member
    Join Date
    May 2008
    Posts
    65
    Member #
    16874
    Here is the HTML
    <body>
    <div id="logo-side"></div>
    <div id="container">
    <div id="top"></div>
    <div id="middle">
    <div id="leftCol">Content for id "leftCol" Goes Here</div>
    <div id="rightNav">Content for id "rightNav" Goes Here</div>
    </div>
    <div id="bottom"></div>
    <div id="bottomNav"></div>
    <div id="bottomNav-reflection"></div>
    </div>
    </body>

    Thanks for your input

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I'm thinking you might try "relative" instead of "absolute" positioning.
    It would be nice if we could see the website itself so we could grab
    the image(s) and experiment ourselves.


  6. #5
    Member
    Join Date
    May 2008
    Posts
    65
    Member #
    16874
    Thanks, I will try that. I don't have a URL yet. I wanted to get closer to finishing the design before I spend the money.
    Also, I know I can include the side logo in the art work, but the file size is a lot larger. I wanted to avoid a work around. I will try relative.

    Thanks again.

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    A couple of no-no's to start you off.

    You have 2 different positions declared, float and absolute.
    You have 2 different margins set, 0 and 260px.

    You need to pick one or the other. The browser will pick the last one in the css rules I believe, so start with that and then come back.

    #logo-side {
    background-image:url(images/blueCat-graphics_logo_side.png);
    height: 230px;
    width: 55px;
    background-repeat: no-repeat;
    padding: 0px;
    float: left;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: absolute;
    left: 260px;
    }


    You don't need "float: left" in your "top" div either. It has the same width as you container.

    Everything needs a little work, but I would start eliminating some things instead of adding more. Try that then maybe we can help a little more if you have a specific question.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Mary, just so you know ...

    There are several webhosts that are rather inexpensive.
    The one that comes to my mind is "www.cleverdot.com".
    Only about $35 per year, and that includes the domain name.

    Even if you just subscribe for one year to just work on the website,
    it would be worth it ... the cost of a half a tank of gas.


  9. #8
    Member
    Join Date
    May 2008
    Posts
    65
    Member #
    16874
    mlseim - I took your advise and signed up with x10 Hosting for free. It wasn't too scary. Anyway, here is the url: http://bluecat.x10hosting.com/

    Two things I'm hoping to solve/understand
    1. I want the Logo to attach to the container it moves when the window moves. Is that possible without putting it in the container?

    2. I have another issue I haven't been able to wrap my brain around yet. I have two divs floating side-by-side. How do I get the background image in the container div to grow with the floats?

    You guys are the best - Thanks

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Well, I played around with it and with FireFox things are OK.

    IE sucks so bad, it's a mess.

    PNG image transparency problem with IE6:
    http://www.google.com/#hl=en&q=ie+pn...fp=azWfBBCvguA

    IE Box Model Problem:
    http://www.google.com/#hl=en&q=ie+bo...fp=azWfBBCvguA


    Here's my test site. I changed so many things I can't describe here:
    http://www.catpin.com/bluecat

    I got too tired, so I gave up.



    .


  11. #10
    Member
    Join Date
    May 2008
    Posts
    65
    Member #
    16874
    Wow! Thanks mlseim!
    It does look good in Firefox. Thanks for the IE info.
    I really appreciate the time you put into this.
    Now I'm going to dissect it and try and figure out how you got to work.

    Thanks again


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com