Forum Moderators: not2easy
Here's the css:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
height: 20px;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 20px;
width: 100px;
line-height: 20px;
text-align: center;
background: #ffffff;
}
#acccountselector-business {
position: relative;
float: left;
height: 20px;
width: 100px;
line-height: 20px;
text-align: center;
background: url("accountselectorleft.png");
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
min-width: 64%;
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 55px;
width: 100%;
background: #ffffff;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 220px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 12px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: left;
width: 33%;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test5.css" />
</head><body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
</div>
<div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-spacer"> </div>
<div id="headerwrapper-right">
<div id="headerwrapper-right-heading">Manage My Account</div>
<div id="headerwrapper-right-customer">Account Control Center</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated, Thanks.
Nice to see that (X)HTML and CSS both validate! Extra points for that. Subtract a point for not specifying your DTD (which can make a big difference) so I just chose my own (plus character encoding). Then a simple matter of working to the typ0.
CSS:
#acccountselector-business {
HTML:
<div id= "accountselector-business">Business</div>
An extra "c" in the CSS id. Therefore the HTML call fails to find the id it is looking for.
W3C - DTD [w3.org]
You have your choice of DTDs. Most people would probably recommend 4.01 Strict as the most solid choice for most people most of the time. That would be my recommendation.
A ton of people may jump me and suggest that I set a poor example by plugging in XHTML Strict to test your page with. They will have valid reasons for doing so.
............................
Validated code prevents and fixes a lot of problems. Validate your code.
W3C (X)HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
............................
Though a lousy source for examples samples, the W3C should be the first stop on the way to answering any question. You need to understand the basis of the standards first. Then you should head to any of the thousands of independent sites where people have worked out samples and tests.
............................
Thanks, I swear I looked over that a thousand times and didn't see that typo.
We ALL need a second set of eyes sometimes. Not one person here hasn't done exactly the same thing.
............................
I would make some CSS suggestions.
1) I tend be very specific and would used background-image: for the declaration below:
background: url("accountselectorleft.png");
Note: On the quotes. Single quotes, double quotes, or no quotes should all work. I use no quotes. W3C uses double quotes and no quotes in examples of the property, and is not clear on what is 'correct'. Plenty of resources that advise against quotes though.
Note: Best practice to declare a background-color: that fairly closely matches the color of the image. The color will render instantly. It may take a couple of seconds for the image to show up. The POP to the page will be much reduced if they background-color: is already in place. I would shorthand the declaration in this situation;
background: #faebd7 url(aaa.jpg);
2) I would shorthand any color that allows it, e.g., #fff and #000
3) You have a body element declaration fourth in the list. I would make is first. My stylesheets work from 'global' declarations to highly specific declarations, and work from 'top to bottom' or grouped in related declarations. (Use lots of comments so that you can find your way around a year from now.)
4) Kind of borderline on how to handle this section:
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
A) I would set my 'main' font-family in html, body {
and then make changes where needed.
B) The only difference h1, h2, and h4 is font-size:
Depending upon future plans to develop the CSS, I might use:
h1, h2, h4 {
font-family: Geneva, Arial, sans-serif; color: #000;
}
and then set up a 'library' to draw the font-size: from -
.font-a {font-size: 12px;}
.font-b {font-size: 16px;}
.font-c {font-size: 20px;}
HTML:
<h1 class="font-b">
Just a few thoughts. You may get very different opinions for any of a number of reasons. That's where you have to exercise 'executive decision' and just go with one option or another.
I plan on changing the fonts later on, that is why they are there just as place holders for the time being.
I have one more question. Now that I have these starting to display more correctly I am working on my header section of my layout.
I currently have underneath the 2 tabs I just correct a header section for the page. It is split up into a left and right section. These are then split up with their respective divs in each of these.
Currently there is a logo, links below that, then a banner image on the left div of the header section, and there is a user panel on the right most section.
My problem is I can't get the right user div to move further over to the right side of the page without it moving down to the other line.
Here's my new css and html:
CSS:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#wrapper-leftborder {
width: 8px;
height: 100%;
position: relative;
float: left;
background: #ffffff url(backgroundleft.png);
background-repeat: repeat-y;
}
#wrapper-rightborder {
width: 8px;
height: 100%;
position: relative;
float: left;
background: #ffffff url(backgroundright.png);
background-repeat: repeat-y;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
height: 25px;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 25px;
width: 108px;
line-height: 20px;
text-align: center;
background: #ffffff url(accountselectorleft.png);;
}
#accountselector-business {
position: relative;
float: left;
height: 25px;
width: 108px;
line-height: 20px;
text-align: center;
background: #ffffff url(accountselectorright.png);
}
#accountselector-spacer {
position: relative;
float: left;
width: 808px;
height: 25px;
background: #ffffff url(spacerbackground.png);
background-repeat: repeat-x;
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 90%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
width: 550px;
height: 100%;
background: #ffffff url(backgroundleft.png);
background-repeat: repeat-y;
padding-left: 15px;
padding-right: 15px;
}
#headerwrapper-left-logo {
position: relative;
height: 55px;
width: 100%;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 220px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 10px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: right;
width: 320px;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="test5.css">
<title></title>
</head>
<body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
<div id= "accountselector-spacer"> </div>
</div><div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-spacer"> </div>
<div id= "headerwrapper-right">
<div id="headerwrapper-right-heading">Manage My Account</div>
<div id="headerwrapper-right-customer">Account Control Center</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
</body>
</html>
Oh, and it should be validated now, thanks for that advice!
My problem is I can't get the right user div to move further over to the right side of the page without it moving down to the other line.
It's going where its container is telling it to go; flush right with {float: right;}
It's container is set at:
#headerwrapper {
position: relative;
margin-top: 5px;
width: 90%;
height: 300px;
}
This box is set flush left at {width: 90%}, so you've 10% set aside to the right. Why do you want to move it to the right? Where exactly?
If you center the containing container, that will move the whole block 5% to the right.
#headerwrapper {
position: relative;
margin: 5px auto 0 auto;
width: 90%;
height: 300px; border: .1em solid blue;
}
Note that I have added a border to examplify that you have issues with fully enclosing the containers within this container. You will want to be careful of rendering issues. It may look right, without being right.
Note: A partial border 'blinking' bug is triggered in FF 3.5.1 on focus in vertical Link1 etc. container; likely from either,
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
though haven't run it down.
Inside headerwrapper I split it up into 2 main divs, headerwrapper-left and headerwrapper-right, think of it as 2 columns, which are further divided.
I was wanting the left div to be approx 60% of headerwrapper and be flush to the left, and the right div to be about 35% and flush to the right.
I tried adding a spacer but I can't get the right div to be on the right side. It keeps carrying over to the next line instead of fitting within headerwrapper. I've checked my widths and everything looks like it should go. I can get it inside but it isn't pushed against the right of my headerwrapper but rather is just right of the left div with tons of extra space to the right of my right div.
How can I get headerwrapper-right to be flush to the right side of my headerwrapper instead of carrying over to its own row?
Hope that makes sense.
headerwrapper-left
---------------------------------
¦ headerwrapper-left-logo......... ¦
¦-------------------------------¦
¦ headerwrapper-left-navigation. ¦
¦-------------------------------¦
¦ headerwrapper-left-banner...... ¦
¦-------------------------------¦
headerwrapper-right
--------------------------------------
¦ headerwrapper-right-heading.......... ¦
¦------------------------------------¦
¦ headerwrapper-right-customer ....... ¦
¦------------------------------------¦
My problem is that my headerwrapper-right is not placing itself flush against the right side of the headerwrapper div and if I make it any bigger it pushes down to the next line.
Thought the diagram might help explain things better.
I was wanting the left div to be approx 60% of headerwrapper and be flush to the left, and the right div to be about 35% and flush to the right.
I think D_Blackwell has it nailed for you, (you have too many ID'd wrappers but unless you want us to help you optimise it we won't ;)) however what he's saying is that your header wrapper is only 90% wide:
#headerwrapper {
position: relative;
margin-top: 5px;
width: 90%;
height: 300px;
}
go on stick a temporary background color onto that div to help you "see" it ;) then the right floated div inside is actually going flush to the right side of its wrapper (again put a temporary background color onto it, so you can see it too) - It's just that the header wrapper is not flush with the right side of the overall container it's 10% too short ;)
you really really have too many divs, and that is possibly complicating things for you, There should be no need at all to use spacer divs :o - Margins can and will take care of any spacing you need in CSS
hth
Suzy
I was sort of getting my padding and my margins confused so I used a few spacers to get that fixed up and was using the 90% originally to fix issues I was going to have with borders around the main container, which I resolved by creating a 1x1024 background image for the div instead and repeated it vertically.
I'll try and clean up some of the divs now that I am grasping margins a bit better now.
How do I get my main wrapper to expand with the content within it? Currently the bodywrapper is too small and is not causing the main wrapper to expand.
You shouldn't really use any fixed heights for divs, unless you have another means to control overflowed content or you don't actually mind if content is hidden.
I know it's nice to set heights when starting a layout just to get a visual on it, but not everyone is going to be looking at your page with the same dimensions so what you may be seeing is not what everyone is seeing.
So remove all heights (your menu may possibly be anexception as it might need to be fixed to hold a graphic background).
If the wrapper is then not stretching to contain its content automatically it could be that it needs to be "instructed" to clear its floated children.
in any given situation if an element contains nothing but floats, it will not stretch to contain them by default, it doesn't know they're there if you like. You can however tell the parent to hug its children in one of two ways..
1 - float the parent element (@ 100% width)
2 - add overflow: hidden to the parent
the first method is probably best if it can be used as it will even work for older versions of IE - Only IE7+ will understand the second one, unless there is a width involved too
I see you already have a width on your wrapper so the second one with that width should do it in this case!
Correct me if I am wrong but I set my width of my parent container to 1024, since I figure more than 90% of people are at least at a 1024x768 resolution, so am I not okay to go with heights then as it should have a similar, if not same, appearance on computers since I set the parent div up this way?
Thanks for all the help guys.
Now if I wanted to put a footer at the bottom of them all I could do the trick referenced in thread I read a few posts ago and set a margin for the main div and putting a footer div as an absolute with 0 margin at the bottom right?
If however you are trying to make this look more like an application with a fixed footer you can do it as you suggest, but while the common browser resolution may be 1024*768 do you know how many toolbars and what height they are that every single user of your site may be using, or even if they're browsing at full screen? ;)
I know I like as few as possible but between web dev bars and my favourites I don't have 768 height available ;)
re: widths and heights they are not the same, fixed widths will simply cause a horizontal scroll if the window is narrowed lower than your width.
If you have a fixed height and the content spills over whether it's because a user has a bigger font-size as their USER preference or because dynamic content comes in longer than the space you've allowed, that content will "OVERFLOW" the bottom of the wrapper.. and now because you've used the overflow: hidden directive it will be hidden with no way to scroll to it. even without the hidden directive the content will overflow the background of the wrapper and possibly go right over the top of your footer.
Best thing you can do is try it for yourself to see the pitfalls, just keep your height on and add loads more of that lorem ipsum text. then play around with your browser size!
There really is no way of guessing in advance exactly how much content each and every page on your site will have into the future and CSS is not meant to be restrictive, only a suggestion, so this is just a friendly heads up to help you avoid up and coming pitfalls.
Thanks.
