Community archive

Ask something
Discussion Locked

the navigation complaint.....

0 helpful
6 replies

by jaqui

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

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]

[/pre]
right [b]before[/b] the
[pre]

[/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]

6 replies

by nighthawk808

"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.

by jaqui

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.

by jaqui

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. :)

by sleepin'dawg

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.

[b]Dawg[/b] ]:)

by jaqui

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.

by jaqui

with the addition of:
[pre]

[/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]

Development Server for Jaqui-Greenlees

[/pre]

This discussion is closed to new replies.