HTML/CSS Navigation

[Conspi]

Introduction
Hey! I have made a few sites in past, but all I’ve really done is mostly use WYSIWYG editors and manipulate the code it generates to my liking. So now I decided I should take a next step and be able write everything from the scratch. I am familiar with the programming logic ( I have basic knowledge about C languages ), so I watched videos Chris made about converting photoshop mockups into a working website, and I found it really helpful, so thanks Chris! Because I can understand programming logic and I am not completely stranger to HTML/CSS and other web languages AND of course because of the helpful videos Chris has made, I think I can now manage to build a decent site from scratch all by myself.

Well.. almost. I might have missed a part. I don’t know how to make a navigation. Well, at least when I don’t want to use frames that is. So here’s..

..The Actual Question
What are different ways to make a good, modern navigation purely using HTML and CSS? That means that site uses no frames and doesn’t have separate .html file for each page, as that makes updating menu and probably bunch of other stuff a pain in the ass.
(What I really mean by separate .html page is you know.. index.html, downloads.html, contact.html etc. ALL which are stand-alone pages including the site design elements)

So what I am looking is a more dynamic ways for changing the content of the sites. A modern workaround for those old frames. It would also be really cool if search engines would dig the code :)
But this is probably something really easy for you guys, so to not bore you out, then all fancy effects for changing content is also welcome :)

Also, at the second three videos about converting a mockup to working website, when I started watching I thought I would find answer to that question, but when I watched it all it came out that part was not in there. The tutorial didn’t show how to make the "ON" state for sprites to work or how to actually make the navigation to work, so a little crit. from me also.. :P

[Conspi]

I think you misunderstood. What I am really looking for is a "modern alternative for frames". Which is pretty much a div, but is it possible control the content of that div?

I don’t mind storing the content in different HTML’s. What I don’t want is each of that ‘content HTML’s’ to contain all the layout information also, stuff like menu, header, footer etc. Just plain content. And then the ‘design HTML’ would catch that content into the div it needs to be.

Of course I could just use PHP…

[Argeaux]

using php is the best way to go.

for a simple tutorial:
https://css-tricks.com/new-screencast-wo … -with-php/

[Pitter]

Hi………..
Log in this site below
http://www.css-faq.com/
Style sheets are very popular among web developers due to their powerful features. They give you all the chance to be consistent with the look and feel of your pages. At the same time, you will have much more control over the layout and design than HTML ever did.
CSS Tools

[DAVlDFON]

Style sheets are given, I agree. But in a dynamicaly built site, there are still commonly used seperators between function and display.
Chris’s tutorial on PHP is a good start in understanding this. Using a database to store the information is certainly the way to go. That way each "page" is a record with elements stored in fields. such as Page title, content, layout option etc.

Then to build a page, you would activate queries in your calls from a click – the query being your function. It may filter the database for a variety of information. For example, in wordpress, when you click a category link – it queries the database for all post that are listed with that category, then sorts them and passing them back in an array structure.

That array is then displayed on a page. The code that loops through the query ( often called "the loop" in wordpress), is your display. This code dynamically builds your page by displaying each record in the array, one at a time, as you have layed it out – replacing variables in your display code with the associated content in the array. Each iteration printing another post until it reaches the end of the results. If in the display code, you have included certain IDs or classes, this is where the CSS takes over to help with the visuals.

You may also want to look at coldfusion if you are just getting started with dynamic sites. Its tagged based, an Adobe product so well supported, and has numerous frameworks to help you get started like Fusebox. This idea is the same no matter what language you choose.

and finally – back to your original area of concern – Navigation would be built in the same manner. A query to the database for a list of " pages" and those results built into an UL one LI at a time. Additional levels of navigation could be built as well with a few tweaks to your query and display code and the CSS in the end.

If all of that seems to be a bit much of an investment in time – let wordpress do the work for you – its a nice CMS, search engine friendly with a few good plug ins, and can be used to just display pages if you like.

[webwiz]

@DAVIDFON – If you are not quite prepared to learn PHP at the moment, there is a simple alternative to frames that I used for several years. Check out "Server Side Includes" (SSI). Most web hosts support it:

Wikipedia explanation of SSI
Apache tutorial

[DAVlDFON]

Thanks. I am familiar with includes already both in PHP and Coldfusion. They work fine for static content but I was under the impression he wanted a dynamic solution.

edit** I suppose includes could be considered dynamic as well. I have used a PHP function before on a page to create a random number within a range, then pass that number into an include call as part of a file name associated with files in a specific directory to generate a random "product spotlight" solution. ie random 1-10 result = 5 would call product5.php.

[Author]

Posts