Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: floating frame

  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    floating frame

    Hi,

    someone asked me if it was possible in CSS to make a floating menu over some text.

    so say i had a full page of text this menu would sit across the top and you would be able to see the text below it and above it.

    I've attached a image i made in photoshop so show what i mean.
    Attached Thumbnails Attached Thumbnails floating frame-css_smaple.gif  

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Fullwebservice,

    have a look at this example....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>fixed div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	  
    <style type="text/css">
    <!--
    html,body {
        margin:0;
        padding:0;
        background-color:#669;
        color:#000;
     }
    #fixed {
        position: fixed;
        border:1px solid #000;
        width:420px;
        line-height: 40px;
        left:50%;
        top:60px;
        opacity:0.9;
        background-color:#666;
        color:#fff;
        text-align:center;
        margin-left:-210px;
     }
    #fixed a{
        background-color:#666;
        color:#fff;
        margin:0 10px;
     }
    #content {
        width:400px;
        margin:20px auto;
        border:3px double #000;
        background-color:#fff;
        color:#000;
     }
    #content p {
        text-align:justify;
        margin:20px;
     }
    -->
    </style>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    html,body {
        height:100%;
        overflow:auto;
     }
    #fixed {
        position:absolute;
        filter:alpha(opacity='90');
        margin-left:-220px;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="fixed">
      <a href="#">home</a>
      <a href="#">contact</a>
      <a href="#">services</a>
      <a href="#">support</a>
    </div>
    	
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p><p>
    Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
    est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
    In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec 
    erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
    </p><p>
    Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis 
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet 
    semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor 
    tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla 
    feugiat. Cras mauris.
    </p><p>
    Donec lobortis, odio non ultrices commodo, urna eros ornare lectus, quis faucibus nisi nibh sit amet lectus. 
    Nam tristique, velit ac ullamcorper adipiscing, ligula justo ullamcorper augue, ut ullamcorper sem nisi sed 
    dolor. Proin at lectus. Nam sagittis euismod lorem. Vestibulum lobortis viverra sapien. Phasellus euismod, 
    nulla quis posuere convallis, tellus urna tincidunt augue, at gravida nisl diam non mi. Sed at metus. Mauris 
    risus augue, viverra non, varius a, ornare sit amet, dolor. Pellentesque sed est vel nulla dictum pretium. 
    Suspendisse potenti. Quisque rutrum pulvinar magna.
    </p><p>
    </div>
    
    </body>
    </html>
    ...it may give you some ideas.

    cooothead

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ya thats what i'm looking for.

    I just have to look at it now and see how it's done

    thanks.


  •  

    Posting Permissions

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