|
|
|
Junior Member
 
Group: Forum Members
Last Login: 9/16/2008 8:39:15 PM
Posts: 13,
Visits: 81
|
|
| I created my navigation buttons with CSS code exactly as in the tutorial except that I don't have a separate image for the hover state so I didn't include the code for the background position in ul a:hover. This code is on an attached style sheet on which I also have coding for regular hyperlinks (not in the ul) for link, visited, hover, active (in that order). When I preview in IE6, click on the link & then go back, I am getting the active color for regular hyperlinks. What am I doing wrong? Once I attach the dwt to a page, I would like to remove the hyperlink from the button for that page (it is in an editable region), but when I remove the hyperlink in the coding (<a=href "url"></a> ) in the <li> (I left the button name in), I lose the button & only have the text. Can I remove the link & still have the button? If so, how? All of the buttons are on the left side of the page (because the code floats left so they are horizontal?). Is there any way to get them centered but still have them horizontal?
|
|
|
|
|
Supreme Being
Group: Administrators
Last Login: 10/24/2008 2:27:36 PM
Posts: 437,
Visits: 632
|
|
Is it possible to see the page or the code?
=========================
My wife has given birth to our twins, so I'm still going to be spotty around here. It never seems to correct itself does it? I'm sorry, I'm trying.
=========================
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 9/16/2008 8:39:15 PM
Posts: 13,
Visits: 81
|
|
| I couldn't figure out how to attach the files to an email, so here's the coding from my style sheet for the links & ul links. navButtons is the div for the ul & navSameLvl is for the div where regular hyperlinks are. (FYI-I added underline to my hover links because I was not getting one otherwise.) a:link {
color: #008000;
text-decoration: none;
}
a:visited {
color: #008000;
text-decoration: none;
}
a:hover {
color:#008000;
text-decoration:underline;
}
a:active {
color: #009999;
text-decoration: none;
}
ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
text-align: center;
float: left;
height: 25px;
margin: 0px;
padding: 0px;
width: 800px;
}
ul a {
display: block;
width: 76px;
height: 25px;
color: #008000;
line-height: 25px;
text-decoration: none;
background-image:url('images/button.jpg');
background-repeat:no-repeat;
}
ul a:hover {
color: #008000;
text-decoration:underline;
}
ul li {
display: inline;
float: left;
}
.navButtons {
position: relative;
width: 800px;
z-index: 4;
margin-top: 5px;
margin-bottom: 15px;
}
.navSameLvl {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #008000;
margin-bottom: 20px;
position: relative;
width: 800px;
z-index: 5;
font-weight: bold;
clear: left;
left: 0px;
top: 0px;
}
Here's the coding in my master.dtw page for the buttons & the regular nav links. <div id="navbuttons" class="navButtons">
<ul>
<li id="Home"><a href="index.htm">Home</a></li>
<li id="Products"><a href="products.htm">Products</a></li>
<li id="Embroidery"><a href="embroidery.htm">Embroidery</a></li>
<li id="Contact"><a href="contact_us.htm">Contact Us</a></li>
<li id="Search"><a href="search.htm">Search</a></li>
<li id="Cart"><a href="https://cart reference deleted">View Cart</a></li>
</ul>
</div>
<div id="navsamelvl" class="navSameLvl">
<a href="links.htm">Links</a> | <a href="manufacturers.htm">Tackle Manufacturers</a> |
<a href="gift_certificate.htm">Gift Certificate</a> |
<a href="customer_comments.htm">Customer Comments</a> |
<a href="terms_returns.htm">Terms & Returns</a></div>
</div>
Hopefully you can figure out why I am getting the active color on my buttons after a page is visited. When I check the link colors in the master.dtw page properties, it appears that the style sheet is controlling the colors because link is automatic (my set text color is the same color as link is set in the style sheet), & the other three are showing the colors from the style sheet. Also, if you could tell me if there is a way to get the buttons centered on the page horizontally & if there is a way to name the ul on this page so that I don't get buttons for every link I have in my page content once I attach it to a page, I'd appreciate it. Carolyn Bell
|
|
|
|
|
Supreme Being
Group: Administrators
Last Login: 10/24/2008 2:27:36 PM
Posts: 437,
Visits: 632
|
|
Honestly I never set an active state, so I haven't noticed this, but it appears that IE6 is only staying stuck in that active state if you hit the back button. I made a second page and linked it to that page, with a simple text link in that second page to send me back to the first, and the active state wasn't stuck. I don't know for sure, but this might be a specific bug in IE. Personally I don't find the active state in links to be that useful to the user, so I don't use them. You may want to decide if you need them, or be okay if they get stuck when someone hits the back button. Or there may be another answer that I'm not aware of.
As for your button disappearing, right now all of those settings are on your ul a, so if you take off a link, the image will disappear. You could either change your liink on that button to the # symbol, which will still make the text look and act as a link, but not actually go anywhere, or you will need to put your image settings on your ul li instead.
As for centering your nav, that is possible. First a couple of things. You currently have a class for navButtons, make this an ID, so #navButtons, instead of .navButtons. Then put #navButtons in front of all of your ul settings. Doing this will make only unordered list inside of your id navButtons follow these rules, which will be helpful if you need to use actual unordered lists in your content. Then to center them, you will want a width on your #navButtons, which you currently have at 800px, and put the margin-left and margin-right to auto on that. That will center your navButtons div, and all of the buttons are inside of that. However, your buttons won't look perfectly centered, because they're not filling out navButtons. So what I would do would be to put a width of something like 600px on navButtons, and then on your #navButtons ul li put a width of 100px on those. As you have 6 buttons, that will fill that space perfectly and everything will looked centered. You will also not need your width that you have set in #navButtons ul then anymore either.
=========================
My wife has given birth to our twins, so I'm still going to be spotty around here. It never seems to correct itself does it? I'm sorry, I'm trying.
=========================
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 9/16/2008 8:39:15 PM
Posts: 13,
Visits: 81
|
|
| Thank you for your reply. If I don't put an active state in my styles, I get the automatic active color, which is worse than my chosen color. Is there a way to have none? When I put # in for the hyperlink, I still get the hover state. Which line items apply only to the image in the ul a: & need to be moved to the ul li: ? I tried changing the class to id but lost all of my formatting for that class. I had previously figured out that if I gave the ul an id, then the buttons only showed for that ul & not every ul. I tried putting #ulname before ul, but it didn't work. Putting it after did. I added auto for margin-left & right in #navButton but do not get a centered look. Here's what I have now. Please let me know how I can do this? On page: <div id="navbuttons" class="navButtons">
<ul id="button">
<li id="Home"><a href="#">Home</a></li>
<li id="Products"><a href="products.htm">Products</a></li>
<li id="Embroidery"><a href="embroidery.htm">Embroidery</a></li>
<li id="Contact"><a href="contact_us.htm">Contact Us</a></li>
<li id="Search"><a href="search.htm">Search</a></li>
<li id="Cart"><a href="https://cart reference">View Cart</a></li>
</ul>
</div> Style sheet: ul#button {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
text-align: center;
float: left;
height: 25px;
margin: 0 auto auto 0;
width: 800px;
}
ul#button a {
display: block;
width: 76px;
height: 25px;
color: #008000;
line-height: 25px;
text-decoration: none;
background-image:url('images/button.jpg');
background-repeat:no-repeat;
}
ul#button a:hover {
color: #008000;
text-decoration:underline;
}
ul#button li {
display: inline;
float: left;
}
.navButtons {
position: relative;
width: 800px;
z-index: 4;
margin-top: 5px;
margin-bottom: 15px;
margin-left:auto;
margin-right:auto;
}
|
|
|
|