Jump to content

Search the Community

Showing results for tags 'floating'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (PhpStorm, VS Code, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 2 results

  1. I have 2 menu div's floating to the right of a canvas. They menus are designed to slide out on hover and slide back to normal afterwards. The problem is that when I hover on the second div, the location (position) of the first div shifts with it. Example of it in action is at: http://jsfiddle.net/Xb2q9/ I know it has to do with the order that the divs are listed and position: relative but haven't managed a work around. My HTML <table class="unpadded-table"> <tr> <td> <div id="screen"> <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas> <div id="firstmenu"> <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div> </div> <div id="secondmenu"> <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div> </div> </div> </td> </tr> </table> My CSS: #firstmenu { float:right; background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top; padding-left: 10px; ; margin-top: 15px; padding-top: 0px; width: 10px; height: 180px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; display: inline-block; } #secondmenu { float:right; background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top; padding-left: 10px; margin-left: 0px; padding-top: 0px; width: 10px; height: 250px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; margin-top: 250px; display: inline-block; } #firstmenucontents{ background: #ffffff; margin-right: 15px; margin-top: 0px; margin-left:0px; width: 135px; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; opacity:0.0; border:1px solid black; float:left; } #firstmenu:hover{ width: 150px; opacity:1.0; } #secondmenu:hover{ width: 150px; opacity:1.0; } #firstmenucontents:hover, #secondmenucontents:hover { opacity:1.0; width: 135px; } .example { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px #000 solid; float: left; width: 655px; margin-left: 100px; width: }
  2. In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari I just need the OR image to say in the same spot to matter what browser or window size is used here is the code that Im currently using <div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px"> <img src="" alt="" /> </div> Please help thanks
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.