Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Re-design Review
- Thread starter JoeAtRevolutionUnltd
- Start date
- Status
- Thread starter
- #21
Nice navbar!
Three things:
1. The gray in the title bar does not fit, so maybe another shade of blue?
2. The white on periwinkle is a it hard to read. There should be more contrast.
3. The borders do not continue to the bottom of the box in my IE6 browser. Is this intentional?
--Chessbot
"So it goes."
Kurt Vonnegut, Slaughterhouse Five
Three things:
1. The gray in the title bar does not fit, so maybe another shade of blue?
2. The white on periwinkle is a it hard to read. There should be more contrast.
3. The borders do not continue to the bottom of the box in my IE6 browser. Is this intentional?
--Chessbot
"So it goes."
Kurt Vonnegut, Slaughterhouse Five
If you're going to use images for your mouseover, I suggest you preload them. When I mouseover your menu I get an hourglass flash while the image loads. I like the layout of your page though.
Glen
Glen
Wow, that's already a HUGE improvement on the old site.
I like the blues, but as Chessbot points out, there's not enough contrast between the white menu text and the light blue background. I don't think you should split the menu into two bits - they're both navigation menus after all - but consider having a single link pointing to the "Site Roster", with the other site information links appearing below it when the user is in that section (see the "Oracle" and "Web" sections of my site to see what I mean.
You should definitely use CSS to implement the side-menu. Only use images when you have to - they're less flexible, less accessible and take up more bandwidth. It's easy to get something like your current look, here's the markup:
and here's the CSS (guessing at some of the pixel measurements):
The bar down the LHS should extend to the bottom of the page. I suggest making a background image for the <body> that is a dark blue bar of the relevant width and repeat it vertically down the screen. That way the side bar will graduate down to dark blue and then stay that way.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
I like the blues, but as Chessbot points out, there's not enough contrast between the white menu text and the light blue background. I don't think you should split the menu into two bits - they're both navigation menus after all - but consider having a single link pointing to the "Site Roster", with the other site information links appearing below it when the user is in that section (see the "Oracle" and "Web" sections of my site to see what I mean.
You should definitely use CSS to implement the side-menu. Only use images when you have to - they're less flexible, less accessible and take up more bandwidth. It's easy to get something like your current look, here's the markup:
Code:
<ul class="menu">
<li class="heading">Navigation</li>
<li><a href="#">Home</a></li>
<li><a href="#">New Sites</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
</ul>
Code:
ul.menu {
list-style: none;
width: 134px; /* Will need the box model hack here */
border: 1px solid #021C80;
margin: 0;
padding:0
}
ul.menu li {
margin-left: 0;
border-bottom: 4px solid #9FBAFB;
}
ul.menu li.heading {
color: #021C80;
background-color: #CCCCCC;
font-size: 14px;
padding: 2px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
}
ul.menu a {
display: block;
width: 120px;
padding-left: 10px;
color: white;
background-color: #9FBAFB;
border-left: 4px solid #9FBAFB;
font-size: 18px;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
}
ul.menu a:hover {
background-color: #021C80;
border-left: 4px solid white;
}The bar down the LHS should extend to the bottom of the page. I suggest making a background image for the <body> that is a dark blue bar of the relevant width and repeat it vertically down the screen. That way the side bar will graduate down to dark blue and then stay that way.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Thread starter
- #25
JoeAtRevolutionUnltd
Programmer
Thanks for all the tips and help.
I have run into 2 problems. The first is my center area for my page content is showing up below the nav menu. This is the css for it:
#center
{
background-color: #FFFFFF;
margin-top: 0px;
margin-left: 150px;
margin-right: 10px;
}
I tried setting the top margin to -155 and it moves to the top but then the hover on the navigations doesn't work.
The next problem is the background. My background now is the gradient in the menu bar. I want to put something to fill up the blank space at the bottom but I'm not sure how to.
Problems
Thanks again
I have run into 2 problems. The first is my center area for my page content is showing up below the nav menu. This is the css for it:
#center
{
background-color: #FFFFFF;
margin-top: 0px;
margin-left: 150px;
margin-right: 10px;
}
I tried setting the top margin to -155 and it moves to the top but then the hover on the navigations doesn't work.
The next problem is the background. My background now is the gradient in the menu bar. I want to put something to fill up the blank space at the bottom but I'm not sure how to.
Problems
Thanks again
Try something like this:
Notice how I've got the #content <div> higher in the markup that the #sidebar <div>. This is good for SEO and also for accessibility (a screen reader will read your page content before the navigation).
The #header <div> can have the same background image as your page does now, the #menu <div> has the plain white-to-blue graduated image you've currently attached to the body (both these images can be cropped to be 1 pixel wide, btw). As you can see above, The <body> element gets bluebar.gif as a background - this should be the same colour as the darkest blue in the gradient, 1 pixel high and the same width as your sidebar. It'll sit underneath the sidebar, and only show when the sidebar runs out.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
Code:
<html>
<head>
<title>Layout</title>
</head>
<style type="text/css">
body {
margin: 0;
background: url(bluebar.gif) top left repeat-y;
}
#header {
background: red; /* use an image here! */
text-align: center;
height: 165px;
margin-left: 150px;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 300px;
background: blue; /* and here! */
}
#logopic {
position: relative;
margin-top: 10px;
left: 25px;
}
#content {
margin-top: 10px;
margin-left: 150px;
}
</style>
<body>
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="sidebar">
<div id="logopic">
<img src="logo-tower.gif" height="166" width="135" alt="" />
</div>
Sidebar
</div>
</div>
</body>The #header <div> can have the same background image as your page does now, the #menu <div> has the plain white-to-blue graduated image you've currently attached to the body (both these images can be cropped to be 1 pixel wide, btw). As you can see above, The <body> element gets bluebar.gif as a background - this should be the same colour as the darkest blue in the gradient, 1 pixel high and the same width as your sidebar. It'll sit underneath the sidebar, and only show when the sidebar runs out.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
Just looked at the site, and noticed that the <div id="center"> table isn't aligned properly. That table cuts through the logo and menu.
[sub]
____________________________________
Just Imagine.
[sub]
[sub]
____________________________________
Just Imagine.
[sub]
- Thread starter
- #28
JoeAtRevolutionUnltd
Programmer
New Site
Chris- thanks for all the help. It is greatly appreciated.
I think all the layout and image bugs are finally worked out. Now I have to work on the content on some of the pages.
Thanks to everyone for the help.
Joe
Chris- thanks for all the help. It is greatly appreciated.
I think all the layout and image bugs are finally worked out. Now I have to work on the content on some of the pages.
Thanks to everyone for the help.
Joe
Make the background images narrower and you'll save a lot of bandwidth. For example, bg.gif at 150x650 pixels is 26K in size. Chop it down to 1x650 (it's going to repeat horizontally anyway, remember) and it only takes up about 1.5K - much quicker to download!
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Status
Similar threads
- Locked
- Question
- Locked
- Question