473,323 Members | 1,560 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

Positioning of content in browser

Hello...I m making a website in html/css......But there is a huge prob in it that when ever i make the size of my browser window small all the pictures in my website change its position,,like they all shift slightly towards right...I have made my dackground by multiple background positioning property in css3....when i make my browser window small all my images move e toward right but my background remains at the same position which results into some images remain on the background else on the white screen...plzz help me out..I have to sublit my project as soon as possible..here is my code

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. *{margin:0px; padding:0px;} 
  3. #multi span{position:absolute;
  4. top:2%;
  5. left:40.5%;
  6. color: #e1da0e;
  7. font-size:450%;
  8.  
  9. }
  10. #multi{
  11. background-image: url(menu_bckg.jpg) , url(content_bckg.jpg), url(logo_bckg.jpg), url(main_bckg.jpg), url(c.jpg);
  12. background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  13. background-size:54% 5%, 54% 80.3%, 54% 20%,  66% 100%, cover;
  14. background-position:50.1% 15.6%, bottom, center top, center, left top;
  15. position: absolute;
  16. top:0px;
  17. left:0px;
  18. width: 100%;
  19. height: 100%;
  20. }
  21. #navcon{position:absolute;
  22. top:14.7%;
  23. left:23.5%;
  24. }
  25. #nav{width:377px; height:50px;position:relative;color:#1e7909;
  26. font-family:ariel; margin:0px auto;font-size:1em;}
  27. #nav ul{list-style-type:none;}
  28. #nav ul li{float:left;position:relative;}
  29. #nav ul li a{solid #1e7909;padding:6px;display:block;
  30. text-decoration:none;text-align:center;}
  31. #nav ul li ul{display:none;}
  32. #nav ul li a:hover{background:#1e7909;color:#ecf7ea;}
  33. #nav ul li:hover ul{display:block; position:absolute;}
  34. #nav ul li:hover ul a:hover{background:#bcee68;color:black;}
  35. #nav ul li:hover ul li a{background:#ffe4e1;color:black;display:block;
  36. border-bottom:1px solid #1e7909;border-right:none;width:85px;}
  37. .top{border-top:1px solid #1e7909;border-left:1px solid #1e7909;
  38. border-right:1px solid #1e7909}
  39. #img{position:absolute;
  40. top:70px;
  41. left:30px;}
  42.  
  43. #name{position:absolute;
  44. top:235px;
  45. left:18px;
  46. }
  47.  #img{position:absolute;
  48. top:190%; left: 10%;}
  49.  #img2{position:absolute;
  50. top: 500%; left:10%;
  51. }
  52.  #img3{position:absolute;
  53. top:810%; left:10%;}
  54.  #img4{ position: absolute;
  55. top:190%;
  56. left:150%;
  57. }
  58.  #img5{position:absolute;
  59. top:500%; left:150%;}
  60.  #img6{position: absolute;
  61. top:810%; left:150%;}
  62.  #img7{position: absolute;
  63. top:190%; left:80%;}
  64.  #img8{position: absolute;
  65. top:500%; left:80%;}
  66. </style>
  67. </head>
  68. <body>
  69.  
  70. <div id="multi"><span><font face="coca cola ii">Golden Era</font></span></div>
  71. <div id="navcon">
  72. <div id="nav">
  73. <ul>
  74. <li><a href="multi.html">Home</a></li>
  75. <li><a href="#">Miscellaneous</a>
  76. <ul>
  77. <li class="top"><a href="#">Duets</a></li>
  78. </ul>
  79. </li>
  80. <li><a href="#">About Us</a></li>
  81. <li><a href="#">Contact Us</a></li>
  82. </ul>
  83. </div>
  84. <a href="rafi.html">
  85. <div id="img"><input type=image height="120px" width="120px" border="4px" src="rafi.jpg"/><br><b><i><u><font size=3>Mohammad Rafi</i></u></b></font></div>
  86. </a>
  87. <a href="music.html">
  88. <div id="img2"><input type=image height="120px" width="120px" border="4px" src="kishor.gif"/><br><b><i><u><font size=3>Kishore Kumar</i></u></b></font></div>
  89. </a>
  90. <a href="music.html">
  91. <div id="img3"><input type=image height="120px" width="120px" border="4px" src="manna.jpg"/><br><b><i><u><font size=3>Manna Dey</i></u></b></font></div>
  92. </a>
  93. <a href="music.html">
  94. <div id="img4"><input type=image height="120px" width="120px" border="4px" src="mukesh.jpg"/><b><i><u><font size=3>Mukesh Chand</i></u></b></font></div>
  95. </a>
  96. <a href="music.html">
  97. <div id="img5"><input type=image height="120px" width="120px" border="4px" src="mahinder.jpg"/><b><i><u><font size=3>Mahinder Kapoor</i></u></b></font></div>
  98. </a>
  99. <a href="music.html">
  100. <div id="img6"><input type=image height="120px" width="120px" border="4px" src="bhupen.jpg"/><b><i><u><font size=3>Bhupen Hazarika</i></u></b></font></div>
  101. </a>
  102. <a href="music.html">
  103. <div id="img7"><input type=image height="120px" width="120px" border="4px" src="lata.jpg"/><b><i><u><font size=3.5>Lata Mangeshkar</i></u></b></font></div>
  104. </a>
  105. <a href="music.html">
  106. <div id="img8"><input type=image height="120px" width="120px" border="4px" src="asha.jpg"/><b><i><u><font size=4>Asha Bhosle</i></u></b></font>
  107. </div>
  108. </a>
Jul 6 '12 #1
1 1729
ariful alam
185 100+
You are saying that your background remains still but images change position to right.
but the thing is:
Your background is going smaller in width. but your all the images remains still.
you set your images in absolute position and u fixed those top and left position. that's why whenever you restore your browser size, the images still in their own position that you fixed with top and left value.
Jul 7 '12 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

9
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...
7
by: delerious | last post by:
I just found a bug that's related to positioning in IE 5.5 (could someone please tell me if this bug exists in IE 6, and if so, if my solution works in that browser?). I don't know if this bug has...
8
by: Bryan R. Meyer | last post by:
Hello Everyone, I am in the process of redesigning my web page and I ran into a problem while using CSS. I have laid out my web page with auto margins so that the content is centered. I assume...
1
by: Frances Del Rio | last post by:
don't know if I'll succeed, have spent a lot of time already trying to figure this out: I would like to position a footer (co. name, address, etc..) at the bottom of browser page, in such a way...
1
by: RWC | last post by:
Hey Folks! I'm having trouble with an asp page. First off, I'm new to the html / asp world, but not to software development. I'd like to minimize or "normalize" the site, so I'm trying to use...
1
by: Charles Harrison Caudill | last post by:
with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...
1
by: Fred Nelson | last post by:
Hi: I'm working on one of my first web applications in asp.net 2.0 and I'm having a problem with absolute versus relative positioning of controls that I place on pages that use master pages with...
4
by: celoftis | last post by:
I've got html page with has a fixed height - there are five buttons on the page. The page has a fixed, known height - but the width can change. The five buttons should be arranged on the page as...
3
by: LayneMitch | last post by:
Hello everyone. I'm designing a site for a friend of mine and I'm having a few issues. First off, I'm noticing that there is a difference between the default line- heights of IE and...
4
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.