General discussion

Locked

the navigation complaint.....

By Jaqui ·
The CSS below allows a fix for keeping the Site navigation always visible.

with the three columns defines, using column two for the main content you can use column 3 for the spotlight on ad bar and column one for a spacer to keep the site display at the desired width.

to see the functionality, with the colours specified, check http://jaqui-greenlees.net
This being the CSS used on there. :)

NOTE: this is standards compliant CSS, IE doesn't render it 100% correctly.[ and I am not going to put the effort to support IE, if MS wants it to display the site correctly they can make it work with standards compliant code. ]

Note2: with the addition of another xml declaration to the xhtml script IE will play nice and render this correctly.
[pre]
<?xml version="1.0" ?>
[/pre]
right before the
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
[/pre]

[pre]
body { border: 0pt none ;
margin: 0pt;
padding: 0pt;
background: #B1B1B1 repeat scroll 0% 50%;
height: 100%;
max-height: 100%;
font-family: arial,verdana,sans-serif;
font-size: 76%;
overflow: hidden;
}

* html body { padding: 180px 0pt 50px;
background-color: #B1B1B1;
}

#container { padding: 20px;
background: #B1B1B1 repeat scroll 0% 50%;
font-family: "times new roman",serif;
font-size: 1.2em;
position: fixed;
top: 200px;
left: 0pt;
bottom: 50px;
right: 0pt;
overflow: auto;
text-align: left;
}

* html #container { height: 100%;
width: 100%;
background-color: #B1B1B1;
}

#header { border-bottom: 4px solid rgb(115, 162, 189);
background: rgb(83, 130, 157) repeat scroll 0% 50%;
position: absolute;
top: 0pt;
left: 0pt;
width: 100%;
height: 200px;
overflow: auto;
text-align: center;
}

* html #header { height: 200px;
}

#footer { border-top: 5px solid rgb(83, 130, 157);
background: rgb(115, 162, 189) repeat scroll 0% 50%;
position: absolute;
bottom: 0pt;
left: 0pt;
width: 100%;
height: 45px;
overflow: auto;
text-align: center;
}

* html #footer { height: 50px;
}

h1 { margin: 0pt;
padding: 0pt;
font-size: 4em;
}

#footer p { margin: 5px 10px 0pt;
color: rgb(255, 255, 255);
}

#header img { margin: 10px 10px 0pt;
}

#container img { margin: 5px;
}

#absolute { border: 1px solid rgb(0, 0, 0);
padding: 10px;
background: #B1B1B1 repeat scroll 0% 50%;
position: absolute;
top: 400px;
right: 100px;
width: 200px;
}

#left { border: 1px solid rgb(0, 0, 0);
padding: 10px;
background: #B1B1B1 repeat scroll 0% 50%;
float: left;
color: rgb(0, 0, 0);
width: 50%;
}

#right { border: 1px solid rgb(0, 0, 0);
padding: 10px;
background: #B1B1B1 repeat scroll 0% 50%;
float: right;
color: rgb(0, 0, 0);
}

a, { text-decoration: underline;
background-color: transparent;
color: #000000;
font-weight: bold;
font-size: 1em;
}
a:visited { text-decoration: underline;
background-color: transparent;
color: #00FF00;
font-weight: bold;
font-size: 1em;
}
a:hover { text-decoration: underline;
color: #FF0000
font-weight: bold;
font-size: 1.5em;
}

.grey { color: rgb(136, 136, 136);
}

.ltgrey { color: rgb(221, 221, 221);
}

img#mascot { float: right;
}

#header ul { border-top: 1px solid rgb(115, 162, 189);
clear: both;
text-align: center;
}

#header ul { margin: 0pt;
padding: 0pt;
background: transparent repeat scroll 0% 50%;
list-style-type: none;
height: 3em;
}

#header ul li { display: inline;
color: rgb(115, 162, 189);
}

.strike { text-decoration: line-through;
}

.lft { float: left;
}

.rgt { float: right;
}

.columnone, .columntwo { width: 31%;
float: left;
text-align: justify;
margin-right: 2%;
}

.columnthree { border: 1px solid rgb(255, 255, 255);
text-align: justify;
}

* html .columnthree { border: 0pt none ;
}

hr { border: 0pt none ;
clear: both;
height: 1px;
color: rgb(136, 136, 136);
background-color: rgb(136, 136, 136);
}

.columnthree a, .columnthree a:visited { font-size: 1em;
color: rgb(0, 0, 0);
text-decoration: underline;
}

.columnthree a:hover { color: rgb(136, 136, 136);
text-decoration: none;
}
[/pre]

This conversation is currently closed to new comments.

6 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Comments

Collapse -

That's a good one!

by nighthawk808 In reply to the navigation complaint. ...

"NOTE: this is standards compliant CSS, IE doesn't render it 100% correctly."

This is one of the most unintentionally funny things I've read in quite a while. Thanks for the laugh, and for your hard work.

Collapse -

silly thing is

by Jaqui In reply to That's a good one!

I borrowed a friend's system and used his IE to view the site, IE doesn't play nicely with it.

scroll bars all over the place, including in the fixed div header.
[ at 800 by 600, which it doesn't do in a browser using the gecko rendering engine. ]

I even checked it out in both lynx and links, neither of which support images or CSS, they both have a clean look for the site, even if it's not the same layout as the CSS gives.

Collapse -

I should,

by Jaqui In reply to That's a good one!

now that I found the fix, take that note out.
but it's pretty obvious if you read the post that says I found out how to get IE to play nice with css and xhtml. :)

Collapse -

Good one Jaqui but what I especially admired was your dedication...........

by sleepin'dawg In reply to the navigation complaint. ...

in typing and debugging all that. It might be meaningless to you but the way I type, it would have taken me hours if not days. I really got a charge out of it.

Dawg ]:)

Collapse -

I freely admit..

by Jaqui In reply to Good one Jaqui but what I ...

I cheated and used a CSS file from CSS PLaY as the foundation for it, then I used NVU's built in CSS editor tool to get the look I wanted.

I was impressed with NVu's CSS editor, very nice tool. I'm not as impressed with the page development tool that is NVu's reason to be, but they did do the CSS editor right.

Collapse -

found the IE fix.....

by Jaqui In reply to the navigation complaint. ...

with the addition of:
[pre]
<?xml version="1.0" ?>
[/pre]
before the doctype declaration in the html/xhtml file IE plays nice with the css. :)

editing to add:
the Headers then look like this for IE to work with the xhtml and css scripts.
[pre]
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Development Server for Jaqui-Greenlees</title>
<meta name="Author" content="Jaqui Greenlees" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" media="all" type="text/css" href="css/fixed.css" />
</head>[/pre]

Back to Community Forum
6 total posts (Page 1 of 1)  

Related Forums