/    Sign up×
Community /Pin to ProfileBookmark

How do i achieve this frame-effect, USING CSS

Copy linkTweet thisAlerts:
Apr 11.2004

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

to post a comment
CSS

16 Comments(s) ↴

Copy linkTweet thisAlerts:
@The_CheatauthorApr 11.2004 — anyone know if its even possible?
Copy linkTweet thisAlerts:
@Paul_JrApr 11.2004 — Yes, it's very possible; using [FONT=courier new]position: fixed;[/FONT] which of course, IE does not recognize. So, to get around IE's stupidness we have to use a [URL=http://devnull.tagsoup.com/fixed/]hack[/URL].

If you need other/more information, just google "IE positioning hack" or something like that.
Copy linkTweet thisAlerts:
@The_CheatauthorApr 11.2004 — thanks dude
Copy linkTweet thisAlerts:
@Paul_JrApr 11.2004 — No problemo. ?
Copy linkTweet thisAlerts:
@The_CheatauthorMay 06.2004 — 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:
<!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 © 2001-2004 RoadPac.</p>
</div>
</div>


</body>
</html>


the css:
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..
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — 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.
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — Okay, these are the styles for IE, they need to be either filtered out with PHP, or go an IE Conditional statement:
<i>
</i>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:
<i>
</i>@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;
}
}
Copy linkTweet thisAlerts:
@The_CheatauthorMay 07.2004 — 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
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — [i]Originally posted by The Cheat [/i]

[B]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 [/B][/QUOTE]
You&#8217;re going to have the styles in an external stylesheet, right?

[size=1][code=php]
<?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;
}
[/code][/size]

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
[code=php]
header("content-type: text/css");
[/code]

For the IE conditional, just put your call to your external stylesheet where it says *CSS HERE*, be it an import, or <link />
<i>
</i>&lt;!--[if IE]&gt;
*CSS HERE*
&lt;![endif]--&gt;

I suppose that&#8217;s about it.
Copy linkTweet thisAlerts:
@The_CheatauthorMay 07.2004 — thank you sir. ?
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — [font=arial]You&#8217;re most very welcome. ?

This was also a learning experience for me, as I have never had the need for that hack, therefore I&#8217;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&#8217;t. ?

I should try a design like that sometime...

Anyhoo, good luck and many happy returns!

[/font]
Copy linkTweet thisAlerts:
@The_CheatauthorMay 07.2004 — 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.
Copy linkTweet thisAlerts:
@The_CheatauthorMay 07.2004 — 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 ?
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — [i]Originally posted by The Cheat [/i]

[B]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. [/B][/QUOTE]
I know! I was thinking about this last night, really late (3 a.m.). I [b]hate[/b] that IE doesn&#8217;t support the simplest things, like position: fixed;, and several CSS 2 selectors. Maybe I&#8217;ll just stop coding for IE... I just won&#8217;t check a thing in IE. I&#8217;ll just completely ignore it.
Copy linkTweet thisAlerts:
@The_CheatauthorMay 07.2004 — as much as i would love to do that. I believe we should code for our audience.. and since just about everyone uses IE. We're stuck.

grrr

:mad:
Copy linkTweet thisAlerts:
@Paul_JrMay 07.2004 — [i]Originally posted by The Cheat [/i]

[B]as much as i would love to do that. I believe we should code for our audience.. and since just about everyone uses IE. We're stuck.



grrr



:mad: [/B][/QUOTE]
Lol. I don&#8217;t know about that. I don&#8217;t do this for a living, so I can afford to cut out IE completely. ? Of course, if I ever got into doing this professionally, I wouldn&#8217;t be able to cut out IE, but now...
×

Success!

Help @The_Cheat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...