wright67uk Posted June 20, 2011 Share Posted June 20, 2011 Im using a background image in my #Logo div. If i minimise my browser window #bannerright will overlap my image. I dont want this to happen as the image is a logo that needs to be displayed all of the time. Is my only way around this to place the image in my html opposed to as a bg image in my css? What is the usual practice when you want a website to look good in different monitor/browser sizes? Ive used a 100% width in my banner as I want it to span the whole screen at all times, however things such as my google map have fixed widths. Should I be combining % in one part of my page and then px in another. Please any suggestions. I have a test page www.1pw.co.uk/b.php. Any suggestions /constructive critisism welcome. Many thanks from an amateur wanting to learn. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="header.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="banner"> <div id="bannerleft"></div> <div id="logo"></div> <div id="bannerright"><div id="navbar" title=""> <div id="b1"><p class="centre"><a href="index.html">Directory</a></p></div> <div id="b2"><p class="centre"><a href="business.html">Add Your Business</a></p></div> <div id="b3"><p class="centre"><a href="contact.html">Contact Us</a></p></div> </div><!-- end of navbar--> </div><!--end of bannerright--> </div><!-- end of banner--> @charset "utf-8"; /* CSS Document */ body { color:#FFF; font-family:Tahoma, Geneva, sans-serif; } #listhold { width:1000px; height:auto; margin-left:auto; margin-right:auto; margin-top:20px; background-color:#06F; padding-left:10px; } #b1 {margin-right:70px; margin-left:70px; height:40px; float:left} #b2 {margin-right:70px; height:40px; float:left} #b3 {margin-right:70px; height:40px; float:left} a:link {color: #FFF;text-decoration: none;} a:visited {text-decoration: none;color: #FFF;} a:hover {text-decoration: none;color: #CCC;} a:active {text-decoration: none;color: #CCC;} a.blue {color:#06F;} p.centre {color:#FFF; margin-top:2px; text-align:center;} #banner { height:80px; width:100%; margin-top:30px; } #bannerleft { background-color:#36F; height:25px; width:10%; float:left; margin-top:13px; } #logo { height:80px; width:22%; background-image:url(i-stevenage.png); background-repeat:no-repeat; float:left; overflow:visible; } #bannerright { background-color:#36F; height:25px; width:68%; float:left; margin-top:13px; } Quote Link to comment https://forums.phpfreaks.com/topic/239937-protecting-background-images/ Share on other sites More sharing options...
cssfreakie Posted June 21, 2011 Share Posted June 21, 2011 as you can see in your css you gave body a width of 100%. But since it is not wrapped in a div with a fixed width, it will use the window width as a reference. So if you make a window size of 10 px #banner will be 10pixels. Now as i sneaky tried to tel in the sentence above you require a reference point when working with percentages. For instance a wrapper that has a fixed width. But another thing could be to assign a min-width to en element. That way it can increase in size, but when the window is resized and meets that min-width, it shows a scroll bar. As far as making sure websites look the same in most browsers. Have a look at the sticky of the css forum and apply those 6 points. besides that make sure your markup and css is valid. This seems logical but most people fail to do so. Quote Link to comment https://forums.phpfreaks.com/topic/239937-protecting-background-images/#findComment-1232543 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.