Div Linking Using Css

[evion 0]

You see, i just started learning the art of CSS! Wow am i a loser or what? Well anyway i find it pretty useful when i create a separate spreadsheet and link to it for every page because i used to just type in some random scrollbar and link colors for the CSS part of each webpage and sometimes when i change the background i need to change the link color of eveyr single one of my websites again which is a HUGE hassle. So anyway, i started working with divs too because their a great alternative to frames but i find it really difficult to work because it has so many capabalities. Firstly of course i bet you've all seen blogs that use divs to navigate between "pages" of an actually one-page-only website? You click on the "link" and it sort of switched the main div to the next one and overlaps it (well that's what i think anyway). So how do you do it? Right now i have an iframe as the content page and a div layer as the navigation side of the page. All the links will be linked to the iframe's name which is pretty easy. I just need a really simple code i can use to link divs and it'll be very much appreciated because i will help work out my iframe problems. Thanks!

[vizskywalker 0]

That div switching is accomplished thorugh javascript. And none of the various scripts I've seen for it have ever been short, sweet, although some have been to the point. I'm actually doing mostly the same thing on my site, and have found a few shortcuts to make it nicer. If you wish, I'd be willing to share code and guide you through it.~Viz

[evion 0]

I will be very much obliged to you if you shall do so. Hmm, I'm not exactly well acquainted with Javascript because i've never used it much but if its worth learning and its worth knowing. Maybe you could begin by giving me a basic overview of how the code should work in "lameman's" terms and I'll do my part in searching the net for some tutorials that i might find. Your help is much appreciated!

[mzwebfreak 0]

Actually, from the HTML browsing I've done, since I think I do much the same thing on my website, Nevernormal.com, there's actually two ways to do it: the Javascript vizsky mentioned and also you can use PHP to do the same thing. First, you create the basic layout for what you want as a basic HTML file. (I do it this way because I'm a visual designer and need to see how it's going to look like in the end.) You just cut and paste the code that's semi-static (i.e. the navigation) into a header.inc file as is. To use my website as an example, if you look at the index page code, everything up to this line:

<DIV style="LEFT: 322; WIDTH: 540; POSITION: absolute; TOP: 303;>

goes into my header.inc file. Then I have the different pages, like my blog on the main one. However, I also have separate php pages with other malleable info, such as websites and such. I'm not that good at explaining how I go about doing the separate pages, but there's a way to put more than one page of info onto one php file, and access it all from that one file. It's kinda like HTML bookmarks, but instead of you still having the whole page there, you actually just pull out the specific info for that "bookmark" of the document.

Or, there's this way to specify what happens in the specific div layers in CSS...which may be more along what you want...I though it could be a couple of things, hence the longwinded post. Okay, say you have a layout with three DIV layers: left with navigation, center with the basic changing pages, and right with more information about the site. Now, you want the left (hereafter known as info) and the right (hereafter known as updates) to have a different background to the center navigation section. So, in the DIV section, much like you see in the code above, you want to classify it as "info". So, what you do in the HTML document is this:

<DIV id=info>

Now, why not all the other info into the HTML? Because it's all in the css document. In the CSS, you put this information, exactly as is:

#info   { padding:2; left: 5px; width: 225px; position: absolute; top: 5px; BACKGROUND-COLOR: #000000}

[mzwebfreak 0]

Darn, pressed the enter button instead of Shift, so here's the rest of the post.The information in the CSS will specify what the DIV looks like, and I would assume you'd just link directly to your CSS file from the files with the DIV layers. And if you have different DIVs that you want to look different from the #info section, just do so, with just naming them something else, like either #info2 or #funstuff or whatever you feel like. Hope some of my tips helped. If not, bash me over the head with a wet noodle!

[vizskywalker 0]

Yeah, sorry I'm taking so long to get back to you, haven't forgotten. I tried the php and found the javascript to be a) more fluid since it is client side and depends on clients speed, doesn't overlaod server as much, more flexible. I promise I will show you how, just swamped with school work and application essays for college, things should clear up in two days.~Viz