Nosferum Posted June 10, 2006 Share Posted June 10, 2006 RESOLVED---I've done this before and have never had problems. In fact, I usually reuse the same CSS document over and over and edit as needed. I have all of the contents within a DIV called "container". It has the background, the left and right borders, and it dictates the width.---Within the "container", I have a "header" up top with some text within that ("menu") that I'll reposition later. Also, within "container", I have a left column "subCol" and a right column, "mainCol". For some reason, the "container" is neither showing it's background (should look like dark parchment) nor it's left and right white border lines. Note: the parchment area up top is just part of the picture.---Currently, the "mainCol" text is white so you can know something is there. The XHTML page is below, with the CSS document beneath that. I've been staring at this for four days. <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Clan MacLear (est. 1996) - 'Vanguard: Saga of Heroes' Sept</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Clan MacLear's sept in Vanguard: Saga of Heroes" /> <meta name="keywords" content="clan, maclear, vanguard, saga, heroes, online, game, mmorpg, failte, gaelic, gaidhlig" /> <meta name="author" content="Chris Chandler" /> <link rel="stylesheet" type="text/css" media="print" href=".print.css" /> <link rel="stylesheet" type="text/css" href="default.css" /> <script language="javascript" type="text/javascript" src="jsfiles/common.js"></script> <!--[if gte IE 5.5000]> <script language="JavaScript"> window.attachEvent("onload", correctPNG); </script> <![endif]--></head><body> <div class="container"> <div id="header"> <h2>Clan MacLear - Vanguard: Saga of Heroes</h2> <div id="menu"> <a href="../index.html">ClanMacLear.net</a> <a href="index.html">V:SoH Home</a> <a href="index.html">Forums</a> <a href="index.html">Home</a> <a href="index.html">Home</a> <a href="index.html">Home</a> </div> </div> <div id="subCol"> <dl> <dt><a href="../eq/"><img src="images/clan_eq.jpg" border="0" alt="MacLear: Everquest" /></a></dt> <dd>MacLear: <a href="../eq/">Everquest</a></dd> <dt><a href="../daoc/"><img src="images/clan_daoc.jpg" border="0" alt="MacLear: World of Warcraft" /></a></dt> <dd>MacLear: <a href="../daoc/">Dark Age of Camelot</a></dd> <dt><a href="../eq2/"><img src="images/clan_eqii.jpg" border="0" alt="MacLear: Everquest II" /></a></dt> <dd>MacLear: <a href="../eq2/">Everquest II</a></dd> <dt><a href="../wow/"><img src="images/clan_wow.jpg" border="0" alt="MacLear: World of Warcraft" /></a></dt> <dd>MacLear: <a href="../wow/">World of Warcraft</a></dd> </dl> <p>"The race is not to the swift, nor the battle to the strong, nor bread to the wise, nor riches to the intelligent, nor favor to the men of skill; but time and chance happen to them all."</p> </div> <div id="mainCol"> <p>Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. Here's the main column. </p> </div> </div></body></html> body { margin: 0; padding: 0; background: #000; color: #333; font: small Verdana,Sans-serif; line-height: 1.6em; text-align: center }.container { background: #993300 url('images/stockParchment.jpg') repeat-y; width: 800px; margin: 0 auto; border: solid #fff; border-width: 0 1px 0 1px; text-align: left; color: #333; position: relative; } #header h2 { display: none } #header { background: url('images/bannerHorseman.jpg') no-repeat top left transparent; width: 800px; height: 200px; position: relative; } #menu { position: relative; float: right; width: 300px; height: 50px; margin-top: 150px; }#menu a { padding: 5px; color: #fff; text-decoration: none; white-space: nowrap; font-weight: normal; } #menu a:hover { color: #ffdddd } a { color: #660000; text-decoration: none; font-weight: bold } a:visited { color: #660000; } a:hover { color: #358; } a img { border-width: 0 }p { padding: 5px }#subCol { position: absolute; top: 200px; left: 0px; width: 200px; font-size: 85%; line-height: 1.6em; } #subCol img { margin: 5px; float: left; border: solid #000 1px; }#mainCol { position: absolute; top: 200px; width: 600px; margin-left: 200px; color: #fff; } ul, dl { margin: .5em 0 1em; padding: 0; list-style: none } ul li { margin: 0 0 2px; padding: 0 0 0 18px; text-indent: -18px }dl dl { margin: 1em 20px } dt { clear: left; font-weight: bold } (edit added below, and added codeboxes)---Note that if I dictate a height for the "container" I can see the background. However, it should stretch vertically because of the DIVs that are inside it.---Also note that "display: block" had no effect. Link to comment Share on other sites More sharing options...
Err Posted June 11, 2006 Share Posted June 11, 2006 ---I've done this before and have never had problems. In fact, I usually reuse the same CSS document over and over and edit as needed. I have all of the contents within a DIV called "container". It has the background, the left and right borders, and it dictates the width.---Within the "container", I have a "header" up top with some text within that ("menu") that I'll reposition later. Also, within "container", I have a left column "subCol" and a right column, "mainCol". For some reason, the "container" is neither showing it's background (should look like dark parchment) nor it's left and right white border lines. Note: the parchment area up top is just part of the picture.---Currently, the "mainCol" text is white so you can know something is there. The URL for the XHTML page is below, with the CSS document beneath that. I've been staring at this for four days. It might be a little sloppy, but it's valid CSS.http://www.wku.edu/forensics/media/vsoh/http://www.wku.edu/forensics/media/vsoh/default.css(edit added below)---Note that if I dictate a height for the "container" I can see the background. However, it should stretch vertically because of the DIVs that are inside it.<{POST_SNAPBACK}> Hi. Have you tried to add:display: block; to your container class? It may help out when problems like this happen. Link to comment Share on other sites More sharing options...
Nosferum Posted June 11, 2006 Author Share Posted June 11, 2006 ---Thanks for the recommendations. The "display: block" had no effect. I also tried fidgeting with the "margin: 0 auto" to just "margin: 0", on the assumption that the height of "container" had been mistakenly pushed up with a bottom margin, but that's not it. I'm still stuck. Link to comment Share on other sites More sharing options...
Nosferum Posted June 11, 2006 Author Share Posted June 11, 2006 RESOLVED---I was thinking to myself that I shouldn't have to absolutely place the left column, because the right column floats to the right. That means that all of the other objects, in this case, the DIV "subCol" would be pushed to the left. I removed "position: absolute" and the "left: 0; top: 0" sections from "subCol" and VOILA.---If there's a way for moderators to mark this thread as resolved, it might help others in the future. Link to comment Share on other sites More sharing options...
Err Posted June 11, 2006 Share Posted June 11, 2006 RESOLVED---I was thinking to myself that I shouldn't have to absolutely place the left column, because the right column floats to the right. That means that all of the other objects, in this case, the DIV "subCol" would be pushed to the left. I removed "position: absolute" and the "left: 0; top: 0" sections from "subCol" and VOILA.---If there's a way for moderators to mark this thread as resolved, it might help others in the future.<{POST_SNAPBACK}> Cool, glad your figured it out. As for marking your topic with "RESLOVED", I remember used being able to edit the topic title, but I guess they changed the rules. So yeah, a mod has to do that part. Link to comment Share on other sites More sharing options...
scott100 Posted June 11, 2006 Share Posted June 11, 2006 As for marking your topic with "RESLOVED", The topic starter can just putResolvedAs the very first line of text in the first post. Link to comment Share on other sites More sharing options...
Err Posted June 11, 2006 Share Posted June 11, 2006 The topic starter can just putResolvedAs the very first line of text in the first post. <{POST_SNAPBACK}> Or you can do that also. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now