Noob Here, What Next?

Ok I have this project I am doing where I want to build a site 100% from "Notepad" that will validate perfectly with W3 and I wish to build it with XHTML/CSS.

This is how far I got
Poole Town

I would now like to create a navigation bar for along the top but can't seem to think where to start, I am not using HTML tables sohow can I use CSS to format a page for all my content to go on as such?

Sorry if this seems like am basicaly asking someone to explain how to make a whole website, I just want someone to just give me a place to start.

 

I would start by making a div for the nav bar. Here is an example.

#navbar
{
 width:500px;
 height:30px;
 background-color:#000000;
 color:#ffffff;
 line-height:30px;
}

Code (markup):

This will make a 500x30 div with a background color of black and white text. The line-height will vertically center your text in the box. Hope this helps!

 

With "Div" tags do I need a closing tag?

To put that in my site I have done this

<div id="navbar">

Am I supposed to close that? If so how should I do it?

 

I'd actually use an unordered list for this.

Start the list by typing <ul> and then add an ID with a value of "menu" to it, like this:

<ul id="menu">

Code (markup):

Then, on a new line, close the list (this is a good habit to get into, trust me), by typing </ul>. Your code, at this point, should look like this:

<ul id="menu">
</ul>

Code (markup):

Now, in between those two tags, you place your list items. Each list item goes inside a LI element, which consists of an opening and closing LI tag.

<li></li>

Code (markup):

You can use as many of these as you need. There's no need to put a class on them since you'll be able to reference them from the UL with the ID anyway. Inside the LI, put a link inside, and then put your link text inside that, like so (replace link.html with the link the page, and "Link Text" with the text you wish to use for the menu):

<li><a href="link.html">Link Text</a></li>

Code (markup):

I like to indent my list items inside the source code to make the code easier to read. Let's say you have six menu items; the code would look like this:

<ul id="menu">
    <li><a href="link.html">Link Text</a></li>
    <li><a href="link.html">Link Text</a></li>
    <li><a href="link.html">Link Text</a></li>
    <li><a href="link.html">Link Text</a></li>
    <li><a href="link.html">Link Text</a></li>
    <li><a href="link.html">Link Text</a></li>
</ul>

Code (markup):

That right there is all the HTML you should need. As for the CSS, I'd start by removing the bullet, margins and padding from the list:

#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

Code (markup):

Then, for your list items, set their display to inline, then strip the margins and padding from them as well. You can do this by referencing the menu ID as the direct parent so that only the list items that are part of the unordered list with the ID of menu get the styles:

#menu li {
    display: inline;
    margin: 0;
    padding: 0;
}

Code (markup):

This will cause the list items to ride up against each other horizontally. Next, you'll want to style the links. Any presentational effects you wish to apply to the menu should be styled from the links, since they are the elements that the user will be interacting with. You can reference them like this:

#menu li a {
    /* style rules for the links, such as background colors, text colors, underline (or the lack thereof) states, and so on go here */
}

Code (markup):

If you want to create hover states for your links, just follow the last step above, but add :hover to the a selector like this:

#menu li a:hover {
    /* styles you place here only get used when the mouse cursor hovers over the link */
}

Code (markup):

If you need more specific help, don't hesitate to ask me. I'll be more than happy to provide it.

(PS: I strongly suggest using the universal selector at the very top of your stylesheet to strip the margins and padding from everything on the page. Not only does this get around browser inconsistencies with regard to margins and padding, but it also gives you the ability to determine exactly how much margin and padding space elements on a page should have, and also removes the need to set the margins and padding to zero on each and every element. It looks like this: )

* {
    margin: 0;
    padding: 0;
}

Code (markup):

 

Awesome Dan, even though I'm a curious as to the advocation of using a universal selector to collapse margin and padding on all elements, due to the unavoidable pitfalls with forms.

 

Believe it or not, with the exeption of select elements (and their options), I haven't had any issues styling forms using CSS.

I guess I'm weird in that respect.

 

WoW! Thank you so much for taking the time to post that for me, it is a great help.

I have always used Dreamweaver to do everything and simply using Notepad for HTML & CSS is harder than I thought.

I am actually ok with just plain HTML with Notepad, it is just this damn CSS.

Thanks again, I really appreciate it alot

 

No problem. I hate Notepad with a passion (I use win32pad instead, but am seriously thinking about shelling out the $50 to get a copy of EditPadPro, just so I can keep everything in one instance (via tabs) without violating the terms of the free version's EULA.

 

i would use a box model to design the page. with everything directly in the body you will have problems to give ie. a width, background-colors and styles to each element.

it seems many posts were posted before this

Notepad is good, but not the greatest. you need an editor that has color parsing and automatic code filler. these two are very good and make it a lot easier to code a site with only texts

 

He doesn't need syntax highlighting and an automatic code filler - the former is nice to have, but I found the latter to be a real pain in the neck (I guess good coding practices tend to do that). Like I said, they're nice to have, but they're not essential, and their usefulness will vary from person to person. You know, the old "YMMV" cliche.

As far as a box model, that's what you do anyway. I personally prefer to use the BODY element as the container, unless I need a 100% document height model or have to support a fixed-width centered layout in IE 5.x

But then again, I also prefer liquid layouts that expand and contract dependong on the available browser space and adjusted text size the site's user has.

 

How do you support to the select elements cross-browser after the margins and paddings have collapsed?

 

I've never had a need to use them (select elements). I suppose I could whip something up as a personal exercise though.

(Whoa, talk about thread drift. )

 

Tell me about it, I'm not going to get any work done today! Let me know what you think after you've had a go.

 

Let me finish getting my computer fixed (which right now consists of hacking the Windows Registry and figuring out why Opera and IE are refusing to let go of cached copies of external files linked to Web pages) and I will.

 

Here is my favorite way of doing menus with even less HTML:

<div id="Menu">
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
<a href="">...</a>
</div>

---CSS---

#Menu
{
overflow: auto;
}

#Menu A
{
display:block;
float:left;
}

Adding overflow: auto will make the DIV expand to contain all floated elements. Then display the A elements as blocks, and float them. I use this technique on almost every site I design with much success.

 

Which is just a list of links when you look at it, so you should use a list. I suggest you learn how semantics apply to HTML markup (that is not my site).

 

As Dan said, LEARN to use proper markup (relearn html/css if you have to) before making a program that advocates "error-proof" stylesheets.