I was wondering if it's possible to put a graphic at the top of an unordered list. If it can be done, will someone explain how?
Look at this simple rollover list from Listamatic... <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/vertical08.htm">http://css.maxdesign.com.au/listamatic/vertical08.htm</a><!-- m --> I'd like to be able to put the graphic I've attached at the top of a list like that.Do not see any attachments, but putting your graphic in the bg of the ul should doOops, sorry about that. Here you go.Bad graphic design concept - it can not adjust to the text size changes....I understand that, Vladdy. I can use the sliding doors technique, but first I need to know how to put a graphic at the top of the list.As I said make the graphic the background of ul and give that ul top padding equal or greater than the graphic height...Thank you, Vladdy. You really were helpful. "Helper, not pleaser" truly fits you.
Here's the code for that bad graphic design concept anyway.
CSS
#navcontainer {
width: 165px;
}
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
background-image: url(rounded_top.gif);
padding-top: 28px;
}
#navcontainer a {
display: block;
padding: 3px;
width: 165px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>Here is one suggestion:
If your <a id="current"> point to the same page it is on, replace it with <span>Current Page</span> - not only you avoid linking to the same page, you do not need extra ids therefore simplifying your stylingWhat is the purpose of <div id="navcontainer">?
And Vladdy, why even bother with a span tag? Just leave the "active" list item text naked inside the <li>.Originally posted by lavalamp
And Vladdy, why even bother with a span tag? Just leave the "active" list item text naked inside the <li>.
Just to make styling a bit easier...All you'd have to do would be to style the text inside the list item, then style the links inside list items differently.Let's say you styled anchor as block, and gave it some padding to provide for a bigger clicking area (at least in real browsers). Now to keep the same dimensional styling for the "current page" text you would have to provide same padding to the <li>, however if you do that it screws up the layout for <li>s with anchors, so you have to provide an id or class to that <li>.
My preference to have an extra element rather than polluting namespace.Originally posted by Vladdy
Let's say you styled anchor as block, and gave it some padding to provide for a bigger clicking area (at least in real browsers). Now to keep the same dimensional styling for the "current page" text you would have to provide same padding to the <li>, however if you do that it screws up the layout for <li>s with anchors, so you have to provide an id or class to that <li>.
My preference to have an extra element rather than polluting namespace. Well I had a go at creating the layout without the extra span tag, and I suceeded!!! (Although IE begged to differ).
I found something else that IE can't do.
Edit:
lavalamp, for some reason I can't get your attachment to Download correctly. But it could just be on my end.
I have another question. Vladdy's suggestion of putting a background image on the ul works, but if I put "no-repeat", for some reason it doesn't show up at all. Will someone explain why that happens and how to fix it? Thanks.Here's the attachment again. I'm not going to try and answer that no-repeat question since the code I've posted uses it and may provide an answer, if not can you upload your code.most probably you mis-typed something resulting in incorrect syntax that makes browser ignore the line all-together. Post a link.
EDIT: here is more info:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">http://www.w3.org/TR/CSS21/syndata.html#parsing-errors</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#q2It's">http://www.w3.org/TR/CSS21/colors.html#q2It's</a><!-- m --> the strangest thing... Usually you can use shorthand with the styles and put things all in one line.
Example-
background-image: url(roundtop.gif) no-repeat;
It wouldn't let me do that. That's when the image would disappear completely. I tried telling it no-repeat on another line and it works now.
Example-
background-image: url(roundtop.gif);
background-repeat: no-repeat;
Same goes for adding a background color. If I put that in the same line as background-image, it disappeared. If I put background-color on a different line, it works just fine. Why is that???background-color:#f00;
background-image:url(redness.gif);
background-repeat:no-repeat;
background-position:0 0;
Goes to:
background:#f00 url(redness.gif) no-repeat top left;
But if you'd looked at the attachment you'd have seen that.
I tried looking at the attachment again, but I was getting the same error. I know what it is now. I'm using FF 0.9.1 and it was giving me errors. I clicked the attachment link in IE and it worked just fine.There was a problem with Download ing attachments in FF a while ago, but I thought they fixed it.Okay, I've got another question... Before I ask, I want to say thanks again to you guys that always seem to help me out. I really appreciate it.
I've worked out the list header just fine thanks to Vladdy. But now I want to put a graphic at the bottom of the list. Here are two different versions of the same page. (Warning: the page is screwed up in FF 0.9.1. It looks mostly correct in IE, so look at it in IE, please.)
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new.html">http://barnesprocarpetcare.com/new.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new2.html">http://barnesprocarpetcare.com/new2.html</a><!-- m -->
You'll notice in IE that the bottom graphic I've placed under the left navigation (new2.html) jumps up and down depending on what link you roll over. Sometimes there' a gap, and sometimes there's not. Obviously I don't want the gap there, so how do I get rid of it and the jumping?
Here's another request. How do I get the left navigation to line up correctly with the blue bar on the right that says Home? It's lined up right in IE, but I'd like for it to be correct in FF, too. I'm doing this as a favor for a friend who uses IE exclusively but it will aggravate me knowing how bad it looks in FF.What's wrong with using #navcontainer for the bottom bit? It's just sitting there with nothing else to do. If it weren't for the bottom rounded edge you wouldn't need it at all.Well, I just said "screw it" with the navcontainer div. I tested the page without it, and it quit jumping. So I changed the style names to not include the navcontainer div. I went back to using the roundbottom div with a -19px top margin and it works just fine.
But I still can't get the roundtop graphic at the top of the navigation list to line up with the blue bar on the right. It looks right in IE but I want it to look correct in FF. Help?
Oh, here's what the page looks like without the navcontainer div.
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new3.htmlQuite">http://barnesprocarpetcare.com/new3.htmlQuite</a><!-- m --> a lot of elements come with their own default margins and padding (which is set by the browser.
In this case the problem is being cause by a top margin on the ul.
That is why I always set margin:0; and padding:0; for every element I use, then I can apply my own margins and padding if needed.Wow. Something I learned a long time ago, and yet forgot to do on this page... Set my own margins, etc. for different items. I went back and set margin-top to 0 and now it lines up like it should in FF. Thanks again, lavalamp.Heppy to help.
Look at this simple rollover list from Listamatic... <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/vertical08.htm">http://css.maxdesign.com.au/listamatic/vertical08.htm</a><!-- m --> I'd like to be able to put the graphic I've attached at the top of a list like that.Do not see any attachments, but putting your graphic in the bg of the ul should doOops, sorry about that. Here you go.Bad graphic design concept - it can not adjust to the text size changes....I understand that, Vladdy. I can use the sliding doors technique, but first I need to know how to put a graphic at the top of the list.As I said make the graphic the background of ul and give that ul top padding equal or greater than the graphic height...Thank you, Vladdy. You really were helpful. "Helper, not pleaser" truly fits you.
Here's the code for that bad graphic design concept anyway.
CSS
#navcontainer {
width: 165px;
}
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
background-image: url(rounded_top.gif);
padding-top: 28px;
}
#navcontainer a {
display: block;
padding: 3px;
width: 165px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>Here is one suggestion:
If your <a id="current"> point to the same page it is on, replace it with <span>Current Page</span> - not only you avoid linking to the same page, you do not need extra ids therefore simplifying your stylingWhat is the purpose of <div id="navcontainer">?
And Vladdy, why even bother with a span tag? Just leave the "active" list item text naked inside the <li>.Originally posted by lavalamp
And Vladdy, why even bother with a span tag? Just leave the "active" list item text naked inside the <li>.
Just to make styling a bit easier...All you'd have to do would be to style the text inside the list item, then style the links inside list items differently.Let's say you styled anchor as block, and gave it some padding to provide for a bigger clicking area (at least in real browsers). Now to keep the same dimensional styling for the "current page" text you would have to provide same padding to the <li>, however if you do that it screws up the layout for <li>s with anchors, so you have to provide an id or class to that <li>.
My preference to have an extra element rather than polluting namespace.Originally posted by Vladdy
Let's say you styled anchor as block, and gave it some padding to provide for a bigger clicking area (at least in real browsers). Now to keep the same dimensional styling for the "current page" text you would have to provide same padding to the <li>, however if you do that it screws up the layout for <li>s with anchors, so you have to provide an id or class to that <li>.
My preference to have an extra element rather than polluting namespace. Well I had a go at creating the layout without the extra span tag, and I suceeded!!! (Although IE begged to differ).
I found something else that IE can't do.
Edit:
lavalamp, for some reason I can't get your attachment to Download correctly. But it could just be on my end.I have another question. Vladdy's suggestion of putting a background image on the ul works, but if I put "no-repeat", for some reason it doesn't show up at all. Will someone explain why that happens and how to fix it? Thanks.Here's the attachment again. I'm not going to try and answer that no-repeat question since the code I've posted uses it and may provide an answer, if not can you upload your code.most probably you mis-typed something resulting in incorrect syntax that makes browser ignore the line all-together. Post a link.
EDIT: here is more info:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">http://www.w3.org/TR/CSS21/syndata.html#parsing-errors</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#q2It's">http://www.w3.org/TR/CSS21/colors.html#q2It's</a><!-- m --> the strangest thing... Usually you can use shorthand with the styles and put things all in one line.
Example-
background-image: url(roundtop.gif) no-repeat;
It wouldn't let me do that. That's when the image would disappear completely. I tried telling it no-repeat on another line and it works now.
Example-
background-image: url(roundtop.gif);
background-repeat: no-repeat;
Same goes for adding a background color. If I put that in the same line as background-image, it disappeared. If I put background-color on a different line, it works just fine. Why is that???background-color:#f00;
background-image:url(redness.gif);
background-repeat:no-repeat;
background-position:0 0;
Goes to:
background:#f00 url(redness.gif) no-repeat top left;
But if you'd looked at the attachment you'd have seen that.
I tried looking at the attachment again, but I was getting the same error. I know what it is now. I'm using FF 0.9.1 and it was giving me errors. I clicked the attachment link in IE and it worked just fine.There was a problem with Download ing attachments in FF a while ago, but I thought they fixed it.Okay, I've got another question... Before I ask, I want to say thanks again to you guys that always seem to help me out. I really appreciate it.I've worked out the list header just fine thanks to Vladdy. But now I want to put a graphic at the bottom of the list. Here are two different versions of the same page. (Warning: the page is screwed up in FF 0.9.1. It looks mostly correct in IE, so look at it in IE, please.)
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new.html">http://barnesprocarpetcare.com/new.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new2.html">http://barnesprocarpetcare.com/new2.html</a><!-- m -->
You'll notice in IE that the bottom graphic I've placed under the left navigation (new2.html) jumps up and down depending on what link you roll over. Sometimes there' a gap, and sometimes there's not. Obviously I don't want the gap there, so how do I get rid of it and the jumping?
Here's another request. How do I get the left navigation to line up correctly with the blue bar on the right that says Home? It's lined up right in IE, but I'd like for it to be correct in FF, too. I'm doing this as a favor for a friend who uses IE exclusively
but it will aggravate me knowing how bad it looks in FF.What's wrong with using #navcontainer for the bottom bit? It's just sitting there with nothing else to do. If it weren't for the bottom rounded edge you wouldn't need it at all.Well, I just said "screw it" with the navcontainer div. I tested the page without it, and it quit jumping. So I changed the style names to not include the navcontainer div. I went back to using the roundbottom div with a -19px top margin and it works just fine.But I still can't get the roundtop graphic at the top of the navigation list to line up with the blue bar on the right. It looks right in IE but I want it to look correct in FF. Help?
Oh, here's what the page looks like without the navcontainer div.
<!-- m --><a class="postlink" href="http://barnesprocarpetcare.com/new3.htmlQuite">http://barnesprocarpetcare.com/new3.htmlQuite</a><!-- m --> a lot of elements come with their own default margins and padding (which is set by the browser.
In this case the problem is being cause by a top margin on the ul.
That is why I always set margin:0; and padding:0; for every element I use, then I can apply my own margins and padding if needed.Wow. Something I learned a long time ago, and yet forgot to do on this page... Set my own margins, etc. for different items. I went back and set margin-top to 0 and now it lines up like it should in FF. Thanks again, lavalamp.Heppy to help.