Thanks Phil & Richard. I was working on something similar last night. I appreciate your help.
On Jan 7, 2:33 pm, Phill <[email protected]> wrote: > Wow, that gives me something to be getting on with. Thanks for all the > help there Richard. I think I may have missed a </div> out on the > ButtonBar string some how, that looks okay here. > > I've had a good read of the clearfix solution and it looks like it > might be on the money. I'm not sure whether I quite understand it yet > but i'll have a go when I get back and let you know how I get on. > > Thanks again for your help. > > Phill > > On 7 Jan, 10:19, "Richard Aday" <[email protected]> wrote: > > > > > Woops, sent it early. Here's the complete e-mail: > > > Ok, you have a few problems. > > > 1) The div's MainText and RightSideNav are INSIDE the ButtonBar. Move them > > out of the div. > > > So it should look like: > > > > <div id="ButtonBar"><div id="PhysicalButton"><a class="c1" > > > href="index.html">PHYSICAL</a></div><div id="MentalButton"><a > > > class="c1" href="index.html">MENTAL</a></div><div > > > id="NutritionalButton"><a class="c1" > > > href="nutritionalIndex.html">NUTRITION</a></div><div > > > id="RestButton"><a class="c1" href="index.html">SLEEP/RECOVERY</a></ > > > div></div> > > > </div> > > > > <div id="MainText"> > > > <h2>Header</h2> > > > Some text describing the main content. > > > </div> > > > <div id="RightSideBar">While something is here, this bar > > > displays</div> > > > 2) Now, because you are floating MainText to the left and RightSideNav to > > the right, you have to find a way to clear the floats. The easiest way to > > do this would be to add a div right after the close tag of RightSideBar that > > looks like: <div style="clear:both;"></div>. However, this is not the > > correct way of doing it because it adds unneccessary markup to the page. I > > recently wrote up an e-mail to another person explaining how they could fix > > this issue using clearfix. Here is a copy: > > > The problem you are having is that you are floating content and > > > > sidebar_container, however you are not clearing them properly. > > > > This article explains the problem, and has as a detailed explanation with > > > a > > > full solution towards the bottom: > > >http://www.positioniseverything.net/easyclearing.html > > > > You should read it to understand what you are experiencing. If you don't > > > want to use IE conditional commenting, then google clearfix and find > > > another > > > solution that does not contain conditional commenting. > > > > Once you put in the CSS clearfix in your CSS, then add a classname of > > > clearfix to the sidebar_container. If that doesn't fix it, add the > > > clearfix > > > to content as well. > > > 3) Make the width of RightSideNav bigger so that it takes up all the > > horizontal space you want it too. > > > 4) Now that you have 2 columns (MainText and RightSideNav), you're right > > column is not extending all the way to the bottom. if you want this the > > easiest way to solve this would be with Faux columns. Basically, you set a > > background image to the Content div. The image would have be a width of > > 750px. It would have a height of 1px. The image would have the first 500px > > be the lighter green, and then the rest of the image would be the darker > > green. By doing this, then your background color of the 2 columns extend > > all the way to the bottom (regardless of which column is smaller). > > > Good luck! > > > On Wed, Jan 7, 2009 at 2:07 AM, Richard Aday <[email protected]> wrote: > > > Ok, you have a few problems. > > > > 1) The div's MainText and RightSideNav are INSIDE the Button Bar. Move > > > them out of the div. > > > > So it should look like: > > > > On Wed, Jan 7, 2009 at 12:34 AM, Phill <[email protected]> wrote: > > > >> Understood, I think you may have given me the answer in your second > > >> paragraph actually. I don't think the block level elements positioned > > >> side by side will position properly unless they are floated. I have > > >> just floated the MainText and RightSideBar and they now look a lot > > >> better in firefox. > > > >> Anyway as requested here is the html: > > > >> <?xml-stylesheet href="mystyles2.css" type="text/css"?> > > >> <!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";> > > >> <head> > > >> <meta name="generator" content="HTML Tidy for Linux (vers 1 September > > >> 2005), seewww.w3.org" /> > > >> <link rel="stylesheet" type="text/css" href="mystyles2.css" /> > > >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > > >> <title>Title</title> > > > >> <style type="text/css"> > > >> /*<![CDATA[*/ > > >> a.c1 {display:block; width: 100%; height: 100%; border: none;} > > >> /*]]>*/ > > >> </style> > > >> </head> > > >> <body> > > >> <div id="Content"> > > >> <div id="Title">TotusHealth.com</div> > > >> <div id="ButtonBar"><div id="PhysicalButton"><a class="c1" > > >> href="index.html">PHYSICAL</a></div><div id="MentalButton"><a > > >> class="c1" href="index.html">MENTAL</a></div><div > > >> id="NutritionalButton"><a class="c1" > > >> href="nutritionalIndex.html">NUTRITION</a></div><div > > >> id="RestButton"><a class="c1" href="index.html">SLEEP/RECOVERY</a></ > > >> div></div> > > > >> <div id="MainText"> > > >> <h2>Header</h2> > > >> Some text describing the main content. > > >> </div> > > >> <div id="RightSideBar">While something is here, this bar > > >> displays</div> > > >> </div> > > >> </body> > > >> </html> > > > >> And next the mystyles2.css: > > > >> body { > > >> margin:0px 0px; padding:0px; > > >> text-align:center; > > >> background: white url('circles4CompleteMerged.gif'); > > >> background-repeat: repeat; > > >> } > > > >> #Content { > > > >> width:750px; > > >> height: 100%; > > > >> margin-left:auto; > > >> margin-right: auto; > > > >> text-align:left; > > >> padding:0px; > > >> border-left:5px solid #0a930a; border-right: 5px solid #0a930a; > > >> border-top: none; border-bottom: none; > > >> background: black; > > > >> } > > > >> h2 > > >> { > > >> margin-top: 1em; > > >> font-weight: normal; > > >> font-size: 150%; > > >> margin-bottom: 1em; > > >> margin-left: 0.5em; > > >> color: #0a930a; > > >> letter-spacing: 0.6em; > > >> text-decoration: underline > > >> } > > > >> h4 > > >> { > > >> margin-top: auto; > > >> margin-bottom: auto; > > >> margin-left: auto; > > >> margin-right: auto; > > >> color: #0a930a; > > >> } > > > >> #Title { > > >> width: 100%; > > >> height: 90px; > > >> background: #9cc79c; > > >> font-size: 50pt; > > >> color: white; > > >> text-align: center; > > >> font-family: Arial; > > >> font-weight: 800; > > >> } > > > >> a:link {color: black; text-decoration:none;} > > >> a:visited {color: black; text-decoration:none;} > > >> a:hover {color: white; background-color: #80b37f; text- > > >> decoration:none;} > > >> a:active {color: black; text-decoration:none;} > > > >> #ButtonBar{ > > > >> width: 100%; > > >> height: 20px; > > >> /* background:#0a930a; */ > > >> background: blue; > > >> margin:0px 0px 0px; > > >> border: 1px; > > >> float: left; > > >> padding:0px; > > >> display: inline; > > > >> } > > > >> /* Colour scheme: #0a930a #eaffea */ > > > >> #PhysicalButton { > > >> width: 120px; > > >> height: 14px; > > >> margin:0px 0px 0px; > > >> padding:0px; > > >> font-size: 8pt; > > >> display: inline; > > >> text-align: center; > > >> font-family: Verdana; > > >> font-weight: 800; > > >> color: White; > > >> position: relative; top: 0px; left: 100px; > > > >> background: #beeaea; > > >> text-align: center; > > >> float: left; > > >> border: #0a930a 2px solid; > > > >> } > > > >> #MentalButton { > > >> width: 120px; > > >> height: 16px; > > >> margin:0px 0px 0px; > > >> padding:0px; > > >> font-size: 8pt; > > >> display: inline; > > >> text-align: center; > > >> font-family: Verdana; > > >> font-weight: 800; > > >> color: White; > > >> position: relative; top: 0px; left: 100px; > > >> border: #0a930a 2px solid; > > >> background: #b8ffb8; > > >> text-align: center; > > >> float: left; > > > >> } > > > >> #NutritionalButton { > > >> width: 120px; > > >> height: 16px; > > >> margin:0px 0px 0px; > > >> padding:0px; > > >> font-size: 8pt; > > >> display: inline; > > >> text-align: center; > > >> font-family: Verdana; > > >> font-weight: 800; > > >> color: White; > > >> position: relative; top: 0px; left: 100px; > > >> border: #0a930a 2px solid; > > >> background: #efb78d; > > >> text-align: center; > > >> float: left; > > >> } > > > >> #RestButton { > > >> width: 120px; > > >> height: 16px; > > >> margin:0px 0px 0px; > > >> padding:0px; > > >> font-size: 8pt; > > >> display: inline; > > >> text-align: center; > > >> font-family: Verdana; > > >> font-weight: 800; > > >> color: White; > > >> position: relative; top: 0px; left: 100px; > > >> border: #0a930a 2px solid; > > >> background: #beb8ea; > > >> text-align: center; > > >> float: left; > > > >> } > > > >> #MainText { > > >> width:500px; > > >> height:100%; > > >> margin:0px auto; > > >> padding:20px; > > >> > > ... > > read more »- Hide quoted text - > > - Show quoted text - --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
