2 replies [Last post]
regia's picture
San Diego
Last seen: 7 years 14 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

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.


gary.turner's picture
Last seen: 1 year 23 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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>
  <meta content="text/html; charset=utf-8"
  <title>test document</title>
  <base href="">
  <style type="text/css">
  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")
    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)
    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;
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Table of
    <li><a href="">Register
    <li><a href="">Contact</a></li>
  <div id="wrapper">
    <div id="header">
      <h1><a href="/"><img alt="American Moment"
      <p><a class="register"
    </div><!-- end header -->
<!-- rest of the stuff goes here -->
  </div><!-- end wrapper -->
I hope you can apply this without all that WP silliness breaking things.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

regia's picture
San Diego
Last seen: 7 years 14 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

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