Zdravko
10-08-2005, 01:16 AM
Hi there.
I just found a nice menu example, that only uses CSS.
Now I want to create the header, the basic content, and the footer of the page. Of course the colors must be appropriate. Unfortunately, I have little experience with CSS and I am unsure about how to do it. Can you show me a simple implementation of the div box that will contain the content?
So here is the CSS source, and an example html.
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Times New Roman','Trebuchet MS';
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
#button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Personal web site</title>
<link type="text/css" rel="stylesheet" href="mycss.css">
</head>
<body bgcolor="white">
<div id="button">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Files</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>
I just found a nice menu example, that only uses CSS.
Now I want to create the header, the basic content, and the footer of the page. Of course the colors must be appropriate. Unfortunately, I have little experience with CSS and I am unsure about how to do it. Can you show me a simple implementation of the div box that will contain the content?
So here is the CSS source, and an example html.
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Times New Roman','Trebuchet MS';
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
#button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Personal web site</title>
<link type="text/css" rel="stylesheet" href="mycss.css">
</head>
<body bgcolor="white">
<div id="button">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Files</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>