15 replies [Last post]
cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Hi everyone, my first post in this forum, so hopefully I did a thorough enough job searching that this isn't too repetitious a topic.

So far I understand the fundamental concepts of how to create formatted text, divs, and lists. Problem is that I can't quite piece together what happens once I <a href=http://www.google.com>Link</a> a link in the list. How do I tell it to open in a div? Why do some people use # and #1, #2, etc. in place of actual links?

Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Could someone explain how CSS navigation works?

cswake wrote:
How do I tell it to open in a div? Why do some people use # and #1, #2, etc. in place of actual links?

Don't know what you mean by open up in a div. If you see a link that looks like #link then it's an internal link to another point on the same page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

Perhaps a simple example will be the best way to learn...
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Navigation Test</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="top">

This is the top.

<!-- The navigation menu -->
<div id="navigation">
<div id="nav">
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://search.msn.com">MSN</a></li>
<li><a href="http://search.yahoo.com">Yahoo</a></li>
</ul>
</div>
</div>

</div>

<div id="middle">
This is the middle.</div>

<div id="bottom">
This is the bottom.</div>

</body>
</html>

default.css

<!-- These are the content frames -->
#top {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 600px;
	height: 150px;
	background-color:#00CCFF;
	border: 1px black solid;
}

#middle {
	position: absolute;
	top: 170px;
	left: 20px;
	width: 600px;
	height: 500px;
	background-color:white;
	border: 1px black solid;
}

#bottom {
	position: absolute;
	top: 670px;
	left: 20px;
	width: 600px;
	height: 50px;
	background-color:#00CCFF;
	border: 1px black solid;
}

<!-- These are the Navigation components -->
#navigation {
	position: relative;
	width: 600px;
	height: 30px;
	text-align: center;
}

#nav{
	border: 1px solid black;
	background-color: #0066FF;
}

#nav ul{
	padding: 0;
	margin: 0;
}

#nav ul li{
	display: inline;
	padding: 0;
	margin: 0;
}

#nav ul li a{
	color: white;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:900;
	text-decoration: none;
	padding: 0 10px 0 10px;
	text-align: center;
	width: 9em;
	vertical-align: middle;
} 

#nav ul li a:hover, #nav ul li a:hover{
	font-color: black;
}

#nav ul li a:hover, #nav ul li a:focus{
	font-color: black;
}

With that code, I have two questions:

  • Why does IE display it correctly and not Firefox?
  • How do I go about having the navigation open the links in the middle "frame"?

[/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Could someone explain how CSS navigation works?

You seem to be talking about frames/frameset or iframe rather than CSS.

ps. 100:1 it displays correctly in FF and not in IE. You need to tell us what you like/don't like about the differences between the two browsers. And its handy to provide a link, makes things faster for us.

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

Well, I'm coming from frames and I understand how navigation works there. I want to accomplish the same thing in CSS, hence my use of frame terminology. I'm looking for someone to clarify that divide and explain how to "think" when using CSS for navigation.

Website for the sample, Click Here!

So the first question is how do I get the three navigation links to only display in the area "middle".

The second question is why does Firefox display like this:

Whereas IE displays it correctly as:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Could someone explain how CSS navigation works?

The problem is that you're using an xhtml DTD. In xhtml, body and html do not have the special characteristics reserved for them in html. IE does not, of course support xhtml and treats it as html.

Add this;

body {
    position: relative;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Could someone explain how CSS navigation works?

For the first question.

You have three pages. The only part that changes between the pages is the contents of the "content" div.

To preempt your next question - perhaps about wasteful duplication. That's where templates, scripting and/or server side includes come in. They enable you to maintain one copy of common portions of the page and include those portions on the fly when the page is requested.

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

kk5st wrote:
The problem is that you're using an xhtml DTD. In xhtml, body and html do not have the special characteristics reserved for them in html. IE does not, of course support xhtml and treats it as html.

I went ahead and included the body class into the default.css on the linked example page. However, there was no change in the behavior of Firefox. Am I supposed to put it into the html file?

Chris..S wrote:
For the first question.

You have three pages. The only part that changes between the pages is the contents of the "content" div.

To preempt your next question - perhaps about wasteful duplication. That's where templates, scripting and/or server side includes come in. They enable you to maintain one copy of common portions of the page and include those portions on the fly when the page is requested.

Ah! Laughing out loud I started reading about the SSIs and never made the connection. What are you referring to when you say templates & scripting? Is there a resource we have here that compares the advantages/disadvantages of using these options?

So if I were to redesign this example, I would have a google.shtml, msn.shtml, and yahoo.shtml that were exactly identical except for different text in the middle div. Everything except for the middle div would then be relocated to another file that would be called by the SSI. Correct?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Could someone explain how CSS navigation works?

Yes, sort of.

Given html page structure you would probably use more than one SSI instruction for each page. I don't use SSI, however I would guess something like: One include for each particular part of the page, say one for the head, other for the header, menu & footer.

By scripts, I mean any of the various programming/scripting languages that can be used to generate web pages, e.g. asp, php, perl, etc. At their most basic these can duplicate the functionality of SSI. With more complex scripts they generate all the web apps on the net - e.g. these forums.

Templates can mean two things. Some webdev s/w use page templates as the basis for pages. You keep a copy of the template and create your pages from it. If you ever modify the template the webdev s/w manages the updating of all the pages in your site that are derived from that template. Dreamweaver uses this system. Personally, I consider it clunky and slow when compared to the above two - however the pages can be hosted on any web server.

Templates can also be used with scripting languages. Each page will then consist of a template and content data. In simple terms, the script will substitute the content data into the template at the appropriate points. These sort of templates are a little more complex to setup than simple includes, however they make it easier to change page structure.

If you are new to this sort of thing, I would start with SSI or PHP+includes (or ASP+includes). If (when) you start dealing with more complex sites you may find yourself needing the added flexibility of scripting with templates.

Notes: There are templating engines for scripting languages (e.g. smarty for php). I am refering to templating as a design paradigm, templating engines are not necessary to implement templating. Some reckon they are an added layer of unnecessary complexity. e.g. PHP itself is a templating engine (and much more besides).

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Could someone explain how CSS navigation works?

Quote:
I went ahead and included the body class into the default.css on the linked example page. However, there was no change in the behavior of Firefox. Am I supposed to put it into the html file?

Nope, it's not a class. The body I refer to is the body element. That was a style ruleset I gave you. Put it in your stylesheet. Most folk would have the body (and html element) rules right at the top of the stylesheet.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

Hm, I *think* I placed it correctly, but am not obtaining the results. :?

default.css

<!-- Properly position body div -->
body {
    position: relative;
}
	
<!-- These are the content frames -->
#top {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 600px;
	height: 150px;
	background-color:#00CCFF;
	border: 1px black solid;
}

#middle {
	position: absolute;
	top: 170px;
	left: 20px;
	width: 600px;
	height: 500px;
	background-color:white;
	border: 1px black solid;
}

#bottom {
	position: absolute;
	top: 670px;
	left: 20px;
	width: 600px;
	height: 50px;
	background-color:#00CCFF;
	border: 1px black solid;
}

<!-- These are the Navigation components -->
#navigation {
	position: relative;
	width: 600px;
	height: 30px;
	text-align: center;
}

#nav{
	border: 1px solid black;
	background-color: #0066FF;
}

#nav ul{
	padding: 0;
	margin: 0;
}

#nav ul li{
	display: inline;
	padding: 0;
	margin: 0;
}

#nav ul li a{
	color: white;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:900;
	text-decoration: none;
	padding: 0 10px 0 10px;
	text-align: center;
	width: 9em;
	vertical-align: middle;
} 

#nav ul li a:hover, #nav ul li a:hover{
	font-color: black;
}

#nav ul li a:hover, #nav ul li a:focus{
	font-color: black;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 16 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Could someone explain how CSS navigation works?

your comments are incorrect. In css they're written as:

/* comment here */

not like the html version

<!-- this is wrong -->

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

Made the comment changes and it seemed to solve it. On another note, I went ahead and changed all my html files to shtml. Firefox has no problem previewing them, but IE reads them as text:

Should I change the DTD when switching to SHTML?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 13 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Could someone explain how CSS navigation works?

Any particular reason you changed to .shtml?

Verschwindende wrote:
  • CSS doesn't make pies

cswake
Offline
newbie
Last seen: 15 years 27 weeks ago
Timezone: GMT-5
Joined: 2005-12-17
Posts: 7
Points: 0

Could someone explain how CSS navigation works?

So that SSIs will work?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Could someone explain how CSS navigation works?

Be sure your web server is properly configured to serve shtml as text/html. Else, the usual default is to serve as text/plain. What's really funny is that IE is buggy. If it thinks the file looks like html, even if served as plain text, it will parse it as html. It seems the bug has a bug in your case. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.