I initially wanted to learn DreamWeaver, but was advised to start from the basics and learn HTML coupled with CSS.
I headed of to school (w3schools.com), and found they offered to teach almost everything
I learnt HTML very well, even completed all their examples and "try it yourselfs"
Then i learnt CSS and also completed the examples and "try it yourselfs"
But i've discovered i cant actually build a website with the information i have
I can actually do things in bits and pieces, but can bring them together to achieve my aim
That brings me back to the idea of learning Dreamweaver.
What made me start this topic was because i had designed a nagivation bar with ul lists + float left, but i cant take it to the top
to postion it just below the main header logo like is obtainable in most websites.
How do i do it?

There are many ways to do that, here's one I use.

Create a container
create the header portion
create the nav portion right after it.


<div id="container">
<div id="header"></div>
<div id="nav_bar">
<ul>
<li>yada yada</li>
</ul>
</div>
</div>

You can assign the container a fixed width.
If you want the header and nav bar to be same width with the container, no need to specify a width for them, they'll just inherit width attribute from their mom, the container.
Please dont resort to Dreamweaver to get this done. For the purpose of learning, please try to do this in a plain editor like notepad or notepad++.

ok, cool
will get back shortly

Dual Core:

<div id="container">
<div id="header"></div>
<div id="nav_bar">
<ul>
<li>yada yada</li>
</ul>
</div>
</div>

You may not know it, but you have saved me a lot of anguish by typing those lines of code. . .
Thanks plenty

Now on to the next one. . .
how do i insert a short vertical line to seperate my navigation links?
I'm sure you understand me?

Like after HOME, you get a short vertical line that seperates it from the next one and so on?

Hope i'm not a pain?

I am guessing you have a setup like
<div id="nav_bar">
        <ul>
                <li><a href="yada yada" id="first">yada yada</a></li>
                <li><a href="yada yada">yada yada</a></li>
        </ul>
</div>

Put a right border on the anchor
border-right:solid #000 1px;
set the right padding to get the bar right where u want it between the list items.

something like

#nav bar ul li a{
    border-right:solid #000 1px;
    padding-left: 10px;
    padding-right: 10px;
}


One thing though is tat with the padding-left you may have made the first item in the nav bar go out of any previous alignment it had.
You can isolate that first item with its own ID and set padding-left to zero and give it the important kini (whatever its called).

If you look at the html above u see i have given it an ID of "first"

Now here's what the css for it will be like

#first{
   padding-left: 0; !important
}

Hope this helps.

Dual core,
Help me clear my doubts here

How possible, if it is at all to accurately position a 'div' exactly where you want it on your web page without using an application like dreamweaver.
Dont get me wrong, i'm all for coding with bare hands but how can it be done with somethin like notepad?

With dreamweaver you can click on the div's handler and drag to anywhere on the page, how is that achieved with notepad?

There are many ways that can be done. I use padding, margins and floats in CSS.

The dilemma you are facing today is what I faced years back when I started this thing and was stuck with dreamweaver. There's a particular attribute you will set for the layer and it becomes draggable and droppable just anywhere you want it. I saw that and thought that was the best thing tht had happened to me that day, being able to put things just where I want them. Well I previewed the page and found out that the friggin layer has a life of its own. It wont re-position itself if i change the size of the browser.

With notepad or any other editor (in fact with CSS), you do not have the luxury of using your mouse to drag n drop things. However you have pixel-point precision and accuracy as to where you want things to be.

Useful things to google:
The "CSS box model".
Positioning with CSS.


Also do well to look at this user's posts and threads in this section: Lanbaba

Beautiful coincidence. My Dreamweaver CS 5 just crashed now while working with it. This is actually the first project I have worked on since I got the CS 5 and its crashed mid-way . Well in comparison with notepad++. dreamweaver didn't save my development time (i still have to type the very same amount of codes), it just made traversing through files easy. I'm strolling back to my Notepad++ . Now I'll need a second monitor.


My point: Dont rely on these IDEs (e.g dreamweaver). Let them rely on you.

Mardi Gras:

Dont get me wrong, i'm all for coding with bare hands but how can it be done with somethin like notepad?

I'm not against your using dreamweaver in its entirety. Just dont look for short-cuts in it. You may want to stay away from the "design view" and make the "code view" your home view.

Dual Core:

My point: Dont rely on these IDEs (e.g dreamweaver). Let them rely on you.

I'm not against your using dreamweaver in its entirety. Just dont look for short-cuts in it. You may want to stay away from the "design view" and make the "code view" your home view.

I support 109%. Thats one of my coding philosophies.

@Mardi Gras First congratulations to be very frank its never easy as first and its quite understandable.but i want to give some tips and points as to laying put web page.
first of all you build from top to bottom. of course u know that. now draw your website in box patterns.
also becareful of dreamweaver it messes up codes notepad++ is good ,Nusphere aint bad,Aptana Studio good for prograaming.
first u need to understand the Css Box Model which i can explain since i know that well.
in CSS BOX MODEL
there are
1.relative
2.absolute
3.fixed
4.static
Static is the default without any specified it probably set to static; u position elements with margin-left,top and others

fixed->this stays on the specified co-ordinates of the browser regardless of what elements occupies that scrolling up and down dosen't affect the element e.g facebook messenger

absolute->this occupies a specific position on the browser regardless of which elements is there.and the default starting point is the top-left co-ordinate of the window of the browser. NOTE: but if an absolute div is closed inside a RELATIVE DIV it will position itself on the relative div.

relative->similar to absolute except that if a relative element cannot be on top of another element, so it positions itself in relative to the element. and if no element exist the starting point is top left

#tip if an element is layered on another give both either absolute or relative and give each a z-index a higher values stays on the highest layer,

i got more tips but not sure they are applicable to u now but.

another way to reduce load consider image sprite rather than numerous images it saves bandwith really.
later will monitor these topic stay focused take care

absolute->thi

Ok now people i'm stuck again
Dual core over to you. . .

I want to create a drop down menu, i guess you know what i mean
Like when you hover over a menu and there's a drop down list
W3chools didnt teach that in their dhtml section

I've got two problems,

1. W3chools used tables in creating their nav-bar, but i use[b] lists[/b]

2. The drop down is abrupt, but i want it to glide down a little more slowly

Is this achieved using css or javascript?

Pls post a link where i can read up online, as i guess this is going to require a chunk of code

Thanks

Drop downs that come down abruptly are done with CSS. If you want the one that slides down, you'll need javascript. The CSS option reduces loading time but the javascript is cooler.

In addition you can check dynamicdrive.com and see if that place helps.

i have a feeling u are trying to come up with how to design it yourself, my advice copy/study others and master theirs, trust me it gives u more understanding , dualcore gave u alink

Mardi Gras:

You may not know it, but you have saved me a lot of anguish by typing those lines of code. . .
Thanks plenty

Now on to the next one. . .
how do i insert a short vertical line to seperate my navigation links?
I'm sure you understand me?

Like after HOME, you get a short vertical line that seperates it from the next one and so on?

Hope i'm not a pain?

Friend, am also a learner in w3school.com so I will lik us to interact. Pls add me on facebook as ''jepsy50''
Now, to get that short vertical line to separate ur nav-bars, do this.
1. In you pc u hav \, /, and |, rit?
2, after each nav-bar, insert |
Eg <a href=''#w3school.html''></a>| b4 coding anoda nav-bar. Is such simple! Pls lets meet on fb ok?