css - div position in differents screens -


i have problem in web design assigment.

i can't make 4 divs appear in specific location in screen.

also need mention of 4 divs need overlap used z-index. when run site on different screens position change although used percents.

this css code (welcome, register, login, game div classes):

.welcome  {      position:absolute;     top:28%;     right:9%;     width:960px;     height:660px;      z-index: 3; }  .register  {      position:absolute;     top:28%;     right:9%;     width:960px;     height:660px;      z-index: 2;      }  .login  {      position:absolute;     top:28%;     right:9%;     width:960px;     height:660px;      z-index: 1; }  .game  {      position:absolute;     top:28%;     right:9%;     width:960px;     height:660px;      z-index: 0; } 

the problem top , left properties work elements if these elements' (doesn't have direct) parent position set relative.

so can either set body { position: relative;} or create wrapper div around 4 divs , set position relative.

here fiddle code need; can position elements wish, , divs' margins screensize-adapted.

http://jsbin.com/ogexev/1/edit

note: changed width/ height properties bit (divided 3) make them fit screen.

  • ps: if many elements have same properties, you're better off specifying them in 1 class. that's why added class .common in fiddle.

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -