Wed, 2004-06-16 16:48
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!
Mon, 2004-08-16 16:14
#1
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!
