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), see www.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;
text-align: left;
font-family: Verdana;
font-weight: 400;
font-size: 11pt;
display: inline;
background: #f1fff1;
float: left;
}
#RightSideBar{
display: inline;
width:180px;
height: 100%;
margin:0px auto;
background: #9cc79c;
display: inline;
float: right;
}
I think I have removed the majority of my comments, apologies if I've
left any in.
Now i've made the change so that the elements float side by side it
appears to be displaying much better in firefox, however the
rightsidebar is still not fully showing its background colour and it
looks like the same goes for the content.
If you want to see how I would like it to look open the page in IE and
this should roughly display how I want it to.
Thanks for all you help guys. I'll have a crack again at rounding this
off this evening.
Phill
On 6 Jan, 16:34, "Richard Aday" <[email protected]> wrote:
> Phill,
>
> Having a page where we can see the problem will make debugging faster. Can
> you either link us to the page that is broken, or create a new test page
> that highlights the problem?
>
> Giving us a width and height of the div's is not enough. This could be a
> problem where you are not clearing your floats properly (if you are using
> float at all).
>
> Also, after giving us that link, make sure you clearly specify how it
> _should_ look.
>
> Thanks,
> Richard Aday
>
>
>
>
>
> On Tue, Jan 6, 2009 at 12:12 AM, Phill <[email protected]> wrote:
>
> > Thanks Jamie, Richard,
>
> > I will try both. That's an interesting point, that the width 100%
> > refers to the width in relation to the size of the parent. I think my
> > parents are all 100% however perhaps one of the parents up the chain
> > isn't displaying properly causing the problem.
>
> > It may well be a lack of understanding on another component of CSS
> > though to be perfectly honest. My layout is such that I have
> > background declared in the <body> tag now so that this would display
> > across the whole page. Previously my top level <div> was 100% & 100%
> > to make the background but this would not display.
>
> > Inside the <body> I have a <div> which is the content which auto-
> > centres in relation to the sides of the browser by using auto margins.
> > The problem I now have seems to be with the components within the
> > content <div>. I suspect this may be where my lack of understanding
> > comes into play. I have a series of <div>s laid out within the content
> > <div> which.....
>
> > Just as i've been typing this I think I have realised the problem.
> > Will a <div> element always attempt to cover the entire width of its
> > container - being a block level element?
>
> > Please forgive the psudocode - essentially my layout is:
>
> > <body>
> > <content div width 750px height 100%></>
> > <title div width 100% height 50px></>
> > <button bar width 100% height 20px></>
> > <MainText width 500px height 100%></>
> > <sideBar width 180px height 100%></>
> > </content div>
>
> > At the moment only the title seems to display correctly. Previously
> > everything displayed correctly but only in IE which clearly was a
> > problem. The title displays at 100% of the width of the content and
> > the correct height. All other elements below that do not display as
> > they should.
>
> > I have a feeling as I say the problem may be with the MainText and
> > SideBar trying to take up less than 100% of the width of the area..
>
> > Anyway your thoughts are welcome.
>
> > Thanks again for your help.
>
> > Phill
>
> > On 3 Jan, 20:47, "Richard Aday" <[email protected]> wrote:
> > > Phill,
>
> > > When specifying a width of 100%, it does not mean that it takes as much
> > > space as possible. Instead, specifying a width of 100% means that the
> > width
> > > be be EQUAL to the width of it's parent element.
>
> > > So what you should do is go check that it's parent elements have the
> > desired
> > > width.
>
> > > You might have to specify width: 100% all the way up to a parent element
> > > that has an absolute size. If not, specify width: 100% all the way up to
> > > body.
>
> > > Let me know if that helps,
> > > Richard Aday
>
> > > On Fri, Jan 2, 2009 at 12:02 PM, Jamie C. <[email protected]>
> > wrote:
> > > > Phill,
>
> > > > Try adding overflow:auto to that div's style definition. If that
> > doesent
> > > > work you might need to post a link so we can see what's happening.
>
> > > > Jamie
>
> > > > On Wed, Dec 31, 2008 at 2:31 PM, Phill <[email protected]> wrote:
>
> > > >> Hi guys,
>
> > > >> I have been having a problem with my background <div> not displaying
> > > >> in firefox unless I have text in it. I have seen various posts about
> > > >> this on the internet but they all seem to fizzle out right before the
> > > >> answer gets posted.
>
> > > >> Essentially everyone suggests specifying width and height attributes
> > > >> and that this resolves the problem. I have already done this however
> > > >> the background only displays when I specify absolute values rather
> > > >> than 100%.
>
> > > >> The reason I specify 100% is because the content I have which sits
> > > >> inside another div within this background div positions itself in the
> > > >> centre of the screen by using auto margin. If I specify absolute
> > > >> values the content centres itself absolutely as well which means it
> > > >> does not move to the centre when the screen is re-sized and it is not
> > > >> centred depending on the absolute values I specify.
>
> > > >> Does anyone know of a way I get can the <div> to display using 100%
> > > >> width/height values.
>
> > > >> Thanks for the help
>
> > > >> Phill
>
> > > --
> > > -Richard Aday- Hide quoted text -
>
> > > - Show quoted text -
>
> --
> -Richard Aday- 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]
-~----------~----~----~----~------~----~------~--~---
