Whenever I get looking at someone's code the little things pop out, in no particular order, so why fight it? Let's start with the outer and work inward:
1) Open the page to full screen? (For now I'm viewing in Chrome and Opera) See anything odd?
The top container is pinned right, the bottom container pinned left.
Trick here is to make sure everything is inside the outer wrapper. Give the body a text-align: center; property, then to the outer wrapper give a width property in %, margin: 0 auto; text-align: left; and now the main container will stay centered. This will all agree with the footer navigation, which is centered already.
2) id="footer" is semantically in the 'wrong' element, which element scope is navigation. It means a little more structure but it's not a bad thing to wrap the link list in an UL or a DIV id="nav" or class="nav". The P needs to be inside the footer container, as well. It's kind of just hanging off the end of the page.
This will give a bullet list when styles are turned off:
Code:
CSS
ul.nav {
text-align: center;
margin: 0;
padding: 0;
}
ul.nav li {
display: inline;
}
HTML Code:
<body>
..
<div id="footer">
<ul class="nav">
<li><a href="#">Link one</a> |</li>
<li><a href="#">Link two</a> |</li>
<li><a href="#">last in list</a><li>
</ul>
<p>Copyright</p>
</div>
</body>
For more control with spacing you can squeeze all the LI's into one code line, like so:
HTML Code:
<body>
..
<div id="footer">
<ul class="nav">
<li><a href="#">Link one</a> |</li><li> <a href="#">Link two</a> |</li><li> <a href="#">last in list</a><li>
</ul>
<p>Copyright</p>
</div>
</body>
To really dial in control, wrap the <span>link text</span> and apply padding to the left and right of the <a/a>, then a whitespace is not needed in the markup. There are a tonne of things you can do to tweak the spacing.
The <span> technique with pad on <a> lets you increase the FOCUS zone on the anchor, while limiting the effect of text-decoration.
Code:
CSS
ul.nav li a {
padding: 0 1em;
text-decoration: none;
color: #fff;
background: transparent;
}
ul.nav li a span {
text-decoration: underline;
}
ul.nav li a:hover {
color: #b34234;
background:#396 url(images/tile06_on.jpg) repeat-x;
}
ul.nav li a:hover span {
text-decoration: none;
}
Notice the underline does not exceed the text in the span, but the focus area includes the clear space as well?
3) display: inline-block; is not a widely supported property: value; in older browsers. Best to include display: inline; or use it by itself in this instance.
4) background:url(images/tile06.jpg) #396 repeat-x; may give a burp in older browsers. background-color should appear first in the shorthand, as in,
background:#396 url(images/tile06.jpg) repeat-x;
Notice above that an _on image is used for onmouseover effect.
5) There are two "content-type' declarations in the <head>. I'd go with the UTF-8 and drop the other one.
Will keep poking away. Something else might pop out. Cheers!
Submit Your Article
Forum Rules
Reply With Quote
Originally Posted by weegillis
