1 reply [Last post]
phalangie9
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-06-16
Posts: 1
Points: 0

I don't even know what to call it, so obviously I don't know how to start laying it out!!

I want to do an effect similar to this (right link nav)
http://www.w3schools.com/css/css_examples.asp

Very simply I want the "header" part of the box a different color than the inside, and I want a border around the box.

Here is the site I"m working on, and I'm trying to change my inline navigation... (taking the old graphic layout and making it css)
http://abbshirt.com/homeschool/html/worksheets.htm

Any suggestions, or links to tutorials/samples would be great!

obsidian
Offline
Enthusiast
South Carolina
Last seen: 14 years 6 days ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Newbie... Layout menus in boxes?

I'm fairly new to the CSS world, too, but I think I've come up with a solution to this one! I'll inlcude my entire code below, but basically, all i did was to divide my box into two separate <div> tags: one for the header (with background color), and one for the content of the box. Then, all you have to do is match up your colors and define your layout. Here's what I came up with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
#box { border: 1px solid #999999; }
#box_header { background: #999999; text-align: center; display: block; margin:0; padding: 2px; }
#box_content { padding-left: 4px; padding-right: 4px; }
#box_content ul { margin: 0; padding: 0; list-style-type: none; }
#box_content li { margin: 0; padding: 0; }

-->
</style>
</head>

<body>
<div id="box">
<div id="box_header">Title</div>
<div id="box_content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</body>
</html>

I hope this works for you!

If anyone else has an easier way, please let me know!!!

You can't win, you can't lose, you can't break even. You can't even get out of the game!