Aug 06
Designing a CSS based template - part V
2004 at 06.31 am posted by Veerle
In our previous part we implemented our very first CSS code. For first time visitors here is: part 1, part 2, part 3 and part 4. In this part of the tutorial we will be implementing our navigation on the left.
But first things first. When creating webpages we always have to make them as accessible as possible. If you read the comments on part part IV, you'll notice that someone mentioned it would be better to use a h1-element for the main header since this is more semantic code and it makes a site more accessible to search engines as well as people with no CSS. This is of course too important to overlook, so I've altered our code this way.
The image replacement technique
This technique is actually called the image replacement technique. It means that we use text in our HTML code instead of the actual image. The header image will show in browsers that support the CSS (as a background image "background: url(images/header.jpg)") and the text will be invisible (because of the "text-indent: -9999px"), since our CSS code places the text outside our viewing area. In older browsers or in screen readers (used by blind people) you'll see the text instead. This way we have more accessible code.
h1 {width: 692px;height: 90px;text-indent: -9999px;background: url(images/header.jpg);margin: 0;padding: 0;}
The width and height are necessary to define the space for our header background image. The "padding:0" and "margin:0" are needed to make sure our image aligns nicely to the top of our page. Furthermore, I've moved the "text-align: center" into our body tag selector since all the content should be centered. However, the content within the container should not be centered, so we add a "text-align: left" there. Our container has "margin: 0px auto" which means it will appear at the very top (0px) and centered (auto).
Implementing the navigation
To implement the navigation buttons on the left we first create an id container holding the content on the left:
#left {width: 178px;}
So far the only thing we need to define is its width. Within this left container we have the div id container for the navigation, called navcontainer. The best way to create a navigation with CSS is to use a bullet list as HTML code and create CSS styles to it to change its design. Like this ("#" is used as a dummy link. ):
<div id="navcontainer"><ul><li><a href="#">Home</a></li><li><a href="#">About me</a></li><li><a href="#">Contact me</a></li><li><a href="#">Articles</a></li><li><a href="#">Photo roll</a></li></ul></div>
This creates a simple bullet list. Since we don't want bullets but nice buttons instead, we will remove those bullets in our CSS and use background images instead. This is the CSS code:
#navcontainer {width: 178px;}
#navcontainer ul {margin: 0;padding: 0;list-style-type: none;font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;text-indent: 20px;letter-spacing: 1px;border-bottom: 1px solid #fff;}
The first piece of code defines the width of the navigation container. The second part defines the "ul" tag within the navcontainer. "margin:0" and "padding:0" makes sure there is no space between and around the buttons and it removes the left-indentation. "list-style-type: none;" removes the standard HTML bullet. Then we have the text specifications and the last one is there to create a white line at the bottom of our navigation to finish the navigation nicely.
#navcontainer a {display: block;width: 178px;height: 22px;}
#navcontainer a:link, #navcontainer a:visited {background: url(images/bg_navbutton.gif);color: #5C604D;text-decoration: none;}
#navcontainer a:hover {background: url(images/bg_navbutton_over.gif);color: #A5003B;text-decoration: none;}
The color sets the "color" of the text and the "text-decoration: none" is there to remove the standard underlining of a link.
It's always necessary to make your navigation as clear and simple as possible, so that's why I added an extra style to apply to the button of the current section. I've called it "current" and this is the CSS code:
#navcontainer li a#current {background: url(images/bg_navbutton_over.gif);color: #A5003B;text-decoration: none;}
This style defines the "current" id within the bullet link tag (li a) of the navcontainer. The properties and values listed are the same as our hover state. The only thing needed now is to add the current id to our HTML code:
<div id="navcontainer"><ul><li><a href="#" id="current">Home</a></li><li><a href="#">About me</a></li><li><a href="#">Contact me</a></li><li><a href="#">Articles</a></li><li><a href="#">Photo roll</a></li></ul></div>
A lot of good CSS navigation examples and tutorials can be found on:
- Listamatic, one list
- Listamatic 2, nested lists
- Listutorial, tutorial on CSS based lists
That's it we have our navigation up and running! I hope you enjoyed it and you will be joining again for our next part.
Go to the next part of this tutorial.
59served
1
Excellent! Veerle. This is SUCH a helpful tutorial. Thank you very much!
2
Wow! I’ve been using the Farnier Image Replacement technique but now I’m going to switch to this new method so I can get rid of all the useless span tags. Did you create this method? Whoever did is a genius.
Thanks! That was awesome!
3
yay! i used some parts of it for my layout (gotta fix it). waiting for the next part :)
4
@geoff, hm to be honest I just used this information from Ezku (see his comments in my previous part of the tutorial). The extra span tags are probably there for a reason. To be honest I’m still learning those techniques myself. I’ve only started to use CSS/XHTML since December 2003, so in fact I’m still rather a newbie myself… don’t shoot me if I overlooked something here :-S
5
h1 {width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
The text-indent is not really useful. Prefer the use off the display:none propriety. By the way, tips really are useful !
6
Nitz,
If you use ‘display: none’, nothing will be shown at all. And that’s not what Veerle intended: it’s an image replacement technique, so the backgound-image that holds the header image should be visible of course :)
Though I prefer to do it this way:
#h1 {
display: block;
overflow: hidden;
margin: 0;
width: 629px;
padding: 90px 0 0 0;
height: 0px !important; height /**/:90px; /* IE5 Fix */
}
7
And i forgot the most important part:
background: url(images/header.jpg);
Of course :)
8
If you use ‘display: none’, nothing will be shown at all.
He was speaking of the span technique, which uses display:none; to hide the text, rather than this method which pushes it off the screen.
9
Ken is right, i was speaking about the span element trick. See the HTML :
<h1><span>Here’s the big title</span></h1>And now the CSS one:
h1 {
background: url(images/header.jpg);
width: xxxpx;
height: xxxpx;
}
h1 span { display: none }
I think this technique is more ‘clean’ than yours, but the result is exactly the same. ^_^
10
@Nitz, Ken, smart tip guys, thanks! :-) I’m just wondering why this method is actually better then mine? With this span you have this extra “span” code in the middle, isn’t it “cleaner” with the text-indent? I see that some other CSS people use it like I did for instance Jeffrey Zeldman… I just hope that CSS beginners won’t get confused by all this :-S But don’t let it stop you to post tips or ideas of course :-)
11
Founding this method ‘cleaner’ is just a personal statement, I think. Perhaps I am over-contaminated by the ‘semantics’. ^_^
I think the display:none have to be used here because of the purpose of the tip: hiding the text. Using the text-indent property when you have the display: none is similar - for me - to the use of a
<span><b>This is a title</b></span>instead of a
<h1>This is a title</h1>for a title.
PS: I hope you all understand my crap english… I am young, and french. ^^
12
Hello Veerle!
I love it, your tutorials. I did all 5 at once, because I always wanted to learn more css, not only basic.
At first I got white line below my buttons and could not scope with it. But when I deleted your line
border-bottom: 1px solid #fff;
in #navcontainer ul {…
I got everything OK.
These buttons are OK with resoliution 800x600, but when I change the resoliution to larger then the buttons are not in place.....
13
Hi Audra, I looked at your code and I see that you forgot the container div that is wrapped around the header and navigation. See the code of my final version. I altered the code of header + I added a container div in part V, you might have overlooked this part. Sorry for the change of code, hope it doesn’t confuse you.
Also, very important, don’t forget to use the proper DOCTYPE at the top of your source code : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre>
14
Hi Nitz, I see your point. Still, I think I’ll stick to my version this time since I’m afraid people already get a bit confused since I have already changed some of the code in part IV and it would mean I have to change it again. I think for beginners that would be too much to follow.
15
I personally don’t like the span technique because, semantically, you don’t really need the spans. The technique is using spans for presentational purposes. Plus: using “display: none” prevents it from being read by vision impared web readers, afaik.
But, fyi, the method that Veerle uses has some minor problems with Safari.
16
geoff, thanks for clarifying the “span” thing. What are these minor Safari problems? I use Safari (1.2.2) and I don’t see any problem, everything looks fine.
17
“The technique is using spans for presentational purposes.”
I always thought that spans were only used to add presentational purpose to a text. :?
But ‘my’ method works for text readers, because the text readers don’t use the ‘screen’ css files, and by default, don’t read the css files, unless they are marked as ‘audio’ css files in the html page.
18
A little background on the image replacement techniques being bandies about here should prove helpful. One of the first was named the Fahrner Image Replacement technique, or FIR, named after CSS guru Todd Fahrner. It was then shown that this technique failed with screen readers, and other techniques were devised. The one being used by Veerle was developed by Mike Rundle. The one promoted by Nitz was developed independently, but at around the same time by Seamus Leahy and Stuart Langridge, and so has been dubbed LIR. There are other techniques, one involving Flash (IFR) developed by Shaun Inman.
Both the techniques espoused by Veerle and NItz seem to work and are accessible to screen readers, but it is best not to confuse them, as they work in different ways, although they accomplish the same visual result.
You may also be interested in reading Doug Bowman’s take, but be sure to read his Important Notes at the end of the article.
19
I am wondering if any of you has already used a screenreader or has even seen it used by someone? It’s a great misunderstanding that screenreaders ignore css rules when the media-type ‘screen’ is used. Actually, most screenreaders used today don’t give anything about media types and ignore them completely.
Most screenreaders (like Virgo, Hal and Supernova) literally ‘read’ what’s on the screen and don’t even have access to the underlying html-code of a rendered webpage. So if a piece of text is rendered off-screen by indenting it with -9999 pixels, most screenreaders won’t be able to read it either. That’s the painful truth :)
Just like we’re working around browser bugs, we actually should work around screenreader bugs too. And believe me: most screenreaders are really crappy and it seems that their developers are not too familiar with web standards, css media types, semantic markup and the like… it’s not really a competitive market and the quality of this software is, well… bad! I work for an agency that does web accessibility testing, so I’ve tried them all (it’s disapointing, really...).
This will get better over time of course: recent versions of Jaws (another popular screenreader, especially here in Belgium) does a remarkably better job. But remember that blind and visually impaired web users don’t upgrade their screenreader software as often as we upgrade our browsers! Screenreaders are incredibly expensive and although visual impaired people get a finanical compensation by the Belgian government, there must be a 4 year period between (major) software upgrades! Don’t know how this is in other countries…
20
Yes, the whole ‘media=...’ thing is a brilliant idea in theory, but besides ‘media=print’, virtually every other device under the sun considers itself OK to read ‘media=screen’ even if you have a ‘media=handheld’ before it (they download both generally). Smart phones, PDAs, screen readers, internet fridges. It’s quite irritating.
Anyway, the best summary of the current ‘state of play’ in image replacement at Dave Shae’s blog (http://www.mezzoblue.com/tests/revised-image-replacement/)
It has a quick explanation followed by known issues.
21
when is the next part of the tutorial? just wondering. no rush.
22
A lot of attention revolving around image replacement techniques, I see.
You should note that your method of choice should be dependant on the task at hand and it’s requirements - therefore it is not possible to explicitly declare one method to be above all others.
However (you knew it was coming, didn’t you?) - I have personally found the “Phark Revised” method listed (among many others) by Mezzoblue to be the most efficient in practically all the situations I’ve come across.
The PR (let’s shorten it a bit) method requires only one line of CSS to be implemented. Furthermore, there needs to be absolutely no extra markup, which is always a plus (what if you don’t have access to the markup to add extra handle tags? eg. CSS Zen Garden). And, what is almost remarkable for a method this easy - there are no known shortcomings. (Well, except for the css+no-images problem, but it concerns practically every noteworthy method, so I’ll be nice enough to leave it out here.) It works - according to Mezzoblue - on virtually every platform.
There was a note that this method would have glitches with Safari - this is untrue by Veerle herself (see comment above) and Mezzoblue. See here: Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5. Meaning that the issues are fixed in this version.
Someone commented that the method was illogical - pushing text off the screen instead of just hiding it - but to me it is an extremely simple, easy to implement method with logical reasoning behind it.
The PR method is my choice.
Another recommended method, but one which has different uses, is the Inman Flash Replacement technique, which, according to its name, uses flash to dynamically replace text inside defined tags.
Looks cool, degrades nicely. It won’t do for header images, but on its own area, it excells.
I’ve never needed to actually worry about accessibility with screen readers nor the like, and I’m glad for it. There really seems to be no proper solution if you want it all - lack of extra markup, degradeability, screen reader accessibility. (Continues...)
23
(Continues...) Here’s my take. For your own needs, you can have yours, but this one is mine. :)
Feel free to point me to any issues or questions you might have, I’ll be following this thread.
PS. Veerle, how’s it for a bit bigger comment box? This one is getting small :)
24
@Jenny, I’m planning on posting the last part on Friday.
@Ezku, thanks for the full explanation about this technique. About the comment box, I’ll have look at my cms settings ;-)
25
Excellent! great tutorial! From begining to end! =D
Really nice !
I think my site needs a redesign, hehe...! ;)
thanks a lot for share!
(and forgive my mistakes, I’m not good wrinting in english =S)
Carina.
26
Great blog. Love your tutorial. Can’t hardly wait for the last part. Nice Job!
Goed gedaan Veerle. ik heb al veel bijgeleerd!!
27
<quote>"I’ve never needed to actually worry about accessibility with screen readers nor the like, and I’m glad for it. “ - Ezku</quote>
That’s like saying ‘Lucky no-one in a wheelchair ever comes to my library’.
I think it’s ok to say you haven’t got all the answers yet, but you seem to be taking the view that people with vision problems are only interested in sites about vision impairment when they get online.
28
I’m glad people love my tutorial. It’s great when people interact and give comments, this way I learn from this a lot too, so thanks to everyone.
@Ezku, Alex : I agree with Alex on this, I think you should care anyhow and do your very best. Sometimes it can very challenging. We did some websites for the Library of Congress and they have rather strict (usability and accessibility) guidelines that we need to follow. These sites (for kids) have a lot of interactivity, like games, multiple choice quiz etc. We had to use ShockWave or Flash for this, but we always tried to find a way to make sure that users with disabilities had an alternative too. The main purpose of these sites are the interactive parts so in this case it would be “wrong” not to use ShockWave or Flash because it was such an interesting tool to design a fun way to get kids excited about learning. It’s a matter of making the right choice I guess.
29
Sorry, Alex, I was a bit unclear. I hope by reading this you’ll get an idea of what I meant - as you can see, English isn’t my native language, so from time to time I’ll have a bit of trouble expressing myself without confusions.
Of course I try to do my best with accessibility. I do that, yes, even now that those with visibility impairments are pretty much excluded from my audience due to the nature of the contents.
By saying that I haven’t needed to worry about screen reader compatibility or such, I mean just that. I have never been on a job with strict requirements such as one described above by Veerle. I haven’t been required to support screen readers - and as a result of that, I haven’t, say, tried a screen reader for myself. I would have no idea how a site of mine would seem like on such a platform.
My main concern really is on cross-browser functionality and server-side scripting. That doesn’t mean I don’t try to apply the most accessible solutions whenever possible. What it does mean is that these techniques are applied on only a theoretical basis with no practical feedback on whether or not it in fact works. Something like a no-css situation is testable and inside my resource field, but I don’t have the resources nor the implicit need to test my sites on platforms such as JAWS.
Additionally, it means that I would not disqualify an otherwise almost perfect image replacement technique because it possibly might not be interpreted right on proprietary platforms. It’s just not worth it.
As I said, there seems to be no perfect solution. It’s an either-or situation.
PS. Strange, I’d think that a screen reader such as JAWS would ignore CSS styles with only the aural properties applied, effectively leaving the screen-read (how’s that for an adjective) site in a no-css state. So how would any visual tricks such as image replacement affect the output? Well, I wouldn’t know, would I.
30
No problem Ezku. You’ve made things a bit clearer.
Although the W3C has targetted a number of CSS elements specifically at screen readers (voice-family, speak and speech-rate come to mind) to my knowledge no device actually uses them.
It would make life easier if screen readers did ignore CSS completely. In fact the whole idea of image replacement assumes that Screen readers don’t read the CSS and instead stick to presenting the good old HTML/XHTML.
But, although they vary quite a bit, the majority of them interpret ‘display:none’ as ‘dont say this’ (Jaws is the exception actually).
‘visibility:hidden’ is pretty much the same.
I can’t confirm it, but I believe the ‘Phark method’ using negative ‘text-indent’ is an option.
Although it’s a bit semantically ugly, the most fool-proof method of IR is probably Tom Gilder’s (http://blog.tom.me.uk/2003/08/07/), which leaves the original header text exactly where it is, but floats an ‘image layer’ on top of it as a cover. A screen reader should see the layer as an empty DIV and move on to the heading text.
I think the key will be when someone (Mozilla foundation maybe) comes out with a quality free screen reader that developers can use. At the moment it would cost a developer around $US1,000 to license the most popular 5-7 screen readers. When developers can test easily, the sites will work.
31
I came across an interesting read to give us a bit more insight in screen readers. It’s called “Three Things I Learned About Screen Reader Users”
32
I’m having the same problem as Audra with the navigation buttons. I can’t get the buttons to line up under the banner image. On the page I’m working on (I haven’t uploaded it yet) the buttons stay on the left and in the same position when the window size is changed.
How do I fix this?
Btw, I’m using Dreamweaver MX 2004
33
Veerle’s design has a wrapping DIV called ‘container’ that holds the entire body within a set width.
<div id="container"><h1>My Blog</h1>.... etc… </div>Audra’s code (& yours too possibly) is missing that DIV.
Audra’s also has extra margins set on the UL that shouldn’t be there either.
34
Alex, I was just about to tell Jessica the same… you’ve beat me to the punch :-)
Jessica, if you need futher help, you’ll have to upload your page and give us the URL.
35
I’ve just used this tutorial to build a new site for a client. It’s been great - thanks Veerle.
I have, however, encountered an issue. The client has asked for the banner to link back to their home page. So, I’ve included the url in the banner container but I guess because the text appears off the page the hyperlink is not visible.
Any idea how I can get around this?
36
I don’t quite see why you have a div around the ul-element (the menu), since you can just apply the id to the ul.
37
@Henrik, this navigation seems to need a div around otherwise things start to get out of place. I use Listutorial as an example.
38
@Sandi, you’ll need to add an extra style to make this work. I think it will work if you add this CSS code:
h1 a {
display: block;
width: 692px;
height: 90px;
}</pre>
Hope this works.
39
Veerle, I had actually tried that but no luck. I ended up going back to putting in an a href and img tags for the banner instead of using this image replacement. Guess I can’t have everything. :-)
40
Hi Sandi, hm, strange, this should normally work. I must say I’ve only tested this in Safari and it worked but not in other browsers. I wouldn’t give up yet. Have you tried to add h1 a:link too ?
h1 a, h1 a:link {
display: block;
width: 692px;
height: 90px;
}</pre>
Not sure if this helps, but I just thought of this.
41
Thanks a lot for the tutorial. It is a great quick way to get things done and also documented well enough to learn.
If fact the whole blog is great for learning.
Thanx a lot.
42
What about if I want to vertically centre the text on the navigation button? I understand the
text-indent: 24px;line I’ve used shifts the text to the right 24px, but what if I want it to move down a couple of pixels too? I’ve tried all sorts of margins, paddings and also a vertical-align: middle statement in my CSS, but I can’t get only the text to move down.
The page in question is http://atlantis.plastiqueweb.com/2005-2, and my CSS code is:
#navigation-container {width: 170px;
}
#navigation-container ul {
list-style-type: none;
margin: 0;
padding: 0;
text-indent: 24px;
font-weight: bold;
}
#navigation-container a {
display: block;
width: 170px;
height: 23px;
}
#navigation-container a:link, #navigation-container a:visited {
background: #EBEAE8 url(../images/layout/navigation_button.png)
no-repeat;
color: #303030;
text-decoration: none;
}
#navigation-container a:hover {
background: #EBEAE8 url(../images/layout/navigation_button.png)
no-repeat;
color: #303030;
text-decoration: none;
}
So what would I need to add to vertically align the text to the middle of the buttons?
43
I’ve gotten an answer to the vertically aligning problem I previously posted elsewhere, so I thought I’d post the solution here in case anyone else runs into the same problem.
All you simply need to do is add a
line-height: _px;command in the navcontainer a part of the CSS, where the underscore should be replaced by the pixel height of you navigation button. So if, as in my case, the navigation button is 23 pixels high, simply add
line-height: 23px;and it will centre vertically. I then actually had to adjust it slightly to 22px, but it’s the idea of using line-height that counts. :o)
44
@Atlantis, sorry I didn’t get back to you any faster. But yes indeed you can fix this with line-height. Glad you’ve found it yourself so fast ;-)
45
Does anybody know if it’s possible to have two list based menues on one page, one horizontal and one vertical? The IE displays the horizontal menu fine, but Opera and FireFox show it vertical.
#nav_bottom {
width: 550px;
}
#nav_bottom ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav_bottom ul li {
display: inline;
}
#nav_bottom ul li a {
text-decoration: none;
display: block;
text-align: center;
margin: 0px 4px 0px 0px;
padding: 0px;
height: 20px;
width: 74px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-left-color: #999999;
line-height: 20px;
}
#nav_bottom ul li a:visited, #nav_bottom ul li a:link {
background-color: #333333;
color: #FFFFFF;
}
#nav_bottom ul li a:hover, #nav_bottom ul li a:active {
background-color: #FF0000;
color: #FFFFFF;
}
#nav_bottom ul li a #current {
background-color: #FF0000;
color: #FFFFFF;
}
46
Hi,
I cant get the navigation to align with the header,, what I’m a doing wrong ??
47
@Mike A. and ken, if you want me to help you then I’m afraid I’ll have to see all the code material, so both CSS and XHTML code.
48
I dont understand how did you align the navigation ?
#left {
width: 178px;
}
BUT how does this work??? 178 pixels from where?
Sorry a lil noobish....please some one clarify...I’d appreciate it :)
THanks
49
Hi Neil, the left id has a width of 178 pixels, that’s the exact width of the navigation. In the next step of the tutorial, you’ll see that we add a ‘float: left’ to this style, because if we don’t the content will not be placed next to the navigation, it will jump under the navigation. We actually ‘align’ the navigation in the next step by using the ‘float’ property. Hope this makes sense to you?
50
OH ya :) , gotch ya ...
178 px is the width of the div and that thing is aligned to the left of the main div (container)…
got it, thanks :) ,
currently learning css ;) , its been less than 24 hours :P
Thanks for writing such a nice tut , its really helpful =)
Neil
51
nice css
thanks
shailesh
52
I cannot get my navbar to align to the left please help it has been several days and i have read many tutorial but cannot put all i have learned together into a page yet.
here is my html
and css code what am i doing wrong
<html>
<head>
<title>Maggie’s Shortbread</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="cookie-style3.css">
</head>
<body>
<div id="header"><img src="images/logo2.jpg"
alt="My blog” width="692" height="90" />
</div>
<div id="container"><h1>My Blog</h1>.... etc… </div>
<div id="left">
</div>
<div id="navcontainer">
<ul>
<li>History</li>
<li>Cookies</li>
<li>Packages</li>
<li>Purchases</li>
<li>Contact</li>
</ul>
</div>
<div id="content">this is the right</div>
</body>
</html>
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align: center;
}
#container {
text-align: left;
margin: 0px auto;
}
h1 {
width: 692px;
height: 199px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
#left {
width: 178px;
/* float: left;*/
}
#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
#navcontainer ul li a:link, #navcontainer ul li a:visited {
display: block;
text-decoration: none;
font-weight: bold;
border-bottom: solid #000000 1px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;}
#content {
width: 514px;
float: left;
}
/*#navbar {
position: absolute;
top: 0px;
left: 0px;
width: 198px;}
#navbar ul li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;}
#navbar ul {
margin: 0;
padding: 0;}
#navbar ul li a:link, #navbar ul li a:visited {display: block;
text-decoration: none;
font-weight: bold;
border-bottom: solid #000000 1px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;}
53
@rmvg, you’ve made some structural errors in your HTML code. The container div should be the first one and end at the very end since it includes all other divs. Some other divs were also placed the wrong way. And the left div should have a float left. Here is the code that should work:
...
<head>
<title>Maggie’s Shortbread</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align: center;
}
#container {
text-align: left;
margin: 0px auto;
}
h1 {
width: 692px;
height: 199px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
#left {
width: 178px;
float: left;
}
#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
#navcontainer a {
display: block;
width: 158px; /* total width minus padding of 20px */
height: 22px;
}
#navcontainer ul li a:link, #navcontainer ul li a:visited {
display: block;
text-decoration: none;
font-weight: bold;
border-bottom: solid #000000 1px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#content {
width: 514px;
float: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<h1>Header comes here, image link and dimensions should be in the
h1 style</h1>
<div id="left">
<div id="navcontainer">
<ul>
<li>History</li>
...
</ul>
</div>
<p>other content on the left</p>
</div>
<div id="content">Here comes the content on the right</div>
</div>
</body>
</html>
</pre>
54
First time I see the “image replacement technique”. Great stuff - But couldn’t it been considered by search engines as a way to hide text?
Emmanuel
Jazar
55
hi veerlel, first of all, thanks for this usefull tutorial, i’m new in this ocean and have a basic question. how i display the contents of an navigation item in the “container”. using frames i can use target (self, blank,....)
;-)
56
@Cabir, I’m afraid I don’t understand you question. And on another note frames aren’t the way to go it’s mid 90ies old coding, so I wouldn’t use them anymore.
57
ok, i’ll try to explain what I want. in this tutorial, we use <li>Home</li> as an item of the navigation, my question is instead of using <a href="#"> I want use a real page like <a href="home.php">, but the content of home.php must be displayed in the content area (#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
instead of using a blank page or something else.
hope you understand… :)
58
Thank you so much for your tutorial.. it really is fantastic. I have just stumped myself on a little problem. Id liike the navigation on my site to be included in the blue “container” but I cant seem to get it there and make it stay in a spot within the container when the window is resized...any advice? the site is www.hilibanjo.com...thanks!!
59
Love your site ! It’s a gr8 help for me.