Results 1 to 8 of 8

Thread: looking for css script that makes a static image in its fixed position

  1. #1
    Join Date
    Aug 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default looking for css script that makes a static image in its fixed position

    i need a css script that exactly does like this, http://www.dynamicdrive.com/dynamicindex4/logo.htm unfortunately this is javascript.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I dont think thats possible with only CSS.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there DJCyrus81,

    have a look at this example, it may suit your requirements...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    p {
        width:660px;
        margin:20px auto;
        line-height:1.8;
        text-align:justify;
     }
    #links img {
        position:fixed;
        border:0;
     }
    #myimage0 {
        top:10px;
        left:10px;
     }
    #myimage1 {
        top:10px;
        right:10px;
     }
    #myimage2 {
        bottom:10px;
        left:10px;
     }
    #myimage3 {
        right:10px;
        bottom:10px;
     }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html,body {
        margin:0;
        padding:0;
        height:100%;
        overflow:auto;
     }
    #links img {
        position:absolute;
     }
    #myimage1,#myimage3 {
        right:20px;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="links">
     <a href="http://www.dynamicdrive.com"><img id="myimage0" src="http://i40.tinypic.com/e7xmvm.gif" alt="dd logo"></a>
     <a href="http://www.dynamicdrive.com"><img id="myimage1" src="http://i40.tinypic.com/e7xmvm.gif" alt="dd logo"></a>
     <a href="http://www.dynamicdrive.com"><img id="myimage2" src="http://i40.tinypic.com/e7xmvm.gif" alt="dd logo"></a>
     <a href="http://www.dynamicdrive.com"><img id="myimage3" src="http://i40.tinypic.com/e7xmvm.gif" alt="dd logo"></a>
    </div>
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p><p>
    Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus 
    elementum elit, vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc 
    dolor quam, venenatis vel, gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. Nunc 
    pede orci, elementum eget, facilisis id, viverra vel, leo. Duis eu mauris eget felis 
    lobortis iaculis. Etiam elit metus, posuere ut, tempor eget, commodo eget, leo. Vivamus 
    elementum. Quisque fringilla orci sit amet nulla.
    </p>
    
    </body>
    </html>
    
    coothead

  4. The Following User Says Thank You to coothead For This Useful Post:

    Beverleyh (08-03-2010)

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Ah, position:fixed;

    I never thought to use that one!
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there Beverley,
    Ah, position:fixed;

    I never thought to use that one!
    It is probably what is required in this thread - ( same OP )...


    coothead

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Probably, now you mention it.

    The first post (of the thread you linked to), before being edited, swayed me into the javascript realm and then with the "thanks" feedback I assumed it was a closed book.

    Just goes to show that you have to step back out of the box sometimes and look at thing afresh
    Last edited by Beverleyh; 08-03-2010 at 11:59 AM. Reason: referenced the linked posted by coothead so the comment makes more sense
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there Beverley,

    The DD script referred to by the OP appears to be rather old, ( FF1+ IE6+ Opr8+ ) , so perhaps a pure css solution had not been envisaged then.

    coothead

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Hi again,

    well I can tell you, I've come away from this post shaking my head in disbelief (in a good way) that there is such a simple solution. It seems so obvious now you've laid it out for me. In fact, I think it will solve a few other project problems that I have created for myself with javascript! ha, ha
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Bookmarks

Posting Permissions

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