css issue with UL/LI in ezpages links

ok, so i SWEAR i posted this like 2 days ago... but nooooo record of it, so i guess that would explain why noone has answered my question!!! :frusty: HAHAHAHA!

always, somethings not right in my code for ezpages links... after i made some modifications to get the hover to work...

i THINK it has something to do with adding some sort of li.a in the css to actually describe the right items... but not sure how to do this.

here is the applicable tpl_header.php and css stuff:

<!--bof-header ezpage links-->
<div id="topbar">
<ul id="topMenuStyle">
<li><a id="item1" href='http://customk9design.com/catalogzen/index.php?main_page=page&id=2'><span class="alt">About Us</span></a></li>
<li><a id="item2" href='http://customk9design.com/catalogzen/index.php?main_page=page&id=3'><span class="alt">Lifetime Guarantee</span></a></li>
<li><a id="item3" href='http://customk9design.com/catalogzen/index.php?main_page=page&id=5'><span class="alt">Eco Friendly</span></a></li>
<li><a id="item4" href='http://customk9design.com/catalogzen/index.php?main_page=contact_us'><span class="alt">Contact Us</span></a></li>
<li><a id="item5" href='http://customk9design.com/catalogzen/index.php?main_page=advanced_search&search_in_description=1&keyword=Enter%20search%20keywords%20here'><span class="alt">Search</span></a></li>
<li><a id="item6" href='http://customk9design.com/catalogzen/index.php?main_page=shopping_cart'><span class="alt">Shopping Cart</span></a></li>
</ul>
</div>
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->

#topbar img{
margin-left:-3px;
}
#topMenuStyle {
margin-left:-10px;
}
#topMenuStyle li {
display: inline;
list-style-type: none; /*removes the bullets*/
}
a#item1 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/about_us.gif);
    margin: 0 auto;
}
a#item1:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/aboutushover.gif);
}
a#item2 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/lifeguar.gif);
    margin: 0 auto;
}
a#item2:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/lifeguarhover.gif);
}
a#item3 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/ecofriendly.gif);
    margin: 0 auto;
}
a#item3:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/ecofriendlyhover.gif);
}
a#item4 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/contactus.gif);
    margin: 0 auto;
}
a#item4:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/contactushover.gif);
}
a#item5 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/search.gif);
    margin: 0 auto;
}
a#item5:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/searchover.gif);
}
a#item6 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/shoppingcart.gif);
    margin: 0 auto;
}
a#item6:hover {
    background-image: url(/catalogzen/includes/templates/darkness/images/shoppingcarthover.gif);
}
a .alt { display: none; }

Are you hard-coding those links into the header?

If so...

... why?

EZPages can create both internal and external links, and the styles (including hover) can be adjusted via the default stylesheet.css .

dont have a good reason for hard coding them...
i can go back and change...

but that doesnt affect whether they show inline or stacked?

and, i thought it was hardcoded if i gave the full file path... ie http://www.customk9design.com/catalogzen/includes/templates/etcetcetcetc...

?

You appear to have edited the PHP file to put those links in, instead of using the ez-page internal link functionality which would require no file edits at all for display.

wow. ok. so again, making something harder than it needs to be... but im still not understanding... the tutorial says "Internal Link URL

Internal Link URLs are links to internal pages within your shop. These can be to any valid URL, but should be written as relative links such as:

index.php?main_page=index&cPath=21

The above Link would take you to the Category for categories_id 21

While these links can be the Full URL to an Internal Link, it is best to write as a Relative Link so that if you change domains, are work on a temporary domain or an IP Address, the Link will remain valid if moved to another domain, IP Address, etc.

Internal Links can also open in a New Window or the Same Window or be for Secure or Non-Secure Pages."

to me, this reads as the explanation shows... linking the ezpage to another page in your site..

the way you seem to be explaining it is to use the internal link to link the ezpage back to itself?

sorry im not following.

also, any info regarding hover/rollover image changing would be great... im looking it up on my own in the meantime..

THANKS!

The internal link uses the ez-page system to put a link to the desired location into the specified ez-page menu (header, sidebox, footer).

When there is an internal or external link entered, no actual page is generated, but the menus will show the final destination link with the title you give in the admin.

A "page" titled "Contact Us" set to display in the header, sort order 10, with an internal link of
index.php?main_page=contact_us
will cause the header ez-page menu to show a link named Contact Us that will lead straight to the Contact Us page.

but i CREATED the page in EZ Pages...

i cant have data in the "html" box of the ezpage admin, while at the same time specifying a link? what am i linking to?

if i am editing my EZ Page "About Us", i cannot specify "main page=
About_Us" in the internal links...?

unless..................

are you inferring that i should be making the pages in "define page" editor?? THEN link them thru ezpages?

if so, how do i make more pages to use in the "define page" editor... is it as simple as going to page_2.php and copying it and renaming it page_3.php??

There is a default page in the Define Page Editor named define_contact_us.php. You would edit that to your liking; then if you want to show a link to it in the ez-pages header bar, you would create an ez-page named "Contact Us" with the internal link. The page that would be linked to and displayed would be the define page.

Any pages you make from scratch in ez-pages, like an About Us page, would be straight ez-pages in the header bar. The URL in the address bar when you are at that page would say
yoursite.com/index.php?main_page=page&id=7
or whatever ez-page id the about us page is.

gjh42:

There is a default page in the Define Page Editor named define_contact_us.php. You would edit that to your liking; then if you want to show a link to it in the ez-pages header bar, you would create an ez-page named "Contact Us" with the internal link. The page that would be linked to and displayed would be the define page.

Any pages you make from scratch in ez-pages, like an About Us page, would be straight ez-pages in the header bar. The URL in the address bar when you are at that page would say
yoursite.com/index.php?main_page=page&id=7
or whatever ez-page id the about us page is.

ok, so thats already how ive done it... exactly to the "t"

so the remaining question is, what is wrong with my css that is making that list of image links not display "inline"...

:)

OK, you hard-coded the links instead of using the ez-page header link system so you could use images to replace the text.

There has to be a better way to do this than hard-coding a whole new list (the "official" ez-pages header menu is not showing anything at all), but for now, you can make the links (which you have specified as block display) float left so they line up in a row. Add
float: left;
to each of the links like this:

a#item1 {
    display: block;
    width: 123px;
    height: 35px;
    background-image: url(/catalogzen/includes/templates/darkness/images/about_us.gif);
    margin: 0 auto;float: left;
}

There will be a simple image replacement mod you can make to a file that will automatically swap the text for an image. I'll look at it and get back - it may be a useful extension of the Image Titles mod.

YES, that is exactly what i did! :) and i couldnt find any good info for it ANYWHERE... i ended up writing it myself based on a tutorial that was showing how to do "no flicker" hovers in css... (i didnt feel like redoing all my images, so i just used the concept)

anyways... thanks a bunch, the float works. a few follow up ?s for you though...

1. i have minor overlap on some, will i use the margin-left: -x; on each one individually to correct this?
   (which leads me to)

2. it does look a "little" different in IE, so if i fix it for FF with margin left... how do i fix it for IE?

3. WARNING limited knowledge coming out here
   ok, so the float works... but why isnt it as simple as describing the ul, like it has been for my other lists, with "display: inline;"?

also, am i understanding correctly (to be very general here) that if youre describing a list or category that everything "nests" within the greater category... so, for example:
--------------#navMain ul------------------------
-----------#navMain ul li-------------------
----#navSupp ul li a-------
ul says "we're gonna have a list"
li says "heres the list"
a says "im a specific item in the list"

??????

IF my understanding of categories is correct, then why doesnt
#topMenuStyle li a{
display: inline;
list-style-type: none; /removes the bullets/

with an "a" work?

why isnt it as simple as describing the ul, like it has been for my other lists, with "display: inline;"?

The <li> inherit the inline styling of the <ul>, but the <a> elements are specified as block, which makes them take all of the available width and start on new lines. Adding the float to them lets them snuggle up together. (<a> elements by default are inline.)

There is no connection between <li> and <a> except that <a> elements can be inside <li> elements (or elsewhere).

ok! thanks glen...

ive decided i dont have to understand "why" it is.. just how it works.. lol
will i use the margin-left: -x; on each one individually to correct the float distances?

If you specify margin: on each item, you will have to change each one for margin-left. If the margins are all the same, you can remove all mention of them in the individual item rules and add a general margin rule:

#topMenuStyle li a {margin: 0 0 0 -0.3em;}

thanks!

i ended up having to move another button there today anyways, so i remade the buttons a tad shorter...

i had to move it over a little, but the whole thing looks (i think) a lot better...

https://www.customk9design.com/catalogzen

now to get rid of the space above it... 1 problem at a time!