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 - <style type="text/css">
-
*{margin:0px; padding:0px;}
-
#multi span{position:absolute;
-
top:2%;
-
left:40.5%;
-
color: #e1da0e;
-
font-size:450%;
-
-
}
-
#multi{
-
background-image: url(menu_bckg.jpg) , url(content_bckg.jpg), url(logo_bckg.jpg), url(main_bckg.jpg), url(c.jpg);
-
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
-
background-size:54% 5%, 54% 80.3%, 54% 20%, 66% 100%, cover;
-
background-position:50.1% 15.6%, bottom, center top, center, left top;
-
position: absolute;
-
top:0px;
-
left:0px;
-
width: 100%;
-
height: 100%;
-
}
-
#navcon{position:absolute;
-
top:14.7%;
-
left:23.5%;
-
}
-
#nav{width:377px; height:50px;position:relative;color:#1e7909;
-
font-family:ariel; margin:0px auto;font-size:1em;}
-
#nav ul{list-style-type:none;}
-
#nav ul li{float:left;position:relative;}
-
#nav ul li a{solid #1e7909;padding:6px;display:block;
-
text-decoration:none;text-align:center;}
-
#nav ul li ul{display:none;}
-
#nav ul li a:hover{background:#1e7909;color:#ecf7ea;}
-
#nav ul li:hover ul{display:block; position:absolute;}
-
#nav ul li:hover ul a:hover{background:#bcee68;color:black;}
-
#nav ul li:hover ul li a{background:#ffe4e1;color:black;display:block;
-
border-bottom:1px solid #1e7909;border-right:none;width:85px;}
-
.top{border-top:1px solid #1e7909;border-left:1px solid #1e7909;
-
border-right:1px solid #1e7909}
-
#img{position:absolute;
-
top:70px;
-
left:30px;}
-
-
#name{position:absolute;
-
top:235px;
-
left:18px;
-
}
-
#img{position:absolute;
-
top:190%; left: 10%;}
-
#img2{position:absolute;
-
top: 500%; left:10%;
-
}
-
#img3{position:absolute;
-
top:810%; left:10%;}
-
#img4{ position: absolute;
-
top:190%;
-
left:150%;
-
}
-
#img5{position:absolute;
-
top:500%; left:150%;}
-
#img6{position: absolute;
-
top:810%; left:150%;}
-
#img7{position: absolute;
-
top:190%; left:80%;}
-
#img8{position: absolute;
-
top:500%; left:80%;}
-
</style>
-
</head>
-
<body>
-
-
<div id="multi"><span><font face="coca cola ii">Golden Era</font></span></div>
-
<div id="navcon">
-
<div id="nav">
-
<ul>
-
<li><a href="multi.html">Home</a></li>
-
<li><a href="#">Miscellaneous</a>
-
<ul>
-
<li class="top"><a href="#">Duets</a></li>
-
</ul>
-
</li>
-
<li><a href="#">About Us</a></li>
-
<li><a href="#">Contact Us</a></li>
-
</ul>
-
</div>
-
<a href="rafi.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</a>
-
<a href="music.html">
-
<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>
-
</div>
-
</a>
1 1729
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
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. ...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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...
| |