5 replies [Last post]
webphotoguy
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-03-29
Posts: 12
Points: 0

Why are my arrows not coming up?

HTML code



CSS Code

.main {
}
body {
margin: 0;
Padding: 0
}
#navcontainer {
font-family: Arial, Helvetica, Sans-Serif;
font size: .9em;
font-weight: bold;
}
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#navlist li
{
padding-left: 10px;
background-image: url(Images/whitearrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
#navcontainer ul
{
margin: 0;
padding: 0;
}
#navcontainer a:link
{
display: block;
color: #FFFFFF;
background-color: #996666;
width: 150px;
padding: 4px;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
#navcontainer a:hover
{
background-color: #855858;
color: #FFFFFF;
}

My other question is:

Is there any way to have a button not as a link in a Rollover list.

Like this http://www.centralcitycolorado.com/lodge.php

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

First off, its good that you

First off, its good that you are using a list for your menu (list of links). Its not so good that your layout seems to be handled by a table.

Which browser is causing the problem?

If its IE, try adding the following:

ul, li { zoom: 1; }

If the problem goes away, its an "hasLayout" issue. Read the link, "On Having Layout", in my signature for all the details including solutions which will pass the validator (zoom doesn't).

Its up to you what you put in the list.
- don't wrap the text in the <A> element.
- keep the text inside the <A> element but don't give it an href. Give it an ID, which makes it an anchor rather than a link.

webphotoguy
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-03-29
Posts: 12
Points: 0

Nope that didn't help still

Nope that didn't help still no images. I tried in IE 7 and Firefox.

I know it's up to me to put in what I want in my list. But I don't know how to put none links in a list. I need some code. They don't talk about that in the menus by listamatic.

Chris..S wrote:
First off, its good that you are using a list for your menu (list of links). Its not so good that your layout seems to be handled by a table.

Which browser is causing the problem?

If its IE, try adding the following:

ul, li { zoom: 1; }

If the problem goes away, its an "hasLayout" issue. Read the link, "On Having Layout", in my signature for all the details including solutions which will pass the validator (zoom doesn't).

Its up to you what you put in the list.
- don't wrap the text in the <A> element.
- keep the text inside the <A> element but don't give it an href. Give it an ID, which makes it an anchor rather than a link.

webphotoguy
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-03-29
Posts: 12
Points: 0

Ok, so I also elemented the

Ok, so I also elemented the hrefs and made them id's now the buttons are gone. What do I need to do to get my buttons back.

Steve

Chris..S wrote:

- keep the text inside the <A> element but don't give it an href. Give it an ID, which makes it an anchor rather than a link.

webphotoguy
Offline
Regular
Last seen: 12 years 27 weeks ago
Joined: 2007-03-29
Posts: 12
Points: 0

still need help!! Steve

still need help!!

Steve

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Steve, here is how I would

Steve, here is how I would do this:



Note that I didn't use a table (I realize it's part of your design, but try to get away from them for layouts), a containing div, or deprecated font tags. I also eliminated the redundant #active id on the li that contains the #current id anchor. So that's it - that's all the html you need. You may in fact want to use the containing div for extra styling hooks, but I'll bet you don't need it.

CSS

body {
margin: 0;
padding: 0;
}

#navlist {
width: 170px;
margin: 0;
padding: 0;
list-style: none;
font: bold .9em Arial, Helvetica, sans-serif;
}

#navlist li { /* <-- I put this rule in to show how to style non-links */
background: purple;
color: grey;
}

#navlist li a:link {
display: block;
color: #FFF;
background: #966 url(images/whitearrow.gif) no-repeat 0 .5em;
width: 150px;
padding: 4px 0 4px 14px;
text-decoration: none;
border-bottom: 1px solid #FFF;
}

#navlist li a:hover {
background: #855858;
}

#navcontainer not needed, font styling moved to #navlist. Also the #current anchor hasn't been styled - I have no idea what you wish to do with it.