Putting Thumbnails Inside A Box List

[noah_hayner]

Hello, I have just started learning CSS and XHTML. I am making I have a vertical box list, and I want to have it so that there are thumbnails inside each box, next to the name of the item on each list. I followed a simple tutorial to make the box list. Here is a mock up of what I am going for. I am unsure how to do this, here is my CSS code:_________________________#navcontainer ul {margin-left:1em;padding:8px;list-style-type: none;font-family:Arial,sans-serif;} #navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat;background-position: 0 2em;} #navcontainer a {display:block;width:100;height:64;line-height:24px;color:#FFF;background-color:#036;width:9em;padding:.2em .8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a:hover {background-color:#369;color:#FFF;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} #active {display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;}_________________________ Also, here is my XHTML code: <div id="navcontainer"><b class="rop"<b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><ul><b><li><a href="a1.htm">Armor Overview</a></li><li><a href="a2.htm">Known Functions</a></li><li><a href="a3.htm">ET Overview</a></li><li><a href="a4.htm">Update Log</a></li></ul></b></div> Do I need to fix any of these before putting thumbnails in the list? And do you have any advice on how I would get the thumbnails in there? Any help is appreciated, thank you.

[Drycodez]

#container ul{margin-left:1em;padding...list-style-image:url('path/img.png')...}

[Drycodez]

The above code, ll put an image at the LEFT of every list item, when you use: list-style-image property. If you want it to be placed at the RIGHT, then add this to your code: #navcontainer ul li:after{content:url('imag.png')}

[dsonesuk]

The placement and closing of b tags is incorrect

<div id="navcontainer"><b class="rop"<b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><ul><b><li><a href="a1.htm">Armor Overview</a></li><li><a href="a2.htm">Known Functions</a></li><li><a href="a3.htm">ET Overview</a></li><li><a href="a4.htm">Update Log</a></li></ul></b></div>

should be

<div id="navcontainer"><b class="rop"><b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><b><ul><li><a href="a1.htm">Armor Overview</a></li><li><a href="a2.htm">Known Functions</a></li><li><a href="a3.htm">ET Overview</a></li><li><a href="a4.htm">Update Log</a></li></ul></b></div> 

But the use of <b> tags at start and end of ul list id invalid, if you wish for the text to be bold use font-weight for the menu anchor links. thumbnail images, can be placed in either the li or a element as it is set as a block element. it depends on the height of thumbnail, and the height of the element it is going to placed into, as a background image, you can use background-position to place it where you like, background-position: right center; background-position: right top; background-position: right 5px;

[noah_hayner]

O. Samuel, I did what you said for adding thumbnail to the right, but it does not do this. It puts thumbnail underneath the list block, what I would like to do is put the thumbnail inside list block, on the right side of the list name. If you see my diagram in my first post ,the pink box inside each list block is thumbnail. Here is my current CSS, I bolded the part that I edited on your instruction:____________________________________________________________________________________________ #navcontainer ul li:after{content:url('thumbnail.jpg')}{margin-left:1em;padding:8px;list-style-type:none;font-family:Arial,sans-serif;} #navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat;background-position: 0 2em;} #navcontainer a {display:block;width:100;height:64;line-height:24px;color:#FFF;background-color:#036;width:9em;padding:.2em .8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a:hover {background-color:#369;color:#FFF;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} #active {display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;} Please let me know what is the problem, thank you.

[dsonesuk]

try this instead #navcontainer ul li {background:url('thumbnail.jpg') no-repeat right center; margin-left:1em;padding:8px;list-style-type:none;font-family:Arial,sans-serif;} Edit: because the anchor has a background color this might prevent the image showing, so it might be better to place in the anchor itself, as the background image will show above the background color, in this situation.

[noah_hayner]

dsonesuk, now are getting somewhere. With your instruction, the thumbnails are now on same height level as the list boxes, but their all the way on right side of the screen. I would like to fit them inside the boxes to the right of the list text. Also, the list boxes are now indented, as if they had padding, but even with margin-left set to 0 it does move. Here is my current CSS:__________________________________________________________________________________________________________________________________ #navcontainer ul li {background:url('thumbnail.jpg') no-repeat right center;margin-left:1em;padding:8px;list-style-type:none;font-family:Arial,sans-serif;}#navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat;background-position: 0 2em;}#navcontainer a {display:block;width:100;height:64;line-height:24px;color:#FFF;background-color:#036;width:9em;padding:.2em .8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;}#navcontainer a:hover {background-color:#369;color:#FFF;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;}#active {display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;} Is there anything I can do next?

[dsonesuk]

you have conflict of coding here #navcontainer ul li {background:url('thumbnail.jpg') no-repeat right center;margin-left:1em;padding:8px;list-style-type:none;font-family:Arial,sans-serif;} #navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat;background-position: 0 2em;} target the same li element #navcontainer a {display:block;width:100;height:64;line-height:24px;color:#FFF;background-color:#036;width:9em;padding:.2em .8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} note: width:100 is invalid as it does not include a unit. if you want the thumbnail to appear at the same distance from right edge place the background-image in the li if you wish to place the thumbnail just right of the text it would have to be placed in the anchor, as the text in the anchor will determine its position, then you would have to adjust padding-right; or margin-right to allow the image to be placed beyond the text. to remove padding, indent etc completely at the top for the css coding for the menu place #navcontainer ul, #navcontainer li {margin:0; padding:0; text-indent;0; list-style-type:none;} this reset will now give you exactly the same layout in all browsers.

[noah_hayner]

EDIT: Actually I have one other problem. This one may be tricky. Now that I have gotten thumbnail where I want them, how can I set it so that each List item has a different thumbnail? Like for example the first box has apple thumbnail, the second has orange thumbnail, etc?

[dsonesuk]

<li class="apple"><a href="a1.htm">Armor Overview</a></li><li class="orange"><a href="a2.htm">Known Functions</a></li><li class="pear"><a href="a3.htm">ET Overview</a></li><li class="orange"><a href="a4.htm">Update Log</a></li>

#navcontainer ul li {background:url('thumbnail.jpg') no-repeat right center;margin-left:1em;padding:8px;list-style-type:none;font-family:Arial,sans-serif;}/* default image*/#navcontainer ul li.orange {background:url('orange_thumbnail.jpg')/* replacement image related to class orange*/}#navcontainer ul li.apple {background:url('apple_thumbnail.jpg')/* replacement image related to class apple*/}#navcontainer ul li.pear {background:url('pear_thumbnail.jpg')/* replacement image related to class pear*/}

[noah_hayner]

Right now I have my background URL code in the "#navcontainer a", should I just copy it into "#navcontainer ul li" then? I have bolded those two sections as they are now:________________________________________________________________________________________________ h1 {margin:10px;}body {background:black;color:white;font-family:Arial;text-decoration:none;}div {float:center;}a:link {color:#ffffff;text-decoration:none;}a:visited {color:#ffffff;}#navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;}/* default image/#navcontainer ul li.Armor {background:url('thumbnail.jpg')/* replacement image related to class Armor*/ #navcontainer ul li {margin-left:0em;padding:none;list-style-type: none;font-size:16px;font-family:Arial,sans-serif;} #navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat right center;background-position: 0 2em;} #navcontainer a {background:url('Alien.png') no-repeat right center;display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a:hover {background-color:#369;color:#FFF;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;}#active{display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;}

[dsonesuk]

#navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer ul li {margin-left:0em;padding:none;list-style-type: none;font-size:16px;font-family:Arial,sans-serif;}#navcontainer li {margin:0 0 .8em 0;background-repeat:no-repeat right center;background-position: 0 2em;} Are all targeting the same elements, the second (note padding:none; is not valid, padding:0; is) will take priority of the margin, padding set in the first, the third margin setting will take priority over margin set in the second. so what you really want from what i can gather is I think!

#navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer li {margin:0 0 .8em 0;font-size:16px;font-family:Arial,sans-serif;background-repeat:no-repeat right center;background-position: 0 2em;}

I could have sworn you posted you were going to place them in the li tag? after I explained you could have them in the <a> tag or <li> depending on what you require, me thinks you edited this out! if anchor <a>

 #navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer li {margin:0 0 .8em 0;font-size:16px;font-family:Arial,sans-serif;} #navcontainer a {display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a.alien {background:url('Alien.png') no-repeat right center;}#navcontainer a.human {background:url('human.png') no-repeat right center;}#navcontainer a.ape {background:url('ape.png') no-repeat right center;}#navcontainer a.chicken {background:url('chicken.png') no-repeat right center;} #navcontainer a:hover { /* only the styling that changes is required here*/border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} 

to go with

<div id="navcontainer"><b class="rop"><b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><b><ul><li><a class="alien" href="a1.htm">Armor Overview</a></li><li><a class="human" href="a2.htm">Known Functions</a></li><li><a class="ape" href="a3.htm">ET Overview</a></li><li><a class="chicken" href="a4.htm">Update Log</a></li></ul></b></div>

if li <li>

#navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer li {margin:0 0 .8em 0;font-size:16px;font-family:Arial,sans-serif;} #navcontainer li.alien {background:url('Alien.png') no-repeat right center;}#navcontainer li.human {background:url('human.png') no-repeat right center;}#navcontainer li.ape {background:url('ape.png') no-repeat right center;}#navcontainer li.chicken {background:url('chicken.png') no-repeat right center;} #navcontainer a {display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a:hover { /* only the styling that changes is required here*/border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} 

to go with

<div id="navcontainer"><b class="rop"><b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><b><ul><li class="alien"><a href="a1.htm">Armor Overview</a></li><li class="human"><a href="a2.htm">Known Functions</a></li><li class="ape"><a href="a3.htm">ET Overview</a></li><li class="chicken"><a href="a4.htm">Update Log</a></li></ul></b></div>

[noah_hayner]

Wow thanks for thorough answer! I originally had the thumbnails in the <li> but I recall you said it be better to put the images in the <a>. So I re-put it in the <a> and it worked and I ran with that. Would it be easier to use <li> then, if I want there to be a different thumbnail inside each list box?

[dsonesuk]

Like I originally said

if you want the thumbnail to appear at the same distance from right edge place the background-image in the liif you wish to place the thumbnail just right of the text it would have to be placed in the anchor, as the text in the anchor will determine its position, then you would have to adjust padding-right; or margin-right to allow the image to be placed beyond the text.

By given the anchor a float left, instead of a set width, its width is determine by the text inside, and by adding a thumbnail to the background, and adding a padding-right (the same size of the image) the image will appear right at the end the text in every menu, no matter how long or short it is. Note: you will have to give the li a fixed width, OR just the #navcontainer div container, which the li elements will adjust to. At the moment the anchor is set as a block element, with a set width, the block element li will adjust its width to its parent container width (Which I can't see any width set for #navcontainer) If this is set the same width of the anchor, these two will act identically in that when you place an background image within them, it will appear at a fixed position you set anywhere in the area set by width and height, and is NOT determined by the text.

[noah_hayner]

This has nearly there! Only one problem left: if you look at my first post with my intended goal, you see how the list are in separate blue boxes. I had already achieve this, but after following your above post this is how the box color looks now. The color of the list boxes has bled into the spaces between each box. How can I constrain it back to within the boxes only?

[dsonesuk]

I really can't help unless i see html and css code.

[noah_hayner]

Oh of course, here it is. CSS:

  h1 {background:#333333;margin:0px;border:1px solid white;height:32px;width:100px;padding-left:5px;padding-bottom:5px;} body {background:black;color:white;font-family:Arial;text-decoration:none;}  div {float:center;} a:link {color:#ffffff;text-decoration:none;} a:visited {color:#ffffff;}  #navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer li {margin:0 0 .8em 0;font-size:16px;font-family:Arial,sans-serif;} #navcontainer a {display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a.Armor {background:url('Alien.png') no-repeat right center;}#navcontainer a.Function {background:url('human.png') no-repeat right center;}#navcontainer a.ape {background:url('ape.png') no-repeat right center;}#navcontainer a.chicken {background:url('chicken.png') no-repeat right center;} #navcontainer a:hover {color:#444444;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} #active{display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;}

And here is HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>  <title>DO NOT SHARE THIS PAGE</title><link rel="stylesheet" href="style.css" type="text/css"/>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>  <link rel="stylesheet" href="asn2.css" type="text/css"/> <link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div id="wrapper" style="background-color:#000000; width:1200px; margin:0 auto;"><div id="header" style="background-color:#000000;"><h1><a href="default.htm">HOME</a></h1><h2>Log started on 8.12.2010</h2><b>Subjects</b><div id="navcontainer" style="background-color:#666666; width:201px; float:left"><b class="rop"><b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><b><ul><li><a class="Armor" href="a1.htm">Blablabla</a></li><li><a class="Function" href="a2.htm">Lalala</a></li><li><a class="ape" href="a3.htm">Yayaya</a></li><li><a class="chicken" href="a4.htm">Khakhakha</a></li></ul></b></div><div id="content" style="margin-left:50px; margin-right:50px; padding-left:100px; padding-right:200px; text-align:justify; background-color:#000000; min-height:200px; overflow:hidden;"><img src="sdummy.jpg" alt="Image" class="center";></p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p><div style="margin-left:100px;margin-right:100px;text-align:center;"></p><br/>Lorem Ipsum</div><div id="footer" style="background-color:#000000; min-height:100px; "></div></div></body> </html>

[dsonesuk]

The reason the menu is all one color is because of this <div id="navcontainer" style=" background-color:#666666; width:201px; float:left">But i did forget to add background-color for links which should be

#navcontainer a.Armor {background: #036 url('Alien.png') no-repeat right center;}#navcontainer a.Function {background: #036 url('human.png') no-repeat right center;}#navcontainer a.ape {background: #036 url('ape.png') no-repeat right center;}#navcontainer a.chicken {background: #036 url('chicken.png') no-repeat right center;}

you also have mismatch of open and close div tags, and a float: center; which does not exist (float: none;, float:left;, float right; only) which i have placed a comment regarding these, there are a few more errors which i am going to let you fix, by validating and fixing the errors that are present on you page at http://validator.w3.org/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>  <title>DO NOT SHARE THIS PAGE</title><link rel="stylesheet" href="style.css" type="text/css"/>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>  <link rel="stylesheet" href="asn2.css" type="text/css"/> <link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style type="text/css">h1 {background:#333333;margin:0px;border:1px solid white;height:32px;width:100px;padding-left:5px;padding-bottom:5px;} body {background:black;color:white;font-family:Arial;text-decoration:none;}  div {/*float:center; no such value for float */} a:link {color:#ffffff;text-decoration:none;} a:visited {color:#ffffff;}  #navcontainer ul, #navcontainer li {margin:0;padding:0;text-indent:-20px;list-style-type:none;} #navcontainer li {margin:0 0 .8em 0;font-size:16px;font-family:Arial,sans-serif;} #navcontainer a {display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;} #navcontainer a.Armor {background: #036 url('Alien.png') no-repeat right center;}#navcontainer a.Function {background: #036 url('human.png') no-repeat right center;}#navcontainer a.ape {background: #036 url('ape.png') no-repeat right center;}#navcontainer a.chicken {background: #036 url('chicken.png') no-repeat right center;} #navcontainer a:hover {color:#444444;border-top:1px solid #036;border-left:1px solid #036;border-right:1px solid #fff;border-bottom:1px solid #fff;} #active{display: block;color: #FFF;background-color: #648DC7;width: 9em;padding: 0em .8em;text-decoration:none;}</style></head><body><div id="wrapper" style="background-color:#000000; width:1200px; margin:0 auto;"><div id="header" style="background-color:#000000;"><h1><a href="default.htm">HOME</a></h1><h2>Log started on 8.12.2010</h2><b>Subjects</b></div><!--end header--><div id="navcontainer" style="/*background-color:#666666;*/ width:201px; float:left"><b class="rop"><b class="r1"></b> <b class="r3"></b> <b class="r4"></b></b><b><ul><li><a class="Armor" href="a1.htm">Blablabla</a></li><li><a class="Function" href="a2.htm">Lalala</a></li><li><a class="ape" href="a3.htm">Yayaya</a></li><li><a class="chicken" href="a4.htm">Khakhakha</a></li></ul></b></div><!-- end navigation--><div id="content" style="margin-left:50px; margin-right:50px; padding-left:100px; padding-right:200px; text-align:justify; background-color:#000000; min-height:200px; overflow:hidden;"><img src="sdummy.jpg" alt="Image" class="center";></p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p><div style="margin-left:100px;margin-right:100px;text-align:center;"><!-- ?????????? --></p><br/>Lorem Ipsum</div><!--- end of ???????? --></div><!-- end of content --><div id="footer" style="background-color:#000000; min-height:100px; "></div><!-- end of footer --></div><!-- end of wrapper--></body> </html> 

[noah_hayner]

Wow thank you! It is finally reach my intended look! Thank you for the validator link too, there were 10 errors and I fixed down to 1 (I am doing Transitional). It is for this bit here:

<b><ul><li><a class="Armor" href="a1.htm">Armor Overview</a></li><li><a class="Function" href="a2.htm">Known Functions</a></li><li><a class="ape" href="a3.htm">ET Overview</a></li><li><a class="chicken" href="a4.htm">Update Log</a></li></ul></b>

This is the message I get:Line 45, Column 7: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag<b><ul>

✉

[/left]

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there

and

can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")

___________________________

So it is asking for a containing element, I tried putting it inside a <span> and a <div> but it did not fix. What other option could I do?

[/left]

[dsonesuk]

That's because you are not allowed to place ul,li within a <b> you can

<ul><li><a class="Armor" href="a1.htm"><b>Armor Overview</b></a></li><li><a class="Function" href="a2.htm"><b>Known Functions</b></a></li><li><a class="ape" href="a3.htm"><b>ET Overview</b></a></li><li><a class="chicken" href="a4.htm"><b>Update Log</b></a></li></ul> 

But the quicker and preferred option is just use css for the link and set font-weight:bold;

#navcontainer a {display:block;width:100px;height:50px;line-height:50px;color:#FFF;background-color:#036;width:9em;padding:0em 1.8em;text-decoration:none;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #036;border-bottom:1px solid #036;font-weight:bold;}