Its a simple two column layout with a header and footer. The problem I'm having is with the CSS of it
all. The first issue is that I've attached a border to the left edge of the content column. Since it has
less height than the navmenu, the border stops short. In crome.jpg, the area that I drew a rectangle
around is the piece of border that is missing. Never mind the heavy lower border on the navmenu, I
know how to fix that. Anyway, I want to make the border go all the way down. Putting the border
on the navmenu won't work, since many pages will have longer text than the menu. So I'm
stumped.
Secondly, my menu links are only clickable in a small region of the actual LI tag. I had a javascript
solution, but I found it too cumbersome. I wanted it to be automatic, so I went for a CSS trick but
it only made the clickable area extend to the right. So in Internet Ex.jpg (this issue happens in all
browsers though) the rectangle around the text is the clickable area of the menulinks, the green
part that is still part of the LI tag, is not. That green colored area is what I want clickable as
well.
Third, in IE 7 all the links turn blue. I tried a few different things, but it all ended up screwing
the :hover color change effect while getting the regular color right. I want IE to display it
like firefox, chrome or any other browser would. Is there a hack for this or a certain order to
place the CSS in order for it to work like the rest?
Code: Select all
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
this is header
</div>
<div id="leftnav">
<ul id="navmenu">
<li class="menulink"><a href="#">Future Students</a></li>
<li class="menulink"><a href="#">Current Students</a></li>
<li class="menulink"><a href="#">Business & Community</a></li>
<li class="menulink"><a href="#">Faculty & Staff</a></li>
<li>Calendar<p>A rather long section about things that are done on dates and events.</p>
<p>This is ever more things which need to be done</p></li>
<li class="menulink"><a href="#">Link 1</a></li>
<li class="menulink"><a href="#">Link 2</a></li>
<li class="menulink"><a href="#">Link 3</a></li>
<li class="menulink"><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<div class="error">
Error: this is an example of a small error snippet<br />
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="footer">This design is blah blah blah. All rights reserved. <a href="#">Fair Use</a></div>
</div>
</body>
</html>
Code: Select all
@charset "utf-8";
body {
font-family: Calibri;
background-color: #EAF0C6;
font-size: medium;
color: #300018;
}
#container {
width: 811px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
border: 1px solid #D0DE7E;
vertical-align: top;
}
#container #header {
clear: both;
background-color: inherit;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E5EDB8;
padding: 5px;
text-align: center;
}
#container #leftnav {
float: left;
width: 200px;
}
#container #leftnav #navmenu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#container #leftnav #navmenu li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E5EDB8;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#container #leftnav #navmenu li a {
text-decoration: none;
color: inherit;
display: block;
width:100%;
height:100%;
}
#container #leftnav #navmenu li.menulink {
color: #5A3D31;
font-size: large;
text-transform: capitalize;
font-weight: bold;
}
#container #leftnav #navmenu li.menulink:hover {
color: #FFFFFF;
background-color: #ADB85F;
}
#container #content {
float: left;
width: 600px;
padding: 5px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E5EDB8;
}
#container #content h1 {
margin-top: 0px;
}
#container #content .error {
border: 1px dotted #000000;
padding: 5px;
background-color: #F9B9B9;
}
#container #footer {
clear: both;
padding: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E5EDB8;
font-size: x-small;
text-align: right;
}