SamuelCBird Posted December 6, 2011 Share Posted December 6, 2011 Hi! I'm new here, and I'm very new to CSS so I'm sorry if I ask silly questions! I've been working on making a website for a new business, and even though only the 'Coming Soon' page is up, it still demonstrates my problems. http://www.youmightlikethis-music.com I tried to use CSS to make sure the background image fits to whatever size the screen is, but on big screens it is too short, and on smaller screens if you scroll down there is a white bar which I can't get rid of. If someone could help me with this I'd be very appreciative! Thank youu Link to comment Share on other sites More sharing options...
SamuelCBird Posted December 6, 2011 Author Share Posted December 6, 2011 Here is the code for the website. Sorry. HTML: <!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" /><title>You Might Like This</title><link rel=stylesheet href="stylesheet3.css" type="text/css" /></head><body><div id="header-wrap"><div id="header_logo" align="center"><img src="name.png" width="600" /></div></div><div id="wrap"><div align="center"><img src="comingsoon.png" /></div></div> <div id="footer"> <p style="color:#fff1b5; margin:0em ; text-align:center;" ><span class="center"> </span></p> <p style="color:#fff1b5; margin:1em 0; text-align:center;" > <span class="center">Copyright 2011, Karrisam. <a href=" "></a></span> </p></div><div align="center"><img src="background.jpg" class="bg"></div></body></html> @charset "UTF-8";/* CSS Document */#header-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 15%;background-color:#4d0000; }#header_logo {position:relative;}#comsoon {position:relative;}a:link {color:#fff1b1;} /* unvisited link */a:visited {color:#fff1b1;} /* visited link */a:hover {color:#fff1b1;} /* mouse over link */a:active {color:#fff1b1;} /* selected link */a:link {text-decoration:none;} /* unvisited link */a:visited {text-decoration:none;} /* visited link */a:hover {text-decoration:underline;} /* mouse over link */a:active {text-decoration:underline;} /* selected link */.table, td, tr{font-family:"Champagne & Limousines";color:white;border:0px solid;text-align:center;font-size:25px;color:#4d0000;table-layout:auto;max-width:180px;}.center {margin-bottom:auto;margin-left:auto;margin-right:auto;margin-top:auto;}* { margin:0; padding:0; }html, body, #wrap { height: 100%; margin-top:5%; }#wrap {height: auto; min-height: 81.7%;}#main { padding-bottom: 80px;} /* must be same height as the footer *//**Background**/.bg { width: 100%; height: 90%; position: absolute; top: 0; left: 0; z-index: -5000;}#footer { position:relative; margin-top: -93px; /* negative value of footer height */ height: 94px; clear:both; background-color:#4d0000; color:fff1b5; font-family:"Champagne & Limousines";}/******* CLEAR FIX********/.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */ You can see what I'm trying to achieve, but it just looks a bit pants and doesn't work! Link to comment Share on other sites More sharing options...
SamuelCBird Posted December 6, 2011 Author Share Posted December 6, 2011 Here is also a screen shot of how the website appears on an iPhone. Why is it scrolled up, and why is there this block of white at the bottom? Someone PLEASE help me! http://cl.ly/3e3A1i2b3Q463P3c3E0n Link to comment Share on other sites More sharing options...
Fistenharden Posted December 7, 2011 Share Posted December 7, 2011 margin-top: -93px; /* negative value of footer height */ try changing this to -96px also this grid system may help http://960.gs/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.