Databases
StackOverflow2013
Postsdbo
POhorizontal CSS transition with fixed elements?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhorizontal CSS transition with fixed elements?
    primarykey
    data
    text
    <p>I'm working on a multidevice web page, i want to make a CSS transition of a div (.carrousel) witch contains 3 other div (.bloc1 to 3) positionned horizontally using float left First, only div 2 and 3 are shown (negatif left on .carrousel and overflow hidden on the container .global) A clic on the link 'Show blocs {1, 2}' moves the .carousel to right and shows these blocs To ensure the transition happens smoothly i've adopted the HTML structure below. The problem is that the fixed elements are'nt positionned correctly in Chrome, IE8, Android 4.03 et 3.02 But under Firefox 15.0, IE9 and also IE7! things are working well... Any suggestion on changing the HTML structure is welcome as the transition effect remain untouched... But i don't want to use some hacks or specific CSS by device</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /&gt; &lt;style type="text/css"&gt; * { margin:0; padding:0; } a img { border:none; } body { font-family:Tahoma; font-size:12px; } p { margin:10px 0; } .global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; } .carrousel { width:1660px; overflow:hidden; position:relative; top:0; -webkit-transition: left .2s ease-in-out; -moz-transition: left .2s ease-in-out; -ms-transition: left .2s ease-in-out; -o-transition: left .2s ease-in-out; transition: left .2s ease-in-out; } .bloc { float:left; padding:5px; margin:5px; text-aligh:center; } .bloc1 { width:700px; height:400px; background-color:#F00; } .bloc2 { width:200px; height:300px; background-color:#999; } .nav { position:fixed; z-index:2; background-color:#F90; width:200px; } .nav a { display:block; margin:10px 0; } .bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; } .header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; } .list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; } .carrousel.showblocs23 { left:-720px; } .carrousel.showblocs12 { left:0; } .carrousel.showblocs12 .header { position:relative; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;title&gt;blocr&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="global"&gt; &lt;div class="carrousel showblocs23"&gt; &lt;div class="bloc bloc1"&gt; bloc 1 &lt;/div&gt; &lt;div class="bloc bloc2"&gt; bloc 2 &lt;div class="nav"&gt; fixed nav&lt;br /&gt; &lt;a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;"&gt; Show blocs {1, 2} &lt;/a&gt; &lt;a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;"&gt; Show blocs {2, 3} &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="bloc bloc3"&gt; bloc 3 &lt;div class="header"&gt; bloc 3 header fixed &lt;/div&gt; &lt;div class="list"&gt; bloc 3 long list &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /carrousel --&gt; &lt;/div&gt;&lt;!-- /global --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2026038
    1. USuser2026038
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CO1. i agree, but when "left" and "top" properties are not specified, a fixed element is first positionned relative to the parent element... and then it does'nt scroll with the window... now i've discovered that this first positioning depends on the browser interpretation... 2. i'm using "z-index" property to place my fixed elements in the top of the layers when they are superposed...
      singulars
      1. POhorizontal CSS transition with fixed elements?
      1. USuser2026038
    2. COi found the solution for this problem, i simply used "margin-left" instead of "left" property to place the .carousel, so just update the css classes .carrousel, .carrousel.showblocs23 and .carrousel.showblocs12 using "margin-left" instead.
      singulars
      1. POhorizontal CSS transition with fixed elements?
      1. USuser2026038
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload