Page layout question

No dice. I checked to make sure I deleted the correct clearBoth and I did. I also added the height code just as you said but I'm not seeing any difference after the change?

Ian

Install this mod...It will easily do what you are trying to do:

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=132

Hope this helps.

Not exactly... r1formetoo is trying to get the ez-pages navbar next to the logo, not the header navbar below the logo.

I see the clearBoth at the bottom of the navigation block, but it doesn't seem to be doing anything. Add a clear to #logoWrapper and you will get the right effect:```
#logoWrapper {
width:200px;
height:150px;
float: left;
clear: both;
}

Ok, I added the clear but it didn't seem to change anything...

Ian

Did you refresh the site view? I now see things mostly where they should be. The header navbar doesn't have a height since its clearBoth is somehow not functioning, and that is why there is no green background for it. Can you post your current tpl_header.php in ```
[php] and [/php]

Erratum: I misremembered the order for background-position - it should be horizontal then vertical.

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: center 35px;/*adjust as required*/
	height: 191px;
	}
```This should help the alignment of the background.
Also, giving #navMainWrapper a height will let its bg show:```
#navMainWrapper {
    height: 23px;
    }

Oh my god, it did it, it did it, it did it. Merry Christmas to me, merry Christmas to me, holy freakin A crap, merry Christmas to me. Thanks Glenn and merry Christmas to you too of course.

Ok, so here's what's next. I want to move everything upward so that there is nothing green above my lawn mower guy. This means relocating the "home" and "log in" to somewhere else. Could they perhaps be in with the ez links?

Ian

Glad it's all working now! You could move the Home and Login to the ez-pages bar, but when logged in, the Login link changes to Logout and My Account links. That behavior wouldn't translate. Also, when there is something in the cart, Shopping Cart and Checkout links appear. This would make the lower bar too crowded.

I think you are best off leaving the header nav where it is, and making the background blend with the rest of the header. These stylesheet changes will do that:```
#headerWrapper {
background-image:url(../images/head_bg_2.gif);
background-repeat: no-repeat;
background-position: center 29px;/changed 12-24/
height: 191px;
}

#logoWrapper {
width:200px;
height:150px;
float: left;
clear: both;
}

#logoWrapper+.clearBoth {display: none;} <-------delete this now - you don't need it anymore
/this is temporary and lets the ez-pages bar sit next to the logo -
you need to delete the <br class="clearBoth" /> in tpl_header.php as advised above./

...

/navigation/
...

#navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

#navMainWrapper {/separate this selector to its own rule 12-24/
background: #D1E6FB;
padding: 0 0.2em;
font-weight: bold;
height: 29px;
}

...

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #00aa00;/changed 12-24/
white-space: nowrap;
}

Glenn, check out the page now. I haven't made a single change to it and yet now it has gone wild. The thing is jacked up. What happened?

Ian

The thing is jacked up. What happened?

Your stylesheet appears to have gone missing. YIKES!

Do you have a backup copy of your stylesheet.css?

Tina

charmedbytina2:

Your stylesheet appears to have gone missing. YIKES!

Do you have a backup copy of your stylesheet.css?

Tina

Tina, you turned out to be spot on. I looked and for who knows what reason the style sheet wasn't there. So, I uploaded it back onto the server. Now when I go back and reload the page the ez pages links seem to have spontaneously moved upward. Any idea why? Derned if I know. My next project is to fix that, then move on to changing the way the green bar at the top of the page looks. I don't mind keeping Log In and Home at the top of the page as they currently are; however, I want that green section to blend in with the blue sky so that the top of the page keeps the upwards blue sky feel to it. Any body that knows how to do this please chime in.

Ian

See my post 28 for the nav blending.

gjh42:

See my post 28 for the nav blending.

Okay Glenn, I went back to post 28 and made the changes you suggested. However, I'm unsure about the portion below:

#logoWrapper+.clearBoth {display: none;} <-------delete this now - you don't need it anymore
/this is temporary and lets the ez-pages bar sit next to the logo -
you need to delete the <br class="clearBoth" /> in tpl_header.php as advised above./

I looked in catalog/includes/templates/mower/common/tpl_header.php and did not find the text #logoWrapper+.clearBoth that you mentioned. Is this something I've already done or is it something that needs to be done next? My next attempt will be to move the ez pages links back down into the grass. I don't know how they moved upward to their location now because I don't recall making any changes that would have do this but I could be wrong. Lastly, I seem to recall adding more than 3 ez pages links to the header but yet only 3 links are showing. Any idea why? Thanks in advance again!

Ian

You must have reverted to an earlier version of the stylesheet while recovering the misplaced one. I recognize the double zeros in the margin property:```
#navEZPagesTop {

width: 512px;/*adjust to taste*/

float: right;

background: none;

font-size: 0.95em;

font-weight: bold;

margin: 5px 0 00em;

padding: 0.5em;

}

should be
#navEZPagesTop {
width: 512px;/adjust to taste/
float: right;
background: none;
font-size: 0.95em;
font-weight: bold;
margin: 111px 0 0 0;
padding: 0.5em;
}

Also, the version of the stylesheet you have now was from before you put the
#logoWrapper+.clearBoth {display: none;}
into it, so it's not there to delete.

Ok, so I made that change and it did indeed fix my ez pages links location; however, I don't know why it fixed it and that's not good. I know we're catching fish here but I couldn't do this if you left. Also, I'm not sure why some of my ez pages header links are not showing up. I have "my account" selected to show in the header but it's not. What's that all about?

Ian

r1formetoo:

Also, I'm not sure why some of my ez pages header links are not showing up. I have "my account" selected to show in the header but it's not. What's that all about?

Ian

Ian,

Do all of your EZ Pages have a sort order?

Tina

Ah hah. Yeah that was it alright. So, would I adjust the 111px margin to try to bring the ez pages links closer to the logo? I'd like to gain a little more room for another link or two.

Ian

The
margin: 111px 0 0 0;
is the full-control form of the property; it specifies the margin for top, right, bottom and left. You can condense it in various ways if you don't need to set separate margins for all sides, down to something like
margin: 5px;
for a uniform 5px on all sides.

Since the ez-pages bar is floated right, its left edge depends only on the width set for it. You can increase the width, but too much and it won't fit on the same line as the logo and will drop down. Experiment!

To learn more about any CSS property, or CSS or PHP in general, check out https://www.w3schools.com.

Glenn, this computer is really beginning to upset me. I'm making changes in my stylesheet but when I reload the page I can not see any changes. I've made several changes and sometimes I have to wait 10 minutes and upload a page 5 times before the change is actually visual. It even constantly keeps reverting back to my old logo image instead of using my new logo image. It's like my pc just picks something to go with and to hell if it's the same thing it picks on the next page load. I also want to change the color of the fonts for my "information" sidebox and the footer but I can't seem to find which color in my style sheet to change. Please help.

Ian

This is a good time to get your feet wet in locating element tags on your own. You should install Firefox and its Web Developer extension to make your development life easier.

The Information > Display Element Information button will show all kinds of info about any element you click on. You can use that to locate the class or id involved, and the CSS > Edit CSS button will let you see the effects of stylesheet changes instantly.