Page 1 of 3 123 LastLast
Results 1 to 10 of 29
  1. #1
    Join Date
    Apr 2007
    Posts
    53
    Plugin Contributions
    0

    help question Can links sit on top of my logo header?

    I feel bad start a new thread about this but I've searched "hi and lo" for a clear answer and due to my own ignorance I can't seem to understand the solution for any of the other posts so here is my problem:

    As you can see on my site:http://oneposhshop.com/Shop the logo.gif image should have several links in it for various pages in my site. (contact us, blog, shopping cart, home) I read in several places that this effect can be acheived through transparent images (whatever that means?) and image maps. In a few places I saw the suggestion to
    do a google search for image maps
    which I did but of course had no idea what exactly I was looking for and also found no suggestions of where I was meant to place the information back in zcart.

    I even went so far as to slice the image in a graphics program but I don't know where to insert the image slices into the code.

    Any suggestions would be tremendously appreciated!

    Thanks,

    Rochel

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    I'm glad to see you've got your site back in relative (if not absolute;) order.
    For the situation you have, I believe your best bet will be to simplify and consolidate the header area.

    Instead of trying to get the round corner images and logo image to cooperate, put them all together in a graphics program as one image the full size of the header. You can tweak until it looks perfect, since you are not trying to get a flexible layout.

    Use this image as the #headerWrapper background, with a height and width specified for #headerWrapper. The navbar can go in the top of headerWrapper with transparent background, and the links can each be a free-floating div absolutely positioned inside headerWrapper.
    Fewer elements, less complication.

  3. #3
    Join Date
    Apr 2007
    Posts
    53
    Plugin Contributions
    0

    Default Re: Can links sit on top of my logo header?

    Quote Originally Posted by gjh42 View Post
    Instead of trying to get the round corner images and logo image to cooperate, put them all together in a graphics program as one image the full size of the header.
    Actually, those corners which you see near the header are a "fluke". I've temporarily postponed trying to fix the corner issue (the corners are meant to be the four corners of the entire purple area) until the header and footer where arranged properly. The question was referring to the home, contact us, blog, and shopping bag links which I want to be individual links but since I don't know how to acheive that affect I placed them in the logo.gif image to illustrate the look I was going for.

    Back to your suggestion, I''m wondering whether this would still help me:
    Quote Originally Posted by gjh42 View Post
    Use this image as the #headerWrapper background, with a height and width specified for #headerWrapper. The navbar can go in the top of headerWrapper with transparent background, and the links can each be a free-floating div absolutely positioned inside headerWrapper.
    Fewer elements, less complication.
    Sounds simple, (I think ) but how exactly do I make the links
    Quote Originally Posted by gjh42 View Post
    each a free-floating div absolutely positioned inside headerWrapper.
    Thanks for all of your help and patience,

    Rochel

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    Ahhh... it helps to know the overall plan. Putting transparent round corners on a solid purple background so the pink background shows through is never going to work. It will be possible to get the effect you want, but you must start in a different way.

    First off, you can can the round* divs completely. I will be assuming that you want the purple area to stay the width it is now - floating width would make it much more complicated. You can't put the purple background in #mainWrapper, it will go in an inner wrapper. Give
    Code:
    #mainWrapper {
    	width: 940px;
    	margin:auto;
    	margin-top:23px;
    	margin-bottom:23px;
    	padding-bottom: 50px;
    	position: relative;
    	background-color: transparent;
    	background-image: url(../Images/bl_bg.gif);
    	background-position: bottom center;
    	background-repeat: no-repeat;
    	text-align: left;
    	vertical-align: top;
    	}
    Edit bl_bg.gif to have solid purple between the corners, and make it the width that is going to work given the sidebar and image you are containing and the spacing you want (940px or whatever - make all consistent).

    Note - is your template images folder really named /Images/? It would be better for the long run to rename it /images/ and change the few references you have now accordingly. Capitals in file/folder names are a great source of inexplicable errors, as it is so easy to forget to capitalize a word once in a while. Best to stick with standards unless there is a compelling reason not to.

    Now, you will have a transparent box with a purple round bottom. Next come upper and middle sections to fill it.

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    Put the round top and logo images together with purple filling into one image that looks exactly like you want the whole top/header area to be. Maybe change the filename to header_bg.gif.
    You can leave off the link graphics, as it will be easier to position them later with the link divs.
    Style the header:
    Code:
    #headerWrapper {
    	width: 940px;
    	height: 250px;
    	background-image: url(../Images/header_bg.gif);
    	position: relative;
    	}
    Make h & w match the background image size.

    Now for #contentMainWrapper:
    Code:
    #contentMainWrapper { /*controls trois soeurs picture container*/
    	width: 100%;
    	position: relative;
    	background-color: #711C4F;
    	}
    And the sidebar:
    Code:
    #navColumnOne {
    	background:  url(../Images/menu_background_switched_skinny.gif);
    	background-position: top center;
    	background-repeat: no-repeat;
    	height: 1200px; /*or whatever the bg image needs*/
    	padding-top: 68px; /*gives space above bag images*/
    	padding-bottom: 44px; /*gives space below bag images*/
    	padding-left: 16px;/*gives space for Shop Posh bg*/
    	padding-right: 16px;
    	margin-top: -50px; /*controls how high the menu background image is*/
    	margin-left: 30px; 
    	}
    Note - the whole

    padding-top: 68px; /*gives space above bag images*/
    padding-bottom: 44px; /*gives space below bag images*/
    padding-left: 16px;/*gives space for Shop Posh bg - adjust as reqd*/
    padding-right: 16px;

    can be condensed into

    padding: 68px 16px 44px 16px;

    Get rid of all the table stuff inside navColumnOne. All you need is the divs with their link images. Put them *inside* navColumnOneWrapper, and code them each like this:
    PHP Code:
    <div class="shopposh"><a href="http://oneposhshop.com/Shop/index.php?main_page=index&cPath=1"><img src="http://oneposhshop.com/Shop/includes/templates/Posh_by_Trois_Soeurs/Images/Dresses_shopping_bag.gif" ></a></div
    and style .shopposh:
    Code:
    .shopposh {
    	width: 79px;
    	height:95px;
    	text-align: center;
    	padding-top: 5px;
    	}
    You can also just make sure all the bag images are the same size and eliminate the width, height and text-align: center; and let the images give size to the shopposh divs.

  6. #6
    Join Date
    Apr 2007
    Posts
    53
    Plugin Contributions
    0

    Default Re: Can links sit on top of my logo header?

    but what about the original problem about the logo (the reason that I opened this thread) I want some links to sit ontop of the logo. how do I do that?

  7. #7
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    Work on this and then get back with your results; then we'll go into the header links (oh yeah... that's all you asked about in your OP :)

    The header links can't effectively be positioned until the underlying structure is rationalized.

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    Oh, and #navColumnOneWrapper needs no styling right now.

  9. #9
    Join Date
    Apr 2007
    Posts
    53
    Plugin Contributions
    0

    Default Re: Can links sit on top of my logo header?

    Quote Originally Posted by gjh42 View Post
    First off, you can can the round* divs completely.
    Are you referring to this part of the css?
    Code:
    .roundcont {
        width: 974px; /*purple square width*/
        height: 1090px; /*purple square height*/
        position: relative;
        left: 154px; /*effects logo and corner position also home and login*/
        background-color: #711C4F;
    }
    
    .roundcont p {
        margin: 0 0px;
    }
    
    .roundtop {
        background: url('.../Posh_by_Trois_Soeurs/Images/tr_bg.gif') no-repeat top right; 
        width: 940px;
        position: relative;
        left: -4px;
        top: -2px;
    }
    
    .roundbottom {
        background: url('.../Posh_by_Trois_Soeurs/Images/br_bg.gif') no-repeat top right; 
        width: 940px;
        position: relative;
        left: -4px;
    }
    
    img.corner {
       width: 80px;
       height: 79px;
       border: none;
       display: block !important;
    }
    You can't put the purple background in #mainWrapper, it will go in an inner wrapper.
    As far as I can tell, the purple background wasn't in the #mainWrapper, it was in ".roundcont "

    You can't put the purple background in #mainWrapper, it will go in an inner wrapper. Give
    Am I missing something here or was that a typo? Give what?

    Edit bl_bg.gif to have solid purple between the corners
    This image file only contains the bottom left corner. I copied and edited this code from http://kalsey.com/blog/2003/07/rounded_corners_in_css/ as suggested by jettrue in in this thread: http://www.zen-cart.com/forum/showpo...&postcount=600

    I hate to sound like a dummy but I guess it's difficult to hide the truth

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Can links sit on top of my logo header?

    Wherever the purple was, it needs to go in contentMainWrapper.

    The "Give" was meant to lead into the #mainWrapper declaration, but it doesn't look so clear the way it ended up on the page.

    Both bottom corner images are contained in one div... when you say they are separate, I understand now that one must be a background pinned to the right and one is an image on the left. Be that as it may, your page layout does not require flexible width, so it will be easier to put both corners with the purple between them into one image and position that at the bottom as a background.

    And for the roundconts, I meant not just the css, but actually removing all the roundcont divs from the php file.
    Last edited by gjh42; 15 May 2007 at 11:32 PM.

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. congradulation sign and top header logo
    By kharames in forum General Questions
    Replies: 9
    Last Post: 30 Apr 2011, 01:55 AM
  2. Top Header Links
    By neighbornick in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 31 Mar 2009, 01:12 AM
  3. Can't get ssl logo to sit in Header
    By hardwiredtemplates in forum Templates, Stylesheets, Page Layout
    Replies: 34
    Last Post: 23 Feb 2009, 04:27 PM
  4. Adding links to top header
    By tenessaa in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 7 Nov 2008, 09:40 PM
  5. Placing My Top header (Logo)
    By classact in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 16 Nov 2007, 11:13 PM

Bookmarks

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
Zen-Cart, Internet Selling Services, Klamath Falls, OR