locked
Ipad : Landscape / portrait mode RRS feed

  • Question

  • User-104882508 posted

    hy all.

    I am creating a web application using html5 and javascript,

    It works fine on most of the browsers but i have an issue concerning the ipad landscape / portrait mode:

    I want when my site is opened in landscape mode, automatically the container and all the features will be automatically centered , coz i am using a shadowbox.js file, and i want it to be centered as well. Till now, if i have opened a video using the shadowbox effect, and changed viewport mode ( tilted my ipad 2), the view will automaticaly zoom.

    In short, i want a way using Css3 that automatically centers all the elements and keep them centered, i have used :

     
    @media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){
    
    body{
    
    background-color:#0376b7;
    
    }
    
    #container {
     width:768px;
     background-color:#0376b7;
      
    }
    
    
    #center{
        ;
        float: center;
    	left:18%;
    	margin-right:auto;
    	margin-left:auto;
    	margin-top:25%;
    	margin-bottom:auto;
    	z-index :1;
    	min-width:768px;
    	background-color:#0376b7;
    	}
    	
    	
    #container2{
    border:1px groove black; 
    width: 768px;
    opacity:1;
    filter:alpha(opacity=40);
    outline: 1px dashed #98abb9;
    
    outline-offset: -5px;
    background-color: #88aff7;
    
    	height: 75px;
    	/*
    	width: 400px;
    	margin: 100px auto;
    	
    */
    /*shadow*/
    -webkit-box-shadow: 2px 2px 2px #000;
    -moz-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    min-width:768px;
    max-width:1000px;
    }
    
    #container2:hover
    {
    
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
     box-shadow: 1px 1px 5px #999;
    
    }
    	
    .arrowlistmenu{
    width: 768px; /*width of accordion menu*/
    }
    
    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    text-shadow:0 1px 0 #000000;
    background: black url(pic/titlebar.png) repeat-x center left;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    margin-right:auto;
    margin-left:auto;
    }
    
    
    .arrowlistmenu .menuheader2 { /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    text-shadow:0 1px 0 #000000;
    background: black url(pic/titlebar1.png) repeat-x center left;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    margin-right:auto;
    margin-left:auto;
    }
    }

    Plz help

    Saturday, April 7, 2012 2:13 AM

All replies