|
CSS - Background Stops After The Last Line Of Content Instead Of Filling The Screen
I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com
Similar TutorialsHi: I have the following in My CSS file PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } #body2 { width: 256px; padding: 10px; float: left; background: url('images/body2_bg.gif'); } #body1 { width: 654px; float: left; padding: 10px; } The intention is that the main body of the web page is in the "#body" ID. That section contains two ID's, "#body2" is the menu which is narrower and floats left, "#body1" is wider and floats right. The issue is that #body2 is supposed to have a darker color background and #body1 is supposed to have a white background. This works fine except when the length of #body1 exceeds the length of #body2, then there is white space at the bottom of the #body2 "column". Can anyone suggest a fix for this so that the entire left column is a color, regardless of the page length of the #body2? Thanks Thanks Take a look at the main menu on this site: http://www.infund.net Why doesn't the grey stretch across the entire table? Here's the code I have: Code:
a.mainlevel:link, a.mainlevel:visited {
width: 100%;
background: url(../images/bluebug.png) no-repeat;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-size: 11px;
text-align: left;
padding-left: 30px;
background-color: #c2c2c2;
margin-bottom: 1px;
white-space: nowrap;
text-align:left;
}
a.mainlevel:hover, a.mainlevel:hover {
text-decoration: underline;
background: url(../images/redbug.png) no-repeat;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #8B1414;
text-align: left;
padding-left: 30px;
background-color: #c2c2c2;
width: 100%;
white-space: nowrap;
margin-bottom: 1px;
text-align:left;
}
Hi all, I would be very grateful if someone could help me out with a coding problem. Basicaly, I have two columns and I want both to fill with the background colours with the same height. My sample coding is below. (NOTE: Ive had to remove the urls from the DOCTYPE and <html>, please replace with correct code). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml" > <head><title>100% Height CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #all{ WIDTH: 950px; PADDING-TOP:0px; MARGIN: 3px auto 0px; POSITION: relative; BACKGROUND-COLOR: #fff; FLOAT: left; } #leftside{ FLOAT:left; WIDTH:169px; MARGIN: 0px; PADDING: 0px; BORDER-RIGHT: 1px solid #999; POSITION: relative; BACKGROUND-COLOR: #ededed; } #rightside{ BORDER: 0px solid #000; WIDTH:775px; FLOAT:left; POSITION: relative; MARGIN: 0px 0px 0px 5px; BACKGROUND-COLOR: #F4CDD8; } </style> </head> <body> <div id="all"> <div id="leftside">a<br>b<br></div> <div id="rightside">c<br>d<br>e</div> <div> </body> </html> In the above example I would like the "leftside" div to stretch to the same height height as the "rightside" div filling the area up with the "leftside" background colour and also extending the 1px border. All help much appreciated. Thanks Soph I've been working on converting to css for table-like layout. I have the three column variety with a header. Around all 4 is a container to keep things ship shape. My issue is that even though I've specified a background colour for the container it doesn't seem to override the body color making the column lengths uneven. Code: <!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" xml:lang="en" lang="en">
<head>
<title>mrhodges.net: A web site for Mr. Hodges classes</title>
<style type="text/css" >
body { background-color: #014e82;
text-align: center;
font-family: Georgia, serif;
}
#container { width: 90%;
margin: 10px auto;
background-color: #ffffff;
text-align: left;
}
#banner { background-color: #014e82;
padding: 1px;
}
#banner p.title { font-size: 2.5em;
color: #ffffff;
background-color: #014e82;
text-align: center;
margin: 0;
padding: 0 0 5px 0;
}
#banner ul { list-style-type: none;
text-align: center;
padding: 0 0 10px 0;
margin: 0;
font-family: Verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
}
#banner ul li { display: inline;
}
#banner ul li a { text-decoration: none;
padding: 0;
}
#banner a:link { color: #ffffff;
padding: 0;
}
#banner a:visited { color: #ffffff;
padding: 0;
}
#banner a:hover { color: #ffffff;
text-decoration: underline;
padding: 0;
}
#banner a:active { color: #54b818;
text-decoration: underline;
padding: 0;
}
#leftnav { float: left;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#leftnav ul { margin: 0;
padding: 0;
list-style-type: none; }
#leftnav a { display: block;
color: #049;
background-color: #fff;
text-decoration: none;
padding: 0 0 0 5px;
}
#leftnav a:hover { background-color: #ddd;
color: #049;
}
#rightnav { float: right;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#middle { margin-left: 160px;
margin-right: 160px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<p class="title">mrhodges.net</p>
<ul>
<li><a href="http://www.cbc.ca/news/">CBC News</a> |</li>
<li><a href="http://dictionary.reference.com/">Dictionary</a> |</li>
<li><a href="http://www.fmcsd.ab.ca">FMCSD</a> |</li>
<li><a href="http://www.google.ca">Google</a> |</li>
<li><a href="http://www.mymcmurray.com">mymcmurray</a> |</li>
<li><a href="http://www.theweathernetwork.com/weather/cities/can/Pages/CAAB0124.htm">Weather</a> |</li>
<li><a href="http://en.wikipedia.org/wiki/Main_Page.html">Wikipedia</a></li>
</ul>
</div>
<div id="leftnav">
<ul>
<li><a href="overview.html">Course</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="outline.html">Outlines</a></li>
<li><a href="outline.html#modules">Modules</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="rap.html">RAP Program</a></li>
</ul>
<br />
<ul>
<li>Safety</li>
<li>Consent</li>
<li>.pdf form</li>
</ul>
<br />
<ul>
<li><a href="dates.html">Dates</a></li>
<li><a href="dates.html#term">Term</a></li>
<li><a href="dates.html#plc">PLC Days</a></li>
<li><a href="dates.html#holi">Holidays</a></li>
<li><a href="dates.html#inter">Interviews</a></li>
<li><a href="dates.html#mod">Module</a></li>
<li><a href="dates.html#exam">Exam</a></li>
</ul>
<br />
<ul>
<li><a href="http://www.mrhodges.blogspot.com">Daily Log</a></li>
<li><a href="http://www.mrhodges.blogspot.com">Class Log</a></li>
</ul>
<br />
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">School</a></li>
<li><a href="contact.html">Mr. Hodges</a></li>
</ul>
<br />
</div>
<div id="rightnav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="middle">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
</div>
</div>
</body>
</html>
Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset. Here is a live link: storrepictures.weebly.com/projects.html -Please find an image of the resulting problem he http://i.imgur.com/YnTS8.png -This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png Here is my CSS wrapper code: Code: #wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrappertop">
<div id="wrapper">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
<div id="wrappertbtm">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to gain both valid HTML 4.01 and CSS for a site I'm working on. I've completed the HTML without a problem, but I've run intoa problem with the CSS. My CSS file has three 'background-image' lines within it, and w3 is telling me the below: Quote: * Line : 9 (Level : 1) You have no color with your background-color : body * Line : 77 (Level : 1) You have no color with your background-color : #innerbase * Line : 82 (Level : 1) You have no color with your background-color : .c1 The lines mentioned are the lines of the 'background-color' attributes. Those lines consist of, 'background-color: #HEXVALUE;'. I can't find a problem with the line. Here's the full CSS document - if anybody could point out something I'm doing wrong that would cause this error I'd greatly appreciate it. css Code: Original - css Code body { font-family: arial, "lucida console", sans-serif; font-size: 11px; text-align: center; background-image: url("img/back.gif"); background-position: bottom left; background-attachment: scroll; background-repeat: repeat-x; background-color: #FFFFCC } img { vertical-align: bottom; } table { border: 0px; padding: 0px; font-family: arial, "lucida console", sans-serif; font-size: 11px; } #base { border-left: 6px solid #64644c; border-right: 2px solid #64644c; border-bottom: 2px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; background-color: #cbcc98; } .mbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; padding: 2px; } #sbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tab.gif"); background-repeat: no-repeat; padding: 2px; } .obutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tabover.gif"); background-repeat: no-repeat; padding: 2px; cursor: default; } #mtd { border-top: 1px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } #prices td { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 20%; } #prices th { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 40%; text-align: left; } #innerbase { background-color: #99cc33; border: 1px solid #6a6a50; padding: 5px; } .c1 { background-color: #86b32d; } .copyrights { text-align: center; }
If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align:right;
font-weight: none;
background-color: #ffffff;
line-height:1.5;
letter-spacing:-0.02em;
}
I'm in the middle of learning CSS and have come along alright for the most part. I have two small questions though. 1) The page I'm working on is http://www.mcconaha.com/csscenter.php. It's a three-column layout, with div boxes holding various links down the right and left sides of articles that will be posted. There is a main div that all of this sits in, and that expands just fine to whatever amount of content the article may have. But if the article were to have just a samll amount of content, the div wouldn't expand to the minimum height established by the link boxes on the right and left. How do I make that happen? I just need the light grey box to expand down to the lowest point on the page. 2) Notice the small box with the yellow border in the middle. I want this to be a copyright footer, but have a similar problem. How do I make that box appear 10px below whatever the lowest point for the main div is? Basically, I need the nav boxes to push everything down. I HOPE this can be done fluidly, so I can simply add and remove boxes quickly without needing a CSS edit...that's the goal anyway...modular nav boxes. My CSS is at http://www.mcconaha.com/csscenter.css and the page is at http://www.mcconaha.com/csscenter.php (Also note that this is really all I'm asking. I'm going to clean up the rest...just roughing it out right now.) Anyway, thanks in advance. I am new to using CSS for more than just text, and I have run into a problem. What I want to do is to have an image with a margin of 3px around it. The problem occus with the background color and border in Mozilla (Fire Fox). The box dosn't fit around the image properly. Does anyone have an idea why this is? --xenite is there a way to have a different background image in the .content area on different pages? this is the site: http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages? I have a layer 'main' that contains two columns - one on the left called 'left', one on the right called 'right'. Both columns are layers themselves. 'main' has a background colour 'left' and 'right' have a fixed size background image which does not repeat. JavaScript determines the size of the window and then sets the height of these three layers exactly. This is supposed to be a minimum height to ensure the page is filled initially, however I have used the following code (explained later): Code:
if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
// main height
var pageHeight = myHeight;
document.getElementById("main").style.height = pageHeight+"px";
// content height
var leftHeight = pageHeight - 233;
document.getElementById("left").style.height = leftHeight+"px";
document.getElementById("right").style.height = leftHeight+"px";
Content on 'right' may extend beyond the height of the page and therefore makes the page scroll. When the content in 'right' expands - it is hoped that the size of 'main' expands so that the background colour of this layer fills the space where the content overflows. Using the above JavaScript and this HTML - that works as desired in IE7. Code:
<div id="main" style="position: relative; margin: 0 auto; width: 680px; background: #E1E6EA; text-align: left; padding: 0; z-index: 2">
<div id="left" style="float: left; text-align: center; margin: 0; padding: 0; width: 198px; background: #E1E6EA; background-image: url('images/left.jpg'); background-repeat: no-repeat; z-index: 3">
blah
</div>
<div id="right" style="float: right; text-align: center; margin: 0; padding: 0; width: 482px; background: #E1E6EA; background-image: url('images/right.jpg'); background-repeat: repeat-x; z-index: 3; overflow: inherit">
badly coded extra bit to extend the layer
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
</div>
</div>
As the content of 'right' expands so does the background behind everything. HOWEVER - this only works in IE and not the other two test browsers: Safari and Firefox. To remedy this - I tried minHeight instead of height. The outcome of that - the background behind 'right' extends (because the background colour continues past the minHeight) but the background behind 'left' is just not shown and the background of 'main' does not extent. Therefore it has a background on the left hand side until the minHeight of 'main' then the left hand side has no background after that point. That's in Firefox and Safari. With this "solution" in IE - it goes a bit weird but since it doesn't even work right in the other two I ignore that for now. So - it either works in IE or not at all. Hence why I am currently using the code that at least works in a browser. Any suggestions to get it working in all? I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek Hello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? I'm using this html: Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? |
|||||||