Fri, 2013-07-19 21:08
Hi All,
I have been "away" for a long time and now need help as I'm working with a print designer who is pixel perfect and he likes to use a specific layout that I am having a hard time with.
I just built this site for him and as you can see the nav bar is full width. To do this I put a repeat-x image on the background which includes the nav bar colours and then in the header used css for the actual nav bar. He is not pixel perfect happy with it and I'm sure there is a better way to do this and have the whole nav bar in css repeat across the width, but I cannot figure out the best way to do this. Can anyone suggest a method that would work? I mean a basic idea not the whole code.
Thanks
Sat, 2013-07-20 02:22
#1
A teaching opportunity
First, you absolutely must disabuse this 'designer' of the notion of pixel perfection. The web is not print no matter how much he wants it so. For a simple demo, zoom text-only (in Firefox) two or three steps to show what the user may do to his oh-so-perfect design.
Here's the approach I'd use. Using em measures will allow for changes in base font size.
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>test document</title> <base href="http://66.147.244.238/~mericbj6/"> <style type="text/css"> /*<![CDATA[*/ body { background-color: rgb(40,51,107); color: black; font: 100%/1.5 sans-serif; margin: 0; } #wrapper { background: url("wp-content/themes/am/images/content-bg.jpg") no-repeat gray; color: black; margin: 0 auto; width: 960px; } #header { overflow: hidden; padding: 1px 0 2.75em; } #header p { background: url(wp-content/themes/am/images/star.png) center top no-repeat; color: white; margin: 0 60px 1em 0; text-align: center; width: 100px; float: right; padding: 2.75em 0 0; } #header p a { font-family: open-sans,Arial,Helvetica,sans-serif; font-size: 1.25em; line-height: 1.5; text-transform: uppercase; } h1 { color: rgb(248,213,4); float: left; font-family: serif; font-size: 4em; margin: 0; text-shadow: 0.05em 0.05em 0.05em #333 } #header a { color: inherit; text-decoration: none; } ul#nav { background-color: rgb(53,73,142); border: solid white; border-width: 1px 0; left: 0; margin: .5em auto; padding: .5em 0; position: absolute; top: 7.5em; text-align: center; width: 100%; } #nav li { display: inline-block; border-right: 1px solid white; padding: 0 1.5em; } #nav li:last-child { border: none; } #nav a { font-size: 1em; font-weight: 600; text-decoration: none; color: white; } /*]]>*/ </style> </head> <body> <ul id="nav"> <li><a href="http://66.147.244.238/~mericbj6/">Home</a></li> <li><a href="http://66.147.244.238/~mericbj6/blog/">Blog</a></li> <li><a href="http://66.147.244.238/~mericbj6/about/">About Us</a></li> <li><a href="http://66.147.244.238/~mericbj6/table-of-contents/">Table of Contents</a></li> <li><a href="http://66.147.244.238/~mericbj6/register-support/">Register Support</a></li> <li><a href="http://66.147.244.238/~mericbj6/contact/">Contact</a></li> </ul> <div id="wrapper"> <div id="header"> <h1><a href="/"><img alt="American Moment" src="wp-content/themes/am/images/logo.png"></a></h1> <p><a class="register" href="http://66.147.244.238/~mericbj6/register-support/">Register Support</a></p> </div><!-- end header --> <!-- rest of the stuff goes here --> </div><!-- end wrapper --> </body> </html>
cheers,
gary
Sun, 2013-07-21 02:22
#2
Well thank you so much Gary
Well thank you so much Gary for that detailed code. I have been trying to educate my print designer but he has Muse, ever seen the code that spits out??? A total nightmare.
As you said, we do use WP, so I should be able to write a function that puts the nav bar outside the wrapper.
Thanks again