Code for a Border/Box for Each Reference 2

[rvnguy]

This is a problem that I have not been able to assertain what it is that I need to do to accomplish the desired output.

I have this HTML Code:

<ul>
  <li>Head Description
    <ul>
      <li><a href="[URL unfurl="true"]http://www.xxxx.com">Description1</a></li>[/URL]
      <li><a href="[URL unfurl="true"]http://www.xxxx.com">Description2</a></li>[/URL]
      <li><a href="[URL unfurl="true"]http://www.xxxx.com">Description3</a></li>[/URL]
      <li><a href="[URL unfurl="true"]http://www.xxxx.com">Description4</a></li>[/URL]
                </ul>

These display correctly in the browser but with out a border/container

In the css.stylesheet I would like to define a border for the li items but do not know what the css code would be to do so.

I have a reference that I should define a span element for this but the documentation assumes that I know what they are refering to, 'how dumb of them' as I do not.

So if this is explainable, what css.stylesheet code would I need to enclose each li reference or those under the ul in a box/border??

rvnguy
"I know everything..I just can't remember it all

 

[BillyRayPreachersSon]

If you put this in the HEAD section of your page:

<style type="text/css">
   li {
      border: 1px solid #CC0000;
   }
</style>

Then you will get a 1-pixel wide solid red border around all your list items.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[rvnguy]

BillyRayPreachersSon,

Thank you soo much...I just get lost in the forest some times...

I actually added it to the style sheet as follows but would also work in the Head of a HTML page and adjusted the width.

Again Thanks!!

 body {
	background-color: #ffeebc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #660000;
}

li {
      border: 1px solid #660000;
      width: 180px
   }

rvnguy
"I know everything..I just can't remember it all

 

[ChrisHunt]

Doing it that way you'll apply that rule to all the <li>s in all the lists on your page, which may cause you problems. Better to limit the effect by giving it a class:

<ul [red]class="menu"[/red]>
  <li>Head Description
    <ul>
      <li><a href="[URL unfurl="true"]http://www.xxxx.com">Description1</a></li>[/URL]
      ... etc ...

Then you can target your CSS more precisely:

[red].menu[/red] li {
      border: 1px solid #660000;
      width: 180px
   }

Inexperienced CSS users will apply a class to each <li> instead of using the technique above, my way saves a lot of typing!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd