www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

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

  1. #1
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538

    How do i achieve this frame-effect, USING CSS

    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

  2. #2
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    anyone know if its even possible?

  3. #3
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  4. #4
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    thanks dude

  5. #5
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    No problemo.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  6. #6
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    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..

  7. #7
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  8. #8
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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;
    }
    }
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  9. #9
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    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

  10. #10
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  11. #11
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    thank you sir.

  12. #12
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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!
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  13. #13
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    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.

  14. #14
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    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

  15. #15
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles