Sep 05
Designing a CSS based template - part VIII
2004 at 11.24 pm posted by Veerle Pieters
This is the last part of our tutorial. (Previous parts: part 1, part 2, part 3, part 4, part 5, part 6 and part 7). We will add the favorite links on the left and link our styles in a separate CSS stylesheet.
Adding the XHTML code
First we will add the xhtml code for our favorite links:
<div id="favlinks"><h2>My Favorite Sites</h2><ul class="extlinks"><li><a href="http://stopdesign.com/">Stopdesign</a></li><li><a href="http://www.simplebits.com/">SimpleBits</a></li><li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li><li><a href="http://www.zeldman.com/">Zeldman</a></li></ul></div>
First we put all our links in a div container and give it an id name favlinks. This id is necessary to define width, margin and padding of the box containing our title and links through styles. Next we have our title between header tags. This will also be styled through css together with our list below it which also has a style defined. For the links we use a class style because this way we can use it repetitively in our page. So you could add another similar list of links with a header title. But if you do so make sure it is added in the "favlinks" container div or add another div id around these links to keep everything in the right place.
The CSS code
First we define our "favlinks" div id container:
#favlinks {width: 163px;padding-left: 15px;margin-top: 10px;}
We define the width of the box and give it a padding-leftso that it doesn't stick to the left. We also leave some extra space at the top and add some margin there. The width of our container is not 178px like our navigation, it is 163px since we added a left padding of 15px (163+15 makes 178). This is called the Box Model, also nicely presented in 3D by Jon Hicks.
#favlinks h2 {font: normal 16px Georgia, Times New Roman, Times, serif;color: #5C604D;margin: 0 0 10px 0;padding: 0;}
Next on the list are the styles for the header tag where we have our title. First 2 lines should be obvious by now, color and font styles. Below the padding and margin. We only added a 10px margin on the bottom. Padding and margins are needed for the header tags if we don't want to have very big gabs between the title and the links below, just some space exactly how we want it, and for me that is 10px at the bottom.
#favlinks ul {margin: 0;padding: 0;list-style-type: none;}
On to our next step in defining our listed links. First we make sure the standard bullet is hidden and that our margins and padding are set to zero, just like we did for the navigation in part 5.
ul.extlinks li {background: url(images/bullet_extlink.gif) no-repeat 0 3px;font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;padding-left: 12px;}
We've added a class called "extlinks" to define our links. We use "ul.extlinks li", which means that we style the li tag within the ul class "extlinks". First we add a non-repeated background, our bullet and we position it 3px from the top (y position) and 0px from the left (x position) to make sure the bullet aligns perfectly next to our links. We define the font style and then we add a left padding to make sure our text leaves some space on the left for our bullet.
.extlinks a:link {color: #A5003B;text-decoration: none;border-bottom: 1px dotted #A5003B;}
.extlinks a:visited {color: #6F2D47;text-decoration: none;border-bottom: 1px dotted #959E79;}
.extlinks a:hover {background-color: #C3C9B1;color: #A5003B;text-decoration: none;border-bottom: 1px solid #A5003B;}
And last but not least we define the colors and other styles for our links. We use a bottom border of 1 pixel which becomes solid when we roll over. To make sure we don't have a double border, we need to hide the standard underlining by adding "text-decoration: none". Font styles aren't necessary to add since they are already defined in the li tag style. We've also added a background color in the rollover state. We degraded the color a bit for the visited links and changed the bottom border with a subtile color, less visible. This way people know which links they've visited, things remain subtile and you can still make the difference. When adding these styles please make sure you that you are use the right order first links, then visited, hover and last active (if you want). There is a nice trick I learned from reading The Web Standards Solutions book by Dan Cederholm from Simple Bits, to makes sure you remember the correct order: LoVe /HAte (L from links, V from visited,...)
Here is the final result.
Creating the external stylesheet
Now that we have finished our design and I hear you yelling "Huray!" Just one more (important) thing (trying not to sound like Steve Jobs here...). You've noticed that I always include my styles within my webpage. But most of you will know this is not the right way to do this. You should put your styles in a separate stylesheet and link it to your document. I only did it this way to make things easier for you to learn because it's all there in 1 document. But like I said this is NOT the way. So we copy all our styles and paste them in a new document and save it as "styles.css".
Linking the stylesheet
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
This line of code is what we replace our old code with. Since this style sheet will be used to be displayed on a computer screen, we add media="screen". You could add another stylesheet by adding a link to another stylesheet and add media="print". This stylesheet will then be applied when people print your webpage. Very handy if you have a heavy colorful design on your screen and if you want to make sure when people print it it looks perfect on paper too. Other media types are also possible, more info can be found here.
Here is the final result with external stylesheet.
Now that our series are finished I'm really curious what you have done with the knowledge learned here. Don't hesitate to share what you've created in the comments. Hope you've enjoyed it.
87served
1
Thank you very much for this article. This is a must read for webdesigners.
2
I thought the attribute target=blank was not considered standard compliant anymore, as visitors should be free to leave the site or open a new browser window if they want to.
I usually use no attribute at all, visitors are totally free. Sometimes I just use a popup window when visitors click on an offsite link, with a message saying that they’ll be able to come back using the browser’s arrow buttons.
Or sometimes I use
<a href=“foo.html” onclick=“window.open(this.href);return false;“>But it doesn’t work when js is disabled
But still, great tutorial, very useful, thank you!
3
Thanks Veerle, these are really great tutorials and I have exported all of them as PDFs which I will keep and use in the future.
4
@Bogdan, great you’ve found it and like it.
@Fabien, I’ve adjusted it, thanks for the useful info. Personally I prefer to have a new window open when I go to an external site, but maybe that is just me ;-) I often accidentally close a window and then the site where I came from is also lost. Now I have the habit to use command+click on a link this way it opens in a new tab in Safari ;-) Tabs are very handy.
@Marcel, I’m planning to create a nice PDF of the tutorial.
5
Thanks for the great CSS insights Veerle! Do you know of any decent tutorials on the actual blog template development (pMachine and Expression Engine)? Or feel like maybe making this YOUR next tutorial series? ;-)
6
Hey Veerle!
Superb job on the tutorials. I enjoyed them immensly and i’ve learned a lot!
Thank you very much
7
hi veerle,
great to know about the pdf, i would very much appreciate to have something to work with when not online..
so far i tried to combine your nice advices with some php script to change only the content-copy by using a php-file at this position but i didn’t really manage it (i am a php-newbie i confess)..
if i ever get it i will let you know ;o)
thanks so far
& greetings from hamburg
anne
8
@Simon, I had been looking too when I started this blog. I figured most out myself and found it very doable. Same for Expression Engine. Just (almost) finished my first site. It wasn’t easy at first but once I got the hang of it, it went smooth. Got good support on the forum too.There is a tutorial for Expression Engine about the designing part (the part I know, CSS etc.) but not yet about the actual implementation. These parts are still in development. For pMachine Pro I’ve found this URL. Hope this helps.
@Lex, thanks! Glad you learned.
@Anne, I’ll try not to wait too long to creat this PDF ;-) About the PHP implementation, I’m not an expert myself on that matter, but just make sure your styles are still there “around” the PHP scripting. Good luck with it :-)
9
It is a beautiful tutorial indeed, and has helped me find my way as a beginner. Picked up plenty of tips and many insights. Thanks a million for putting in the effort to make it very simple and understandable. I had a default blogger template when I started out, but as I progressed with your tutorial, I put in a lot of simple touches here and there to make it feel like home. It almost does now. I know, its nothing big or dazzling, but to me, it feels great. I journeyed from an absolute nothing-at-all to something. Thanks again and have a great day! :)
Thank you, dear Veerle, for the brilliant tips and tricks, It has indeed saved me, from burning a million midnight wicks!
10
@Fabien
I thought the attribute target=blank was not considered standard compliant anymore, ............ Or sometimes I use <a href=“foo.html” onclick=“window.open(this.href);return false;“>
Well, yes, the target attribute is not part of the standard xHTML DTD which is kind of silly as designers can still use JavaScript’s window.open to open links in new window, like you do, so the purpose of letting users choose is kind of defeated. But like you also noted, using window.open() is good only if JS is enabled. If some has it disabled, its no good.
But there’s a workaround which will let you use the target attribute in your links and the page will still validate as xHTML. All you have to do is specify target as an element of a entity in the DTD declaration. Then you can use the target attribute while the page still validates as xHTML. Its simple & effective. :)
11
Or you could just use a transistional DTD, or even one of the HTML4.0 DTD’s, which do allow the target attribute to be used. Then your site’s standards compliant (on this subject), just compliant to a different standard..
12
Well, if you can validate xHTML Strict with the workaround I suggested, then why bother with the transitional or HTML DTDs?
Frankly I don’t bother with xHTML, maybe my pages do validate xHTML Transitional but I just include the HTML4 DTD & be done with it. I don’t fuss about being xHTML validation, though I’m in a habit of closing all of my tags right from beginning when I started learning HTML.
13
Hi Veerle,
Thanks for the great article! - I followed it and came up with something similar - I also used php includes for the menu and other things. My css skills are gradually getting better - this kind of thing really helps! also read your post about css and women - interesting. I did a redesign of my own site and used the tutorial as a guide - here’s the result
Thanks again - ro
14
Hey Ro Dolman, isn’t that a copy of the design that Veerle built in her tutorial?
15
Hi Ro, glad you learned a lot and liked my tutorial. You have made something nice of it, congratz!
@Amit, no I don’t agree here, it’s far from a copy. I see that I have inspired her and that’s fine by me ;-) She used the structure of my tutorial but used her own colors, her header, buttons etc. which is fine by me.
16
Hi Amit - By working through the tutorial of course I was going to end up with something similar - but I certainly didn’t mean it to be a copy. My images and colours are different, my menu structure is using css only with no background images… I found this tutorial really helpful and as my skills get better I hope my own style will show through more—just trying to learn :)
17
@Veerle:
Well, it does look a lot like your design, that’s what I noticed, along with the menu bar etc. :D Ofcourse she has a different header & footer. ;)
@Ro:
I didn’t exactly mean to say that you copied her design but what I meant it is that if you followed her tutorial, then you should have been able to make your own design, not just changing colours & other elements but create a differet stucture itself.
I haven’t read the tutorial yet but from what bits & pieces I’ve read, its quite good. I think I’ll read up the tutorial fully & then try to come up with a design of my own, which I’ll gladly show here. :D
18
Amit I see what you mean - creating a totally new structure is a good idea but just isn’t that easy - at least not yet for me :) - this is an ongoing process so I will continue to work on this - my next thing is to offer an alternative style sheet with a “switcher”—maybe that should include a different structure? Yes the tutorial is worth reading - it’s great - I am looking forward to seeing your version.
Ro
19
I am looking forward to seeing your version.
Well, you won’t be seeing my version as it’ll not be like what Veerle designed here. ;) It’ll be a different structured layout which I think will be good enough. :D
20
Hey, I just tried out your tutorial and I really learned a lot.
Buut…there’s one thing I don’t understand. In the last step (VIII) we create the favlinks id and fill it with stuff. But I can’t seem to find where to change the background color for everything below the navcontainer and above the footer in the left id. In the finished tutorial example, it turns out light green. If I take the hex number that corresponds with that green, and search for it in the CSS, it only pops out in the footer, and there as a text color.
Where the heck do I change this and where is it stated? :)
21
Nevermind, I just remembered that’s the background.gif showing. I’m so stupid :/
22
Hi Veerle,
Your tutorials are very impressive and helpful, and your generosity is to be admired, thank you so much… I would like to know what sytem you use to create your blog? Is it the abovementioed pmachine systems? Do you know of any good blogs written to help designers to generally understand blogs? I’d like to start one but overwhelmed.
kind regards
Darryl
23
If you want a free blog system that’s great as well, then you should try WordPress. It allows you to change the look of your blog with just a stylesheet. And its ease of use is just splendid. :)
24
Hi Amit
thank you, I will view Wordpress, your site looks good. Since you use Wordpress, if I may, perhaps I can send you any queries about it?
kind regards
Darryl
25
Well, I won’t say that I’m an expert at hacking WordPress or anything (though I’ve hacked it quite a bit & made a few plugins for it), you are welcome to ask anything about it & I’ll answer if I can. Also, you might want to register at the .WordPress Support Forums. Its quite active community where you can get answers to usually all your problems. And then WordPress has an IRC Channel too where you can get support(irc.freenode.com/#wordpress) :)
26
Thanks Amit, I very much appreciate your help, and the suggestion about the Wordpress community…hopefully one day soon I’ll be able to show you what I’ve done. I love CSS and am hoping there is a lot I can do with that to alter Wordpress presentation. I’m also very pleased to hear about the ease of use of wordpress.
27
You can also try WordPress 1.2 (latest stable version) at http://www.opensourcecms.com/index.php?option=content&task=view&id=144 before you go for it. You can try the user as well admin areas & make a few posts & comments as well. ;)
28
Hi Veerle,
I just wanted to thank you for your tutorial. It was a terrific help to me when I decided to build my first blog.
Daryl - if you’re still interested, I’ve just posted a “what I learned while doing this” kind of tutorial. It may be a good starting place.
29
Hi Veerle,
As a newbie to both CSS and HTML I have found you tutorial very informative and easy to read. Thank you for putting this together to help those like myself, who are interested in what CSS is all about but don’t know where to start.
I am most interested in navigation techniques and yet I’ve not found a CSS method to create and maintain navigation links in one place (like a stylesheet?). I must be missing something because it seems each page has to have a copy of the unordered list, which makes maintenance more time consuming. Do I need to get cozy with Javascript or .php to do this? Can it still be accessable?
30
@DaveThek, I know you can work with a Library element (a .lib file) in DreamWeaver which makes it possible to store a part of your layout that recurs on each page, like a header, footer or navigation. You place the code of a header, footer or navigation in a .lib file and this file is then linked to all your pages, once you update your lib file, the files that contain the .lib file are updated.
Or you can work with templates in DreamWeaver. Pages that have the same header, footer and navigation can be linked to 1 and the same template. Once you update that template, the pages that are linked to it are updated automatically. Expression Engine from pMachine works with a similar template system which I found very handy. I’m using Expression Engine for a project and it saved me heaps of work this way. You can work with nested templates which makes it very timesaving. Hope one of these solutions could help you out. I don’t know any “general” solution that does not depend on an application I’m afraid.
31
Great Tutorial Veerle! I a CSS newbie and this is the best tuorial I have found to date. Very simple and eays to follow. I picked up CSS by the 5 part. My design mind has grown 10 fold!
32
Hi Veerle,
Thanks for the great article !
It’s easy to read and there is a lot to learn.
I will try to use the tips and tricks in a future work.
Thanks again.
33
Thank you so much for such a fantastic article Veerle. I’ve been trying to make the move over to CSS and your tutorial has given me renewed confidence to tackle my project. There aren’t many tutorials that go to the trouble of explaining the rationale behind all the code.
I have one question: I like the idea of being able to place the main content of the page at the top of the code (with SEO in mind). When I tried this with your model it shifts the nav and fav links over to the right. I’m assuming this is because of the floats? Can anyone suggest a way around this?
Thanks again for a fantastic article Veerle.
34
Amit, thanks for your advice about Wordpress, I have chosen to use it for one of my projects. Ihave no PHP skills but am lucky enough to be amongst some techs who pointed out where to edit the base files.
And to Peter, Textpattern has been fun to work with, lovely interface especially. I am continuing to work with this on another project, and will probbaly end up using both I think.
hicksdesign.com has a great review of his experience of textpattern as well.
Vicki, I will post some links here shortly re the flow of the markup.
Veerle, I’m fairly new to blogging and don’t know the etiquette yet, about when to pull out of a blog and make contact direct with other bloggers. I figure that we are communicating via your great blog, and other readers will benefit from everyone’s communications so I guess I’ll keep putting info into here. Let me know your expectations, and anyone else, how do you find the point?
35
@Vicky, can you give me a URL to look at? It’s easier to help you out this way, thanks.
@Darryl, no problem you may always post ideas here which can help others, that’s the benefit of an interactive blog like mine ;-)
36
Hi Veerle
Thanks for offering to look at my page!
I’ve followed your model as a template for my project and although I’m still playing around with the footer to make it work properly in Netscape, Mozilla and Opera, the page is pretty much complete at: http://www.licensedsolutions.co.uk/home.htm Hopefully you won’t be horrified at how I’ve played around with your code.
37
Hi Vicki
here’s some articles that discuss source order and css positioning/layout of major page areas. My descriptions maye not be easily understood, but the articles will:
A good article about related 3-column stuff
Markup order: left, right, main.
http://webhost.bridgew.edu/etribou/layouts/skidoo/index.html
Markup Order: left right, main, base
http://www.positioniseverything.net/thr.col.stretch.html
Good article about the issue of source orders on 3 column layouts:
http://www.tanfa.co.uk/css/layouts/css-multi-column-layout-ap1.asp
If you CAN guarantee the longest column, you can do this:
Source Order: left, right, main, footer
Good article on this problem also
http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml
Less common, but with this method cannot have a footer that stays at the base of the page across the full width:
Markup Order: main, left, right http://bluerobot.com/web/layouts/layout3.html
Markup Order: main, left, right, footer
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_C.mhtml
And another:
Markup Order: left, main, right:However, because they are not floated you cannot have a footer that stays at the base of the page across the full width.
http://glish.com/css/7.asp
Can achieve the effect if you position everything except the footer in a div which is floated left, but everything has to be absolutely positioned, therefore cannot be centered in the browser.
Markup Order: left, main, right, footer http://www.bewb.org/stuff/3colwithborder.html
http://www.webmasterworld.com/forum83/4568-2-10.htm
http://www.webmasterworld.com/forum83/4400-1-10.htm
cheers
38
Wow Darryl, thanks so much. I’ll take a look and try some of these methods out. I really appreciate the trouble you’ve gone to.
Thanks again.
39
Thanks Veerle for a great tutorial. I used to use tables but I am now fully converted to CSS!!
I have used this method for a client’s site ..... www.lazymouse.co.uk/clients/salterton and I will be using it to update my own site as well.
I struggled at first, but now I find I just can’t go back to tables!!
Keep up the great work and thanks again!!
40
Hi Veerle;
I have now used your CSS method to update my own site; it was really quick to build and it looks great. Hopefully I will use this method all the time, tweaking it to change the layout from time to time. My site is at www.lazymouse.co.uk, any comments gratefully received!
Thanks again, looking forward to more tutorials.
Steve
lazymouse
41
@lazymouse, nice work! ;-) It seems like your mouse hasn’t been lazy at all :-D Thanks for sharing this.
42
Hi Veerel
i come from taiwan. I new to study Css.
You tutorial very nice,I plan to transfer it to chinase version , Cna i do it ??
MY Blog = http://jameschih.blogspot.com/
43
@jameschih, no problem that’s fine by me, the only thing I ask is that you quote me with a link to my blog. Thanks.
44
Hi Veerle,
it’s been a pleasure working with your tutorial. I had been learning bits of CSS here and there for a while, but what I really needed was a step-by-step exercise, which you kindly provided.
Congratulations for your work. I’ve used your ideas to renovate just my index page, for now it’s still very much similar to your original design, but it’s hard to find much better! I hope I can find new ideas and personalize it more in the future.
Thanks a lot.
45
Thanks Veerle
My Version: Phase0.info
I made a sample website using your tutorial, as you can see I tried to give it it’s own feel but the basics are still there. Thanks a again for this tutorial.
46
@Phase0, pretty cool, love your colors ;-) Congratz and thanks for sharing.
47
Hi, you’ve made a really helpfull tutorial here… Great work!!!
Hi have a question i use your tutorial and manage to do a three column site… But i have a little problem. The last word or lettres of the text who is in the right layer show itself in the left layer…( only about 5 or 6 letters)
You can see it on PC on mac it’s ok. If you know wath it can be…. please help me…:O)
http://prod.luz.ca/innodia/index.shtml
Thx agains for your blog… and sorry for my bad english
48
I found a solution to my question… may be its not the better but it seem to work.
I put the text in a table and leave an empty cell in the bottom of this one…
But if you found a better solution let me know
Thx again
49
Hi Etienne
I also had a similar problem with a couple of my websites. I found that simply by including a line break <br/> at the end of the text, it solved the problem.
Hopefully this helps and allows you to get rid of your table.
50
Thx a lot Vicky…:O)
51
Hi, all. This tutorial is the best one I’ve come accross! Couple weeks ago my friends asked me to redesign their furniture store website for them. They’re totally clueless about this stuff, so I can take my time to learn CSS to implement it in this little “philantropy” project. I’ve based my design on Veerle’s ideas. I think it looks great, but I don’t know how it will look on the rest of browsers (I’m using IE 6+).
If Veerle’s and her readers could be kind enough to check it out and give me some pointers on the syntax, colors, or anything else they cared about, I’d be very happy! The CSS code is included in the source for you to see. Some div’s don’t apply to this page, though.
http://chicagoappraising.com/brothers/index.htm
Thanks, all.
52
Hi Mike, I’ve just taken a look at your page and it looks nice in Safari. However, the code needs a little bit correction work, there are some errors if you validate your page at W3C. One good advice: as soon as your page is finished do the validation check at W3C it will help you get it perfect. You missed some alt tags, and you used the same id (#logo) twice. There are some errors in how you implemented your javascript (you forgot to add type=“text/javascript”). About the last error: never use caps in your code and don’t forget quote signs. The img tag is outside the body so it is not allowed there either. Also, “noscript” is not allowed in xhtml.
Hope this clarifies things a bit ;-) Nice job!
53
Hi Veerle,
Thanks for checking the site. I’ve fixed some errors, however, the javascript you’re talking about is automatically added by my webhosting company (I don’t see it in my script). Due to this my page won’t validate. I wonder if there is a way around it :)
54
If you are paying your webhost to host your website then they can’t add anything to your website code without your concent. Talk to them & have it removed.
As I see it, its some kind of visitor stats tracking script. See if you have it enabled through your website control-panel. Or just talk to your web-host about customising or removing the script.
55
Thanks, Amit.
I disabled the statistics on my site, and it is now XHTML and CSS validated!
56
<script type=“text/javascript”>
<!—
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == ‘number’) {
windowHeight = window.innerHeight;
}
else {
LOT OF BLAH BLAH BLAH
footerElement.style.position = ‘static’;
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//—>
</script>
Question : What is the significance of having this code in the html file ? The tutorial never mentioned this code. I looked up the source of the Final Result of the tutorial and found this Javascript code. I’d appreciate any help..
57
Hi Neil, I think you’ve overlooked something in part 7 about adding a javascript to make the footer ‘work’ (stick at the bottom) in Safari. Hope this clarifies things to you ;-)
58
Hey, thanks :), Btw, I am redesigning my existing html page done with tables :0 !
www.arrfans.com :)
59
This tutorial has been great.
I changed the style sheet, added my own graphics, and now I have a new version of my website (it’s not up yet, my new business partner is designing a comment system and some other PHP stuff before it launches). Some day I hope to make something as good as this on my own. The tutorial took a while though. Keep up the great work.
60
Since people are still obviously finding this great tutorial, I just want to throw this in: http://www.pmob.co.uk/temp/3colfixedtest_4.htm
It is a way to fix footers at the bottom of the viewport w/o javascript. I cant say I like 100% of this particular design and CSS, but the footer idea is great and should be easily applied to a layout like the one Veerle used (I like the float method better, but tend to avoid JS where possible).
61
@iWantToKeepAnon, interesting technique. Although I have a bit of a problem with the fact that you need to place your header, which is actually the title of your page, at very the end of your structural code. If you look at your webpage with CSS disabled I find it rather confusing since your title appears at the end. It makes the page less accessible for people who access the page with styles disabled. Not sure if I would use this technique.
62
Hi
the last part of your tutorial is out of place. At least when you use IE.
Good material though!
63
Hi Asta, you’re right, Neil’s javascript jumped out of the box and messed up my layout (damn you Neil! :-P!). I’ve fixed it, it should look OK now. Thanks for mentioning this.
64
Hi
Great tutorial, great blog and your a great artist.
You look at what I managed to achieve by following your tutorial here:
http://www.martignole.net
Thanks very much for your work
Nic
65
Fantasic!
As a newbie to html and css this site has been a tremendous help to me. I - perhaps foolishly - volunteered to shift a heap of rather dry & boring msword content to the web.
Your clear and concise tutorials have forced me to redesign the whole thing, damnit! Tabes seemed such a nice solution when I first started :-{
Thanks Veerle.
66
Thanks to this tutorial, I redid my site all valid CSS. look here
67
Nice tutorial Veerle ;)... where do you find time for this?
68
Hi Yves, I just make time (Sunday’s mostly or late some late evening). I’ve started this tutorial some time ago as a learning experience, to share my knowledge with others, then learn some new tips/techniques from my readers and get some visibility on the web in the meantime ... which is a very nice bonus of course ;-) I’m convinced that CSS is the way to go.
69
How do you center all the text and links on the page? I tried just copying and pasting all the code from the tutorial after my own site would not center and this tutorial site didnt center either. The footer is centered but none of the navigation lists or text, they are all left aligned.
70
Hi Veerle;
I use this method for quite a few of my designs now, thank you!
However, I get a problem where the background appears to repeat itself at the bottom of the page - see http://www.lazymouse.co.uk/assinder/index.html as an example.
It’s most noticable on a mac, but is there on a PC as well - especially if the page is very short.
Where am I going wrong?
71
Hi Lazymouse, could be that there is an error in your javascript. I’ve noticed that the second ‘id’ is called ‘menu’ :
var el2 = document.getElementById(‘menu’) ;
It should be called “footer” I think. You have probably overlooked this. Hopefully this helps.
72
Hi Veerle,
Great tutorial! I am having such a problem with positioning my page. Also when I minimize the IE window my page stays in place, and I cant get the text or the buttons to line up in the right spot, here is my test page http://www.emeraldparkhomes.com/about_us_css.htm
73
@projectpete: you need to add a container div id <div id=“container”> in your HTML code right under the body element and close this div right before </body>. Then add this in your CSS:
#container {
margin: 0px auto;
text-align: left;
width: 692px; -> the width of your white content
}
Also, make sure the body element has a centered text-align :
body {
text-align: center;
}
74
THANK YOU!!
I really appreciate the help, this is my third day studying your tutorial and I am finding it amazingly helpful.
thanks alot for the help
75
********* EDIT FOR PREVIOUS POST******
The new link has changed from www.emeraldparkomes.com/index_css.html to
http://www.emeraldparkhomes.com
76
@projectpete, I’m afraid I can’t help you any further. I just can’t hold your hand every step of the way. Normally I create my pages for Firefox and Safari, cause these browsers follow the standards (I.E. doesn’t) and on the next step I fix things in I.E. not the other way around. This is why I can’t help, I already did my part before. I’m sorry but my time limited I’m afraid.
77
actually i did get it working a few days ago so thanks anyways
78
@projectpete: I see that you’ve also pasted my explanation in the css: “-> the width of your white content”. This was just to explain this value, you don’t need to add this in the css code, you should remove this, it might actually cause trouble…
79
yeah i knew that was an explanation but i didnt think it would cause trouble, ill remove it now thanks
80
Thank you for tutorials. My question is how can I use SSI for the Navigation bottons?
81
@kom char: I can’t follow you here :-(
82
Sorry, I was not very clear about the question. OK, for the navigation buttons, can I use Server Side Include to replace the <div id=“navcontainer”>ul…li…</div>? So everytime I make changes to the Link of the button, I do not have to make changes to every other page where that link reside.
83
@kom char: Yes that is possible if have set up something similar like pMachine Pro or Movable Type etc. My blog works categories work in similar way.
84
Hello Veerle,
I have just finished your tutorial. Many thanks for posting such a great resource onto the internet. I have always been confused about Divs and CSS and you have helped clear that up!
10/10!
85
Veerle, thank you so much for your tutorial! I was trying to create a layout similar to that for my website and I was able to by following your tutorial. Thanks so much!
86
Thanks, it was a great tutorail in all it’s parts. And it’s still a lot for learn about CSS, i’m just new at this. º)< BYE !
87
Thanks for this great tutorial Veerle, I recommend it to everyone when I have a chance. I didn´t know how to design a blog using CSS when I started. My site´s template is based on your tutorial and one from Listamatic.