Why My Div-s dont auto resize when i shrink the browser?

+1 vuk knezevic · July 10, 2014
PLEASE HELP when i shrink the webpage you cant see the content on smaller resolutions except when scrollingI made a website with images and i want them to auto resize or fit the browser while i resize it but i can't do it i tried everything Here's The Code"


<!doctype html>
<html>
<head>
<style type="text/css">










body { 
background-image:url(http://cdn1.tnwcdn.com/files/2010/05/mountain2.jpg)


;}
#menubar {
position:absolute;
top:0px;
left:260px;








}




#menubar2 {
position:absolute;
top:0px;
left:435px;
min-height:50px;




}


#menubar3 {


position:absolute;
top:0px;
left:610px;






}
#searchbar {
position:absolute;
top:0px;
left:785px;






}
#menubar:hover {
content:url(http://s11.postimg.org/5nv3q1nxf/kliknmuta.jpg);
width:175px;
height:auto;
min-height:50px;
}
#menubar2:hover {
content:url(http://s11.postimg.org/5nv3q1nxf/kliknmuta.jpg);
width:175px;
height:auto;


}
#menubar3:hover {
content:url(http://s11.postimg.org/5nv3q1nxf/kliknmuta.jpg);
width:175px;
height:auto;
}
#searchbar:hover {
content:url(http://s28.postimg.org/5wwwf5opp/searc_hover.jpg);
width:175px;
height:auto;




}
#lognpass {
position:absolute;
top:0px;
left:0px;


}
#sidebar {
position:absolute;
top:114px;
left:-1px;


}
#mainbar {
position:absolute;
top:73px;
left:257px;


}
#sidebar2 {
position:absolute;
top:753px;
left:-1px;




</style>
</head>
<title>
</title>
<body>
<div id="menubar"><img  width="175" src="http://s12.postimg.org/y95agiwwt/Untitled_2.jpg"></img></div>
<div id="menubar2"><img width="175" src="http://s12.postimg.org/y95agiwwt/Untitled_2.jpg"></img></div>
<div id="menubar3"><img width="175" src="http://s12.postimg.org/y95agiwwt/Untitled_2.jpg"></img></div>
<div id="searchbar"><img width="175" src="http://s28.postimg.org/eah8um0p9/Untitled_23.jpg"></img></div>
<div id="lognpass"><img width="260" height="115" src="http://s28.postimg.org/imjpzx0r1/11111.jpg"></img></div>
<div id="sidebar"><img width="262" src="http://s16.postimg.org/5u3290y11/sidebar_2.png"></img></div>
<div id="mainbar"><img width="706" height="1080" src="http://s27.postimg.org/e93odo6z7/mainbar.png"></img></div>
<div id="sidebar2"><img width="262" height="399" src="http://s16.postimg.org/5u3290y11/sidebar_2.png"></img></div>
</body>
</html

Post a Reply

Replies

Oldest  Newest  Rating
+1 Franz Schmidt · July 11, 2014
I think I didn't get your problem: 
Is it about the background of the whole page or just the different pictures?

And you should use the flexible box model...
Bucky made some nice videos about it
For instance: https://buckysroom.org/videos.php?cat=43&video=18833
0 vuk knezevic · July 15, 2014
Thank You
0 Abdullah Nauman · July 15, 2014
a lot of times that problem fixes when i set the sizes to % instead. That also helps make the website mobile friendly
  • 1

HTML / CSS / Web Design

107,070 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators