Webcoding for beginners

Most of this site assumes you know a thing or two already. What I want to do here is assume that you're not stupid but don't know how to make a website. I'm kind of making this up as I go along (and it's still a work in progress), but hopefully, it will get you on the right road.

Some basic ideas

  • HTML

    defines content - it says 'this is a main heading', 'this is a paragraph', 'this is a list' and things like that. (List of valid HTML4 tags)
  • CSS

    gives your document some style. It makes text bold, positions images where you want them, gives you borders and backgrounds and all sorts of other stuff like that. (List of CSS2.1 properties)
  • Javascript

    does stuff. It lets you move things around, make things appear and things like that.(W3Schools javascript tutorial)

Of course there are other things involved, but this will do for now.

A very basic template

Here's what you need when you start building a page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>

You can put this in a text editor such as Notepad (NOT MS Word) and save it as 'index.htm'.

Now let's have a look at it...

The first line...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

...is called the DTD and it's very important. If you don't have this at the very top of your page, you'll have problems - your code will be treated differently by each browser.

Enveloping the rest of the page are the 'html' tags:

<html></html>

That's what tags look like. The first is the opening tag and the second is the closing tag. Tags go around content to tell the browser what kind of content we have.

The rest of the page is basically split into two - the head and the body. The content goes in the body.

Inside the head, we have the title tags (the title of your page goes in there, surprisingly enough) and a meta tag that tells the browser what kind of page this is. This one says that it's html and we're using the 'UTF-8' character set.

That's about it for the template. Now for some content...

Building a page...

For my example, I'll use the city I where I live - Sendai, Japan. First, we'll give the page a title. I'm going to do this in two places - in the title tag, which is shown at the top of the browser, when you open the page, and then at the top of the content in 'h1' tags. 'h1' says that this is our main heading.

Now we have this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sendai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>Sendai</h1>
</body>
</html>

Not very pretty or exciting, I know - but bear with me.

Next, I'll add an introduction. The sub-heading goes in 'h2' tags with our information in 'p' (for 'paragraph') tags below that... I'm 'borrowing' information from Wikitravel here - I hope no-one minds (I actually wrote a lot of the information on this page anyway).

So, we have this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sendai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>Sendai</h1>
<h2>Introduction</h2>
<p>Sendai is the largest city (about 1,000,000 people) in the Tohoku region of Japan's Honshu island.</p>
<p>As everyone here will tell you, "it's not too big and not too small, it's very convenient and it's close to both the sea and the mountains." Sendai is a comfortable and pleasant city - it's a nice place to live. It's very green - in fact they call it (Mori no Miyako, "Forest City"). The main avenues around the city are wide and tree-lined. This gives the city an almost European feel.</p></body>
</html>

(Yes, I know it's still not pretty).

Navigation

Now, I figure I know lots of stuff about Sendai, so I want to build more than one page. We need navigation - a menu. What is a menu? Well, it's just an unordered list of links, isn't it? Fortunately, html has tags for unordered lists - 'ul' for the list and 'li' for each list item.

Links use 'a' (anchor) tags like this:

<a href="http://bonrouge.com">bonrouge</a>

The URL in the link can be full (as above) but this is usually used for external links. For the links here, we'll use relative links, which are much shorter - kind of like this:

<a href="eat.htm">Eat</a>

So, our navigation looks like this:

<ul>
<li><a href="eat.htm">Restaurants and Bars</a></li>
<li><a href="see.htm">Things to See</a></li>
<li><a href="events.htm">Special Events</a></li>
<li><a href="out.htm">Out and About</a></li>
</ul>

The page now looks like this and still doesn't look good.

Adding some style with CSS

One way to add CSS which is convenient when you're starting a page is to put it in the head. It's better to have your style in an external file and link to it, but for convenience, we can also put it in the head. To do that, we need style tags (of course). They look like this:

<style type="text/css"></style>

Our style rules go between them.

We can start with the body. I'm going to give it no margins or padding and a background colour - green (because Sendai's a green city).

<style type="text/css">
body {
margin:0;
padding:0;
background-color:green;
}
</style>

Now, we can't see the text so clearly, so I think I'll make it white. I also don't like the default font, so we'll change that too.

body {
margin:0;
padding:0;
background-color:green;
color:white;
font-family:georgia, serif;
}

You'll notice that the links are still blue - there are special rules to control link colours and we'll come to those later.

Now, we'll sort out the main heading... I'd like it to be in the centre in bigger letters. To centre the text, we can use 'text-align:center;'. For the font-size, I'm going to use 'em' as the unit - this is a relative unit. Here it is. Here's the CSS :

h1 {
text-align:center;
font-size:3em;
}

Positioning

So what I want now is two columns in the centre of the page. I like narrow web pages - I find them easier to read. I basically need to put a kind of wrapper around my content and use auto-margins to centre the whole thing. To do this we can use 'div' (for 'division') tags and give the div an id so that we can target that div in the CSS. I'll call that div 'wrap' (well, why not?) and I'll give it a width of 780px. A number higher than this will cause a horizontal scrollbar to appear when the scrren resolution is 800x600.

Doing that gives us this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sendai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:0;
padding:0;
background-color:green;
color:white;
font-family:georgia, serif;
}
h1 {
text-align:center;
font-size:3em;
}
#wrap {
width:780px;
margin:auto;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Sendai</h1>
<h2>Introduction</h2>
<p>Sendai is the largest city (about 1,000,000 people) in the Tohoku region of Japan's Honshu island.</p>
<p>As everyone here will tell you, "it's not too big and not too small, it's very convenient and it's close to both the sea and the mountains." Sendai is a comfortable and pleasant city - it's a nice place to live. It's very green - in fact they call it (Mori no Miyako, "Forest City"). The main avenues around the city are wide and tree-lined. This gives the city an almost European feel.</p>
<ul>
<li><a href="eat.htm">Restaurants and Bars</a></li>
<li><a href="see.htm">Things to See</a></li>
<li><a href="events.htm">Special Events</a></li>
<li><a href="out.htm">Out and About</a></li>
</ul>
</div>
</body>
</html>

Now, here's an important thing - after giving this element (the div) an id, you can't give another element on the same page the same id. Of course, we only have one #wrap div and we won't need more, so that seems quite obvious, but many people make the mistake of defining style rules for an id and then using the same id for more than one element. If you want to use the same style rules for more than one element, you use 'class' (more info.).

After centering the content, I need to make the columns. The 'h1' is fine where it is, but now I need to put div tags around the introduction, give it an id and then float it to the left (where I want it). We get this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sendai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:0;
padding:0;
background-color:green;
color:white;
font-family:georgia, serif;
}
h1 {
text-align:center;
font-size:3em;
}
#wrap {
width:780px;
margin:auto;
}
#content {
width:500px;
float:left;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Sendai</h1>
<div id="content">
<h2>Introduction</h2>
<p>Sendai is the largest city (about 1,000,000 people) in the Tohoku region of Japan's Honshu island.</p>
<p>As everyone here will tell you, "it's not too big and not too small, it's very convenient and it's close to both the sea and the mountains." Sendai is a comfortable and pleasant city - it's a nice place to live. It's very green - in fact they call it (Mori no Miyako, "Forest City"). The main avenues around the city are wide and tree-lined. This gives the city an almost European feel.</p>
</div>
<ul>
<li><a href="eat.htm">Restaurants and Bars</a></li>
<li><a href="see.htm">Things to See</a></li>
<li><a href="events.htm">Special Events</a></li>
<li><a href="out.htm">Out and About</a></li>
</ul>
</div>
</body>
</html>

Styling the menu

First of all, I don't want bullet points on my menu. We can remove them and the default padding and margins like this:

ul, li {
list-style:none;
margin:0;
padding:0;
}

To put a blue border around the menu, I can use 'border: 2px solid blue;' and... well, here's some CSS to style the menu a little :

ul, li {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
ul {
float:right;
width:200px;
border:2px solid blue;
}
a:link, a:visited {
display:block;
color:green;
background-color:yellow;
height:2em;
line-height:2em;
text-decoration:none;
font-weight:bold;
}
a:hover {
color:yellow;
background-color:green;
}
a:active {
color:red;
background-color:yellow;
}

The a:link, a:visited, a:hover and a:active parts are for the links and they should go in that order. The ':active' part is for the half-second when you're actually clicking the link.

The 'display:block' part turns the 'a' from an inline element to a block-level element, which basically means that it takes up 100% of the width of the page and you can change the width and height if you want. Some tags are block-level by default - these include 'div', 'p', 'ul' and 'h1'.

'text-decoration:none;' removes the underlines on the links. The rest is pretty self-explanatory.

My page is kind of sparse - some text in the middle of a sea of green, so I'm going to add a couple of borders and a different background colours... First, I'll change the #wrap div's properties. For colours, we can use hexadecimal numbers - eg. '#fff' for white, but you can also use words. Here, I'm going to stick with the words. For the border width, I don't actually want a border at the top or bottom - only the left and right. To specify the widths for each side, we can use a list of numbers. We can use four numbers - 'top right bottom left', three numbers - 'top left/right bottom', two numbers 'top/bottom left/right' or one number for all...

#wrap {
width:780px;
margin:auto;
border:solid gray;
border-width:0 2px; background-color:lightgreen;
}

In IE, there's now a box just around the content and in Firefox it's even worse - it's only around the top heading. I actually want that box to reach the bottom of the page. Well, this is partly due to the fact that IE and Firefox treat floated elements differently (FF does it correctly). Floating an element takes it out of the natural flow of the document. My #content div and my menu are both floated, so there's no actual content left in the flow and the border ends just below the main heading. This isn't so important right now, as I just need to set the height to 100%.

100% height

To do this, we need to know what it's 100% of. So, first we set the 'html' to 100% (of the viewport, I guess). Then we make the 'body' 100% of that. Now, we usually don't actually want the content to be 100% height because our content is usually more than 100% - we have vertical scrollbars to show the rest. What we actually want is a minimum height of 100%. CSS lets us do that - 'min-height:100%;' - put unfortunately, IE doesn't recognise 'min-height'. Strangely though, IE treats the 'height' property as good browsers treat 'min-height' so we can use that to our advantage. There are a number of ways to target IE specifically with CSS - one is to precede the property name with an underscore (although that won't actually validate with the W3C validator). So here's what we do :

html, body {
height:100%;
}
#wrap {
min-height:100%;
_height:100%;
}

Now, if you look in Firefox, you'll see a big gap at the top of the page. This is caused by the default top margin on the h1 tag. Default margins and padding can be a real pain in the arse at times, so one thing we can do is set all margins and padding to zero and put our own in when we want them. To apply style to every element, we can use the star '*' selector - like this:

* {
margin:0;
padding:0;
}

As that's done, I guess I can remove the zero margin and padding rules from the body and the list.

Now, everything's too close together and I need to add some padding and margins here and there. To put padding on the #wrap div and keep the same width, we have to make the width value smaller, so if we want 20px of padding on the left and right, we have to take 40px off the width of the div.

After adding more borders and background colours, I realise that what I really need is some lessons in design, but I don't have time for that, so I go and get some pictures to add a little life to the page.

I got one picture from Tanabata - a festival here - and put that in the background of the 'h1' tag like this:

h1 {
background-image:url(tanabata.jpg);
}

I got another picture of Sendai at night and put it in an empty div below the rest of the content. Here's the html :

<div id="night"></div>

...and here's the CSS:

#night {
height:165px;
background-image:url(sendainight.jpg);
clear:both;
border:2px solid blue;
}

I also gave the content a bottom margin to put some space between the text and this image. The 'clear:both;' part is there to put the div below any floated elements (more info). So here's what we have now. Now it looks kind of like a web page - a poorly designed one, but a fairly-well-coded one, I think.

Hope that helps someone.

Comments

#1
2005-11-06 Dunc says :

So what you've done here is present a tutorial on how to make a simple web page usig html/css. The page progression is a good idea. However, your lingo is a bit confusing at times for beginners I would think.

For example, when you mention unordered lists, you don't really explain what they are generally used for, or mention the advantages of ordered vs. unordered. If you are dealing with beginners, you might want to start with some explanations of more than just html, css and javascript.

Questions like, am I gonna learn javascript here? might pop into some minds.

Some people are visual learners and the organisation of this page is not clear at the beginning and they might get lost.

Present a menu with links at the top. It's too long a page...

You might want to make other tutorials (i.e. links to what you've already done on this site).

Overall: Good idea, good content, just needs some attention to presentation.

Dunc

#2
2005-11-21 Robert Wellock says :

It Might confuse them about 100% height as the canvas scrolls to Infiniti.

};-) http://www.xhtmlcoder.com/beck/

#3
2005-11-21 Grump says :

Your fixed background image, although interesting, makes the text more difficult to read. I've been visiting your pages for a while now and appreciate your expertise, dedication and willingness to help, but the background has always been a distraction.

R'gards, Grump

#4
2005-11-22 BonRouge says :

Thanks for the feedback.

Robert,
Erm.. not sure what you mean, to be honest...

Grump,
You're the second person today to moan about the background. I understand your point and I've toned it down a little. What do you think? Is it OK now?

#5
2005-11-25 Simon Faulkner says :

It's starting to make sense!

I am still trying to figure out when to use div/span/li/whatever!

Enjoyed the tutorial - off to read the rest now :-)

#6
2005-11-26 BonRouge says :

I am still trying to figure out when to use div/span/li/whatever!
Just think about your content. What exactly do you have there? As I mentioned near the beginning, if you have a paragraph, use 'p' tags, if you have a list, use either an ordered list, 'ol', or an unordered list, 'ul' and if you're just trying to section part of your page/code for design reasons, use the semantically-neutral 'div' or 'span' tags. The difference there is that 'div' is block-level - it takes up 100% of the width by default, gives you an apparent 'line-break', and can be given dimensions and margins, while 'span' is inline.

#7
2006-01-07 Mustaf says :

BonRouge,

If I can vow to say, your tutorial is simply the best among the one's I gooogled for the past months. I have an interest on website development and use the knowledge to help out grassroots charities in Africa to expose there work on the web. I am gathering tips here and there until I have an indept idea, then I can get an online tutor to familiarize me with other concepts.

Your definations are quite excellent to me as a beginner and the fact that you show us links as to each steps of the development is something magnificent. I am deeply glad to come accross your site and I will count on you for advice. My email address is mustiky76@hotmail.com

Thanks you so much for the effort and time to provide this open opportunity for free viewing. Continue to help us know more in future.

Have a nice day and take care so much.

Yours

Mustaf

#8
2006-03-11 pulze says :

boringgggggg !!!!!!!!!!!!!!1

#9
2006-03-11 BonRouge says :

boringgggggg !!!!!!!!!!!!!!1
Erm... what exactly did you expect? This isn't rock'n'roll - it's computer code. It's not usually that exciting... shrug

#10
2006-03-23 jz says :

good stuff man, great tutorial you got on this site. thanks for the info.

#11
2006-07-31 Rob says :

Thank you very much. I found this very helpful (more so than a "certain book for dummies" on this subject). I am a complete beginner and plan on reading through the rest of your guides and advice. Thank you.

#12
2006-09-20 PaQ says :

I don't understand why did you use empty div instead of simply img element at the end of tutorial? Img is for images, and div is for putting elements in blocks (at least as long xhtml2 is not here).

#13
2006-09-21 BonRouge says :

PaQ,
Although what you said is true, I figured that the image there was not really content but merely decoration. So, I chose to put it in the background.

#14
2006-11-13 jimmy says :

is there a site on how to make comment boxes? i want to learn how to make web pages so i can make my own blog. im just starting out on learning html, css, and all the other stuff i need to learn. ive seen many different types of comment boxes, some nicer than others. oh yeah and about using photos. how do we know if we can "borrow" photos from other pages for our site? like pictures of celebs.
thanks,
jimmy

#15
2006-11-16 BonRouge says :

jimmy,
What do you mean by 'comment boxes'?
Have you thought about using some kind of blogging software, like WordPress?
As for using images from other sites, the general rule is - don't.

#16
2006-11-22 jimmy says :

like this comment box or myspace comment boxes

#17
2006-11-22 BonRouge says :

This tutorial should help: http://www.sitepoint.com/article/php-mysql-tutorial

#18
2006-12-18 Alex says :

Quick question... how did you get these comment boxes to display a white background when you click and hold the mouse down on them?

I've been coding web pages for a few years now and I still found sections of this page useful! The attention to detail is great, and the fact you have example pages built of what the page should look like is very good practise when creating tutorials. Very nice job!

#19
2006-12-18 BonRouge says :

Alex,
Glad you found the page useful.
Quick answer to your question - this is in the CSS:p:active, .comments:active, #toptips li:active {
background-color:white;
}

#20
2006-12-25 hanna says :

What an elegant design. I thought the contents are positioned through millions of nested tables. Thank you for showing it to me.

#21
2007-01-01 Amy says :

You have obviously put a lot of work into this site and are helping a lot of people. Good work!

#22
2007-01-04 Alex says :

Me again! Thanks for the reply, simple idea but I never thought of it lol.

Another question following on from Jimmy's above... how did you make the comment section of this page? I take it you are using PHP, and reading the file 'submitted.php'? If so, what is in that file that gives us the ability to post a comment that is displayed on this page?

Cheers dude :-)

#23
2007-01-04 BonRouge says :

Alex,
Basically, there are three fields in the form - name, comment and page. On submit, a javascript function is called to check to see if either of the first two fields are empty (the page field is hidden and filled automatically). If one of those is empty, there's an alert and the comment is not submitted. If javascript is disabled or the fields are not empty, the data will be sent to 'submitted.php', where those fields are checked again. If either of them are empty, you should be sent to another page that tells you so. If those fields are not empty, the name, comment, page and date are inserted into a MySql database table and an email is sent to me to let me know that there's a new comment.
From the 'submitted.php' page, you are sent to another page which says 'thank you', together with a link to the message on the page. I guess AJAX could be used so that you wouldn't have to leave the page - you could just see the new message on the page - but I wrote this two years ago before I knew anything about AJAX.
Anyway, the next thing is to put the comments on the page. That's simple enough. The comments and the comment form are in the same included php file. Above the comment form in the file is a call to the database that collects all the comments for that particular page and prints them out.
That's it.
If you want more specific details - like actual code - you'll have to wait until I get some more free time.
I hope that helps.

#24
2007-02-08 Mike10613 says :

The site came up crap in IE so I had a look in Firefox. Being useless at HTML and wanting to learn that and CSS . I'll come back to this site. I would change the colour of the background. Whie backgrounds give me eye strain - although I do stare a a screen for over 12 hours a day! The hyperlinks on the right are too small. Again some people have eyesight problems. I can just about read them. But the test tutorial I've read yet. I'm in England - terrible lag to Japan! LOL

#25
2007-02-08 BonRouge says :

Mike,
I'm not really sure if that was a positive comment or not. I'm guessing you've learnt something, so that's good. Sorry you don't like the white. I know what you mean about staring at screens and getting eye strain, but I like how the site looks. As for links, sorry if they're too small for you. Maybe I'll change the navigation here some time soon, but not right now.
Here's the problem - I'm not rally sure how to categorise the pages, so it's difficult to reduce the menu to a suckerfish menu. For now, I'm just linking to most of the useful pages here on the left and linking to more pages inline.

#26
2007-02-09 Hem says :

can u please remove the background image . it distract me to read.
i m gaining a lot of information from your site,thanx a lot ..keep it up!

#27
2007-02-09 BonRouge says :

Hem,
Just for you - and on this page only - if you click the 'BonRouge' label at the top of the page, the background-image will go.

#28
2007-03-29 Riyad says :

Bonrouge:
Great site dude! I am using it now as I have decided to learn CSS the hard way, and not just copy and paste as I have been doing for a long time now.
I am trying to figure out how to lay out images along with text. I am sure I still have a lot to learn, since my beckground knowledge of css is very limited.
I would love to see a tutorial about text wrapping around multiple images.
Here is my problem site:
http://ranabtawi.com/indexTest.html
You have to scroll below the map..
Thanks!
Valencia

#29
2007-03-29 BonRouge says :

Riyad,
I've just had a look at your page... What seems to be the problem exactly?
Quinta Anabtawi looks a little bit like Valencia... smile

#30
2007-03-29 Riyad says :

Bonrouge..
I sort of fixed it now, by placing image/text in a container each, as I had a problem with the text sticking side by side with each of the 3 images of the wineries. Now I need to align those containers left. Valencia.

#31
2007-05-01 mightyjoeblog says :

hi, i thought the tutorial was a1 perfect and shall be making many visits here. your quick lesson above has been one of the best ive seen, for us beginers its a god send.. thanx and keep up the good work, apreciated .wine mightyjoeblog

#32
2007-05-01 BonRouge says :

Erm... wow!
Thanks, Mr mightyjoeblog. Nice comments. I feel bad now because I wrote this in an afternoon and never went back and edited it. I also said I'd come back and do more pages like this, but I never did. I just drank my wine instead. smile

#33
2007-06-01 Jack says :

I love your site and how you have the image background with the text floating over it. Your's was one of the first sites I saw done this way, I am starting to learn to write code and have been working on my own site where I want to help others learn code and even provide some free templates for those that can't afford them and other code snippets that can be used to build pages. I wonder if you would mind if I linked yu page to some comments about some of the ideas you present here.
I would also like to use some of your source code in places on my site if you wouldn't mind.
Let me know if this would be okay.
jack_allen14@yahoo.com
Also, my webpage is parked at http://members.cox.net/yourchoicewebdesign/
right now. Will be moving it to my own dedicated isp server at home as soon as I get all the coding finished to make it accessible from the internet but secure from attack at the same time.
Again thanks BonRouge for a wonderful page.

#34
2007-06-04 Alex says :

Hey Steve,

Just read the above comment and feel bad because I was going to ask the same thing, ish! I'm creating a site based on helping those new to web design, specifically CSS, in the building and implementing stages. I was wondering if I could use this page as a reference as well as being a guide to my own guide. I've had a read through and drafted my own... it is written completely by me, but I did use some of the ideas from here. If you'd rather I didn't use it I'll start again.

Cheers matey

#35
2007-06-04 BonRouge says :

Alex,
Yeah, I actually sent a message to Jack to say that I had no problem with him using anything from here on a site. I would appreciate a link back to this site though.
Thanks for asking.

#36
2007-06-09 DWuser says :

Good tutorial BR, As a designer I have used it to help me understand DreamWeaver a little better. Something at which 1000 page books have not done! I don't know how complete beginners will find this, but it has help me immensely.

And now I'd even like to visit Sendai ;)

#37
2007-06-18 Alex says :

I am brand new to coding and have tried to code a whole website for a guild for a new game coming out with only a HTML tutorial. Basically all the tables mess up at different resolutions, so I am about to recode it with the use of CSS. Thanks for this wonderful tutorial.

#38
2008-02-06 Pieter says :

Long time table user, just now switching to Div's. This tutorial was a great help I must say...
However, is it imaginable that I still use tables at a certain point? or should I try to switch EVERYTHING towards div's?
Example: within a 'standard' form with a bunch of fields and stuff...

Any comment welcome!

#39
2008-02-12 Evil Elvis says :

Just found your site while researching CSS and tables. Your site is very helpful to me. If I ever consider myself good enough to be called anything other than a hack, I'll give you some constructive feed back.

I will give one bit of advise. If you follow others recommendations and upgrade your teaching, be very careful not to turn a novice page into something higher.

Evil Elvis gives you a 3 thumbs up and I haven't even run your site through any W3C validation. Probably won't. Keep up the good work.

#40
2008-05-04 David A. says :

Great job, but that background image sure makes me thirsty! I especially love all the great techniques in the rest of this site. What a find!
(Note to Pieter: abandon not tables-- but now just use them for ... tables! That would include highly tabular forms. But always use css to control the table appearance.)

#41
2008-08-07 Scott says :

Great site. I keep getting messed up with nested divs. They look different in firefox and ie. Is there a simple solution? firefox shows the nested div outside of the parent dive container. If you could answer this I would appreciate it.

#42
2008-08-08 BonRouge says :

Scott,
I need a little more information. Do you have a link to your problem, or can you post some code here?

#43
2008-08-09 Scott says :

Hi Ron,
You can see the beginning of my site at www.lakegeorgetips.com
My peoblem is that the search div spills out of the wrapper div in firefox and it does not stretch all of the way across in ie. I have had this problem in the past and it has kept me from switching to css from tables. If you can help me with this then you are the man! Thanks.
Below is the css code:


/* CSS for Lake George Tips */

h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
margin: 0px;
padding: 0px;
}

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;

}

html, body {
height:100%;
}

* {
margin:0;
padding:0;
}

li {
font-size: small;
}

h2 {
color: blue;
font-size: medium;
font-weight: normal;
}

p {
font-size: small;
color: navy;
}

#wrap {
min-height:100%;
_height:100%;
margin: auto;
width:766px;
background-color:#FFFFFF;
border-right-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00466A;
border-right-color: #00466A;
border-bottom-color: #00466A;
border-left-color: #00466A;
padding-top: 2px;
padding-right: 7px;
padding-bottom: 2px;
padding-left: 7px;
border-top-width: 3px;
border-top-style: solid;
border-bottom-width: 3px;
}
#head {
margin: 4px auto 0px;
width:780px;
background-color:#FFFFFF;
padding: 0px;
border: 3px solid #008D6A;
}

#footer{
margin: auto;
width:766px;
background-color:#FFFFFF;
border-right-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00466A;
border-right-color: #00466A;
border-bottom-color: #00466A;
border-left-color: #00466A;
padding-top: 2px;
padding-right: 7px;
padding-bottom: 2px;
padding-left: 7px;
border-top-style: none;
border-bottom-width: 3px;
border-bottom-style: solid;
border-top-width: 3px;
}

#links{
width:150px;
background-color:#00FFFF;
padding-left: 20px;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#menu {
margin: 0px auto;
width:780px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px none #0033CC;
padding: 5px 0px 0px;
color: #FFFFFF;
}
.buttons {
background-color: #00466A;
float: left;
height: 15px;
width: 117px;
margin-left: 5px;
text-align: center;
padding: 3px;
}
.search {
background-color: #428CB5;
width: 770px;
margin: 0px;
padding-left: 5px;
float: left;
}

#44
2008-08-09 BonRouge says :

Scott,
I just looked at your page and it looks like all you have to do for the search box is reduce the width by 10px. It looked the same to me in IE7. Are you looking at IE6? You might find some good tips about problems with IE6 here: http://bonrouge.com/~faq#ieiscrap
I hope that helps.

#45
2008-08-09 Scott says :

Thanks Ron that did the trick. I know everyone claims that css is the best. I am still trying to figure out how to do it without using hacks. By the way I have learned more from your website then I have reading some of the more technical books. I like your format. It is so much easier to understand. Keep up the great work.

#46
2008-10-12 ulgolog says :

Thanks for an excellent tutorial. A couple of beginner questions:
(1)when you say To do this we can use 'div' (for 'division') tags and give the div an id so that we can target that div in the CSS., did you mean target that div in the HTML
(2) never quite understood this one: Now, here's an important thing - after giving this element (the div) an id, you can't give another element on the same page the same id. Can you give an example of what NOT to do? cause it seem I can use the same div id (I guess not a big one like the wrapper but) more than onece in the same HTML, no?

#47
2008-10-12 BonRouge says :

ulgolog,
1. I meant that if the div has an id, we can write CSS rules in/on the stylesheet to style that div.
2. In theory, you can do anything you like in the HTML - you can make your own tags, not close your tags, or anything. However, there are rules that you should follow if you want your site to work well. The rules can be found at the W3C. There W3C also has a validation service which checks your page to see if you are following the rules. One of those rules is to use an 'id' only once per page.

I hope that helps.

#48
2008-11-13 Stacy says :

I have a question maybe you can answer. I'm just learning sites and I had a friend set me up a fansite and i'm trying to learn. My friend's life has become very busy and sadly she can't help me anymore and for some reason my images aren't working. I know where my images are stored, but i'm confused.

ON this part:

#night {
height:165px;
background-image:url(sendainight.jpg);
clear:both;
border:2px solid blue;
}

The image isn't linked anywhere. How did you do this? smile

If you're not sure, maybe you know some tutorials I can read through.

#49
2008-11-14 BonRouge says :

Stacy,
I'm not sure what you mean when you say that the image is not linked. It's right there in the code you posted. That image is in the same directory as the page, so it is linked like that. If I had an images directory in that directory, with the image in that, the code would look like this:
#night {
background-image:url(images/sendainight.jpg);
}

If you post a link to your page here, and give a little more information, I might be able to help.

#50
2009-03-03 Jeff says :

Hey BonRouge,
How's the beer in Sendai?
Thank you for this site!
I'm still having problems keeping my footer at the bottom of the page. If I add height: 100%; and min-height:100%; to all my div's -does that mess things up?

God bless you - you must nice, giving person.
Thanks, Jeff

#51
2009-03-22 Delliana says :

Hi I was wondering if you could possibly tell me how to make the background image stretch to fill the whole page? I have a premade Joomla Shape5 template with different backgrounds for different pages.
My membership at shape5 was only 3mo. and now they give no support forumfrown

I greatly appreciate any help, Thank You!

http://thegoodshipliana.com

#52
2009-11-21 Mike10613 says :

I have come back to this page using Google Chrome - no problem now!

#53
2009-11-30 C. Imanon says :

Banging site! Yes I'm a bonafide web-monkey, and I really appreciate the progressive approach. I noticed that this was done 4yrs ago, is a lot of this still relevant in 2009 almost 2010? Actually, i should say 'applicable'--keep it coming, thanks.

#54
2011-09-09 Edward says :

I've been coding web pages for a few years now and I still found sections of this page useful! The attention to detail is great, and the fact you have example pages built of what the page should look like is very good practise when creating tutorials.

#55
2012-11-01 Edward says :

I've been coding web pages for a few years now and I still found sections of this page useful! The attention to detail is great, and the fact you have example pages built of what the page should look like is very good practise when creating tutorials.

Comment form

Please type the word 'sexy' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url