How do i achieve this frame-effect, USING CSS

**The Cheat** · 04-10-2004 11:38 PM

You know how when you use frames, its possible to set it up so there is a horizontal frame across the top of the screen that is visible at all times? Well my question is how i can do this using css! It would be used to keep a menu visible at the top of the page at all times.

And no, i dont want to use javascript.

THANKS!

-tc

**The Cheat** · 04-11-2004 12:59 AM

anyone know if its even possible?

**Paul Jr** · 04-11-2004 01:04 AM

Yes, it's very possible; using position: fixed; which of course, IE does not recognize. So, to get around IE's stupidness we have to use a hack.
If you need other/more information, just google "IE positioning hack" or something like that.

**The Cheat** · 04-11-2004 01:57 AM

thanks dude

**Paul Jr** · 04-11-2004 01:59 AM

No problemo.

**The Cheat** · 05-06-2004 03:16 PM

Hey, yes i know this is a very, very late response..

But i can't figure out how to get that hack to work. Could you show me what to do?

Here's the layout that works fine in non-ie browsers:

the html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>ROADPAC - Planning for Oregon's Future!</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-language" content="en-us">

<meta http-equiv="imagetoolbar" content="no">
<meta name="mssmarttagspreventparsing" content="true">

<style type="text/css" media="screen">@import "stylesheet.css";</style>
</head>

<body>

<div id="content">
<h1>ROADPAC</h1>
<h2>Planning for Oregon's Future</h2>

<div id="coos">
<img src="images/coos.gif" alt="" height="100" width="300">
</div>

<h3>What is Roadpac?</h3>
<p>It is a Political Action Committee (PAC)
formed by the Oregon State Grange to promote
the merits of a limited access highway that
will cross the state from the Oregon International
Port of Coos Bay to Ontario on the east side
of the state, the I-84 Port of Entry into
Oregon. This will encourage economic development
and increase employment in areas that are
economically depressed. Ultimately a network
of these new 2 and 4 lane interstate quality
roads are proposed to provide safer, faster
travel throughout the State.</p>

<h3>Initiative Ballot</h3>
<p>Oregon allows its citizens to place an initiative
on the ballot. This grass roots effort will
require obtaining nearly 76,000 certified
signatures of registered voters to place
the argument before the voters of the state.</p>

<h3>Support the Project</h3>
<p>You can help in several ways: Cash <a href="contrib.html">contributions</a> are welcome and may be tax deductible. Gather
signatures for the initiative petition. Use
our video to give a presentation to your
organization. Write letters to your state
political representatives suggesting they
take action to support building this limited
access highway.</p>

<h3>Join the Forum</h3>
<p>Use the <a href="http://www.roadpac.org/forum/">Forum</a> to volunteer help, make comments, or request
more information. We will appreciate your
interest.</p>
</div>


<div id="topbar">
<div id="menu">
<span class="currentpage">Home</span> |
<a href="contrib.html" class="parent">Contribute</a> |
<a href="video.html" class="parent">Video</a> |
<a href="cont.html" class="parent">Contact</a> |
<a href="faq.html" class="parent">FAQ</a> |
<a href="info.html" class="parent">Info</a> |
<a href="forum/" class="parent">Forum</a> |
<a href="http://www.roadpac.org/forum/viewforum.php?f=5" class="parent">Polls</a>
</div>


<div id="copyright">
<p id="copyrighttext">Copyright &copy; 2001-2004 RoadPac.</p>
</div>
</div>


</body>
</html>

the css:

Code:

body {
margin: 0;
padding: 0;
background-color: #fffff0;
}

/*Top Bar*/
#topbar {
top: 0;
position: fixed;
background-color: #ffffff;
width: 100%;
height: 75px;
}

/*Menu*/
#menu {
text-align: center;
}

/*Copyright*/
#copyright {
bottom: 0;
right: 0;
position: absolute;
}
#copyrighttext {
color: #000000;
font-size: x-small;
}

/*Headers*/
h1,h2 {
visibility: hidden;
position: absolute;
}
h3 {
color: #000080;
font-family: Verdana;
font-size: small;
font-weight: bold;
margin: 0px;
}

/*Paragraphs*/
p {
color: #000080;
font-family: Verdana;
font-size: small;
margin-top: 0px;
}

/*Content*/
#content {
margin-top: 80px;
margin-left: 10px;
margin-right: 10px;
}

/*Coos Bay-Ontario image*/
#coos {
text-align: center;
}

/*general links*/
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}

/*menu parent links*/
a.parent:link {
text-decoration: none;
color: #000080;
font-weight: bold;
font-family: Verdana;
font-size: 12pt;
}
a.parent:visited {
text-decoration: none;
color: #000080;
font-weight: bold;
font-family: Verdana;
font-size: 12pt;
}
a.parent:hover {
text-decoration: none;
color: #ff0000;
font-weight: bold;
font-family: Verdana;
font-size: 12pt;
}

/*menu child links*/
a.child:link {
text-decoration: none;
color: #000080;
font-weight: normal;
font-family: Verdana;
font-size: 8pt;
}
a.child:visited {
text-decoration: none;
font-weight: normal;
color: #000080;
font-family: Verdana;
font-size: 8pt;
}
a.child:hover {
text-decoration: none;
color: #ff0000;
font-weight: normal;
font-family: Verdana;
font-size: 8pt;
}

/*menu current page link*/
span.currentpage {
text-decoration: none;
color: #999999;
font-weight: bold;
font-family: Verdana;
font-size: 12pt;
}

I am sorry i pasted the entire thing.. im too lazy to edit it to be smaller on the page..

**Paul Jr** · 05-06-2004 11:04 PM

All right, I managed to get it working in both Firebird and IE. I have one question: Do you have PHP available to you? If you do, I can give this to you straight and it’ll work. If not, then you’ll have to put all the IE stuff in a separate stylesheet and use conditional statements so only IE will see those styles.

**Paul Jr** · 05-06-2004 11:48 PM

Okay, these are the styles for IE, they need to be either filtered out with PHP, or go an IE Conditional statement:

Code:

body {
padding:0;
margin: 0;
height: 100%;
overflow: hidden;
}
/*Top Bar*/
#topbar {
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
width: 100%;
height: 75px;
overflow: auto;
}
/*Content*/
#content {
width: 100%;
height: 100%;
overflow: auto;
}

These are the styles for everyone else:

Code:

@media screen {
body {
margin: 0;
padding: 75px 0 0 0;
background-color: #fffff0;
}
/*Top Bar*/
#topbar {
top: 0;
left: 0;
position: fixed;
background-color: #ffffff;
width: 100%;
height: 75px;
overflow: auto;
}
/*Content*/
#content {
padding: 0 10px;
}
}

**The Cheat** · 05-07-2004 12:32 AM

yes i have php available to me, however, if you could post the code to do it serverside with php, but also post the code to using the ie conditional statement, that would be awesome. That way i can have both for future reference.

thanks

**Paul Jr** · 05-07-2004 12:59 AM

Originally posted by The Cheat
yes i have php available to me, however, if you could post the code to do it serverside with php, but also post the code to using the ie conditional statement, that would be awesome. That way i can have both for future reference.

thanks

You’re going to have the styles in an external stylesheet, right?

PHP Code:


<?php 

    if(!stristr($_SERVER["HTTP_USER_AGENT"], "Opera") && stristr($_SERVER["HTTP_USER_AGENT"], "MSIE")) { ?>

body {

    padding: 0;

    margin: 0;

    height: 100%;

    overflow: hidden;

}

/*Top Bar*/

#topbar {

    position: absolute;

    top: 0;

    left: 0;

    background-color: #FFF;

    width: 100%;

    height: 75px;

    overflow: auto;

}

/*Content*/

#content {

    width: 100%;

    height: 100%;

    overflow: auto;

}<?php } else { ?>

@media screen {

body {

    margin: 0;

    padding: 75px 0 0 0;

    background-color: #FFFFF0;

}

/*Top Bar*/

#topbar {

    top: 0;

    left: 0;

    position: fixed;

    background-color: #FFF;

    width: 100%;

    height: 75px;

    overflow: auto;

}

/*Content*/

#content {

    padding: 0 10px;

}

}<?php } ?>



/*Menu*/

#menu {

text-align: center;

}



/*Copyright*/

#copyright {

bottom: 0;

right: 0;

position: absolute;

}

#copyrighttext {

color: #000000;

font-size: x-small;

}



/*Headers*/

h1,h2 {

visibility: hidden;

position: absolute;

}

h3 {

color: #000080;

font-family: Verdana;

font-size: small;

font-weight: bold;

margin: 0px;

}



/*Paragraphs*/

p {

color: #000080;

font-family: Verdana;

font-size: small;

margin-top: 0px;

}



/*Coos Bay-Ontario image*/

#coos {

text-align: center;

}



/*general links*/

a:link {

color: blue;

text-decoration: underline;

}

a:visited {

color: purple;

text-decoration: underline;

}

a:hover {

color: blue;

text-decoration: underline;

}



/*menu parent links*/

a.parent:link {

text-decoration: none;

color: #000080;

font-weight: bold;

font-family: Verdana;

font-size: 12pt;

}

a.parent:visited {

text-decoration: none;

color: #000080;

font-weight: bold;

font-family: Verdana;

font-size: 12pt;

}

a.parent:hover {

text-decoration: none;

color: #ff0000;

font-weight: bold;

font-family: Verdana;

font-size: 12pt;

}





/*menu child links*/

a.child:link {

text-decoration: none;

color: #000080;

font-weight: normal;

font-family: Verdana;

font-size: 8pt;

}

a.child:visited {

text-decoration: none;

font-weight: normal;

color: #000080;

font-family: Verdana;

font-size: 8pt;

}

a.child:hover {

text-decoration: none;

color: #ff0000;

font-weight: normal;

font-family: Verdana;

font-size: 8pt;

}



/*menu current page link*/

span.currentpage {

text-decoration: none;

color: #999999;

font-weight: bold;

font-family: Verdana;

font-size: 12pt;

}

The reason for PHP up there is to make sure the browser is only IE, that should also catch Opera when spoofing as IE (I checked it.).

Also, if you put this in an external stylesheet, make sure you specify the content-type as text/css

PHP Code:


header("content-type: text/css");

For the IE conditional, just put your call to your external stylesheet where it says *CSS HERE*, be it an import, or <link />

Code:

<!--[if IE]>
*CSS HERE*
<![endif]-->

I suppose that’s about it.

**The Cheat** · 05-07-2004 01:05 AM

thank you sir.

**Paul Jr** · 05-07-2004 01:12 AM

You’re most very welcome.

This was also a learning experience for me, as I have never had the need for that hack, therefore I’ve never used it. But I did have a time getting it right, I could of sworn it was exactly as they had it, but apparently it wasn’t.

I should try a design like that sometime...

Anyhoo, good luck and many happy returns!

**The Cheat** · 05-07-2004 01:18 AM

yeah. its really unfortunate that ie doesn't support FIXED!!!! It ticks me off. I dont like using hacks for browsers that arent dead... In fact, i HATE hacks.

**The Cheat** · 05-07-2004 01:25 AM

btw, i did not make the site (roadpac.org)

Someone i know did, i was just curious if i could achieve the effect using all css.

teehee

**Paul Jr** · 05-07-2004 03:29 PM

Originally posted by The Cheat
yeah. its really unfortunate that ie doesn't support FIXED!!!! It ticks me off. I dont like using hacks for browsers that arent dead... In fact, i HATE hacks.

I know! I was thinking about this last night, really late (3 a.m.). I hate that IE doesn’t support the simplest things, like position: fixed;, and several CSS 2 selectors. Maybe I’ll just stop coding for IE... I just won’t check a thing in IE. I’ll just completely ignore it.

Thread: How do i achieve this frame-effect, USING CSS

Thread Tools

Display

How do i achieve this frame-effect, USING CSS

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions