Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Extending Logo into Sidebox

    Hi all. I've been looking through the forums and hacking away at the css solving my problems up to this point but ran into something I'm not sure how to fix.

    I'm trying to extend my logo from the header into the left sidebox. In Firefox this works fine but in IE it pushes the side/center boxes lower.

    The site is http://www.imperialnorton.com

    I apologize from now for how the site looks. I've been mostly working on functionality and not so much on cosmetics.

    Thanks
    Mike

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Extending Logo into Sidebox

    You can try adding a width to your stylesheet #logo entry of say 125px....

    Normally, this would be sliced into 2 images and positioned/attached to differing parts of the template
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Re: Extending Logo into Sidebox

    Quote Originally Posted by kobra View Post
    You can try adding a width to your stylesheet #logo entry of say 125px....

    Normally, this would be sliced into 2 images and positioned/attached to differing parts of the template
    Just tried adding width with no effect... I thought that I'd have to split the image but got it to do what I wanted by removing the float left and adding text-align left to #logo. Then I double checked through IE and found it didn't work for that platform.

    If I have to I guess I'll split the image, it just seems a lot cleaner to leave it in one piece.

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Extending Logo into Sidebox

    Quote Originally Posted by Michael V View Post
    Just tried adding width with no effect... I thought that I'd have to split the image but got it to do what I wanted by removing the float left and adding text-align left to #logo. Then I double checked through IE and found it didn't work for that platform.

    If I have to I guess I'll split the image, it just seems a lot cleaner to leave it in one piece.
    You might be able to create a "logoBox" just for the logo and then use either absolute or relative positioning within the stylesheet to get the look you're after.

    something like this

    <div id=logoWrapper">
    <div id="logoBox">
    your_logo
    </div>
    </div>

    in the stylesheet you have something like this
    #logoBox {
    position: absolute;/* you could also use relative*/
    top: 0; /*adjust this to whatever you need*/
    left:0; /* adjust this to whatever you need*/
    }

  5. #5
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Re: Extending Logo into Sidebox

    Quote Originally Posted by clydejones View Post
    You might be able to create a "logoBox" just for the logo and then use either absolute or relative positioning within the stylesheet to get the look you're after.
    That would probably work, but I'd like to have background images going behind the logo. I made a few quick edit to the page to show what I mean: http://www.imperialnorton.com

    I think that if I made the logo it's own division/box, I would just run into the same problem of extending other images/navigation bars into the new box.

    Mike

  6. #6
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Re: Extending Logo into Sidebox

    In addition. I just checked my edits in IE and the discrepancy just got larger. In firefox the navigation bar goes behind the logo, in IE it gets forced below. Both properly show the background image going behind the logo. And again IE won't let the logo slide into the sidebox where in firefox in does (which is how I want it).

  7. #7
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Extending Logo into Sidebox

    Can do alot with the css for this...

    Try removing the current navMainWrapper entry and making it it's own entry with the following:
    Code:
    #navMainWrapper {
            float: right;
            width: 596px;
            margin: 0em 1.4em 0em 0em;
    	background-color: #abbbd3;
    	background-image: url(../images/tile_back.jpg);
    	font-weight: bold;
    	color: #ffffff;
            height: 1%;
    	}
    Zen-Venom Get Bitten

  8. #8
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Extending Logo into Sidebox

    And again IE won't let the logo slide into the sidebox where in firefox in does (which is how I want it).
    Suggestion: Do all of your design work in FF and disregard IE until complete or you will be chasing your tail forever.

    When done, then address the IE "quirks" mode issues - once and only once
    Zen-Venom Get Bitten

  9. #9
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Re: Extending Logo into Sidebox

    Quote Originally Posted by kobra View Post
    Can do alot with the css for this...

    Try removing the current navMainWrapper entry and making it it's own entry with the following:
    Sorry, I should have mentioned that I liked how the navigation bar went behind the logo and that's how I wanted it to show up in IE as well.

    I'm just trying to figure out if there is a fix for getting an image to overlap a division in IE (I'm checking it using IE 6) or if I'll have to cut the logo in two and call half from the header and half from the left column/sidebox.

    I'd prefer if the image could overlap so that I can make minor layout changes to the page without having to cut the logo in two every time. If I can't, then I'll wait until I have everything else with the page set up how I want and edit the logo once.

    Thanks for all the help & suggestions.

  10. #10
    Join Date
    Sep 2008
    Location
    California
    Posts
    10
    Plugin Contributions
    0

    Default Re: Extending Logo into Sidebox

    Well, I have come to the conclusion that I hate IE.

    If I use the position: absolute, I can get things to look right but if I change the resolution or modify the size of the IE window, things quickly start to go wrong.

    If I use the position: relative, IE doesn't allow the image to cross across divisions.

    If I try to cut the image into pieces and call them from the different divisions, IE looks like it tosses in a 1 pixel line along the division boundary which ruins the image.



    Any suggestions? The only thing I can think of is to take a 'print screen' snapshot of the page perfectly set up, cut out the section from the bottom of my logo up and turn it into my background (minus the text of course). The only thing stopping me right now is that it would be a pretty sloppy solution (IMO).

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 I want to add my SSL logo into a sidebox
    By 82dewey in forum General Questions
    Replies: 2
    Last Post: 23 Jun 2013, 05:34 PM
  2. v151 Scam advisor logo and link into sidebox
    By Phil Lomas in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 17 May 2013, 06:31 PM
  3. logo integrated into header bar
    By rogisf2000 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 7 Nov 2008, 08:27 PM
  4. How to create a blank extending sidebox ?
    By Travis Clark in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 6 Jun 2008, 02:27 AM
  5. Center Logo In sidebox, trust logo ?
    By [email protected] in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 27 Feb 2007, 05:35 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg