2 replies [Last post]
regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 19 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.

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 9 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

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>
I hope you can apply this without all that WP silliness breaking things.

cheers,

gary

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

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 19 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