Forum Moderators: not2easy
I can't get my pages to center. I thought the div.main would, but it doesn't.
I also can't get a color border down the left and right of the page; when it appears, it stops at the very top. I would really appreciate any help!
body {
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
text-align:left;
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
h1, h2, h3, h4, h5 {
font-family: Arial,Verdana,Helvetica,sans-serif;
}
h1 {
color: #000000;
font-size: 35px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 12px;
}
a:link {
text-decoration: none;
color: #6fa408;
}
a:visited {
text-decoration: none;
color: #629205;
}
a:hover {
text-decoration: none;
color: #f5c439;
}
a:active {
text-decoration: none;
color: #f5c439;
}
.green-times {
font-family: "times new roman," times,serif;
color: #6fa408;
}
div.content {
position: absolute;
margin-top: 200px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 800px;
font-family: Arial, Verdana, sans-serif;
}
div.header {
position: absolute;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
width: 800px;
height: 150px;
font-family: "Times New Roman",Times,serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.menu{
position: absolute;
margin-top: 170px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: Arial, Verdana, sans-serif;
color: #6fa408;
font-weight: bold;
text-align: right;
}
div.footer{
position: absolute;
margin-top: 1600px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
clear: both;
height: 5%;
font-size: xx-small;
font-family: Arial, Verdana, sans-serif;
}
.center {
text-align: center;
}
.center-table {
border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
width: 100%;
margin-right: auto;
margin-left: auto;
text-align: left;
}
table#body-table {width:80%; margin-left:5%; margin-right:15%; border-left: 30px solid #ffcc33;
border-right: 30px solid #ffcc33;
}
.green-arial {
color: #6fa408;
font-family: Arial,Helvetica,sans-serif;
}
div.main {
margin: 0, auto;
text-align: left;
}
And also a way to make the footer automatically have more space between it and the content?
Remember simpler is simpler.
The sans serif generic font is spelled wrong:
font-family: Arial, Verdana, "sans serif";
font-family: Arial, Verdana, sans-serif;
There are shorthand notations for margin (and padding, border etc). They seriously improve readability
e.g.
margin-top: 10em;
margin-right: auto;
margin-bottom: 0em;
margin-left: auto;
margin: 10em auto 0 auto;
margin: 10em auto 0;
absolute positioning: allows you to put a box where you want.
the way to position it isn;t by using margins, but by using top / left / right / bottom.
e.g.:
position: absolute;
top: 50%;
left: 50%;
sets the top and the left of the box in the middle of the reference (the viewport, unless there is a parent in the html that has position)
To center something that's using absolute positioning:
- set the width, use left: 50% and set a margin that's the negative of half the width
e.g.:
position: absolute;
width: 20em;
left: 50%;
margin-left: -10em; /* half the width*/
auto margins work if you set the width, on normal block elements that aren;t floated nor absolutely positioned.
But, I doubt you need position:absolute in your example at all.
And when I took out the absolute positioning, then suddenly things would move more where I wanted them, which was amazing. Thank you!
But what's frustrating to me is that it looks different in IE than FireFox or Opera. In FireFox and Opera, the menu looks best at about 3-4em from the top. But at that in IE, it covers part of the header. And I keep reading that most people use IE. So, I've moved the header down to 6 em...but I don't like how low it looks in FireFox and Opera.... I wish I could get them to all look the same, or at least closer. Is there a way, do you know? I know it looks a TON better than it did--thanks to you all! I just wish I could get it a bit better.
to the menu. This made it almost centered in FireFox and Opera, but not in IE. I've been playing around with the percentages, but that makes the menu double up if it gets too short, or go too far to the left.
It is invaluable for investigating which bits of the CSS are influencing the style for which bits of the HTML.
Let's forget about the legacy IE browsers - really it's easier, less confusing and faster if you simply ignore they exist for now. Don't even open it in IE.
Now let's look back at your html and try to clean it up a bit.
Then we'll add CSS to it step by step (note that I'm guess what you want to have based on code - it's not that easy)
<!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" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.example.com/">title<img
alt="logo-100 (25K)" src="1.jpg" /></a></h1>
<h2>header 2</h2>
<h3>header 3</h3>
</div>
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">testimonials</a></li>
<li><a href="#">widgets</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">about us</a></li>
</ul>
<div class="content">
<h1>title</h1>
<p>ipso</p>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<p>ipso</p>
</div>
<div class="footer">
<p>I'm a footer!</p>
</div>
</body>
</html>
Look at it ... it makes sense without styling, this is how e.g. a search engine, somebody using a braille output etc will "see" your site.
Now let's style it.
You wanted a border left and right of the page that's 30px wide, and I'll up the ante a bit by making it a full height of the page layout ...
So we add:
html {
background-color: #fc3;
height: 100%;
padding: 0 30px;
}
body {
background-color: white;
min-height: 100%;
padding: 0 5px;
}
To explain this: the html gets the yellow background, and sets left and right padding of 30px. the body sits inside the remaining space and get's a white background.
The height: height: 100% gives an element the exact same height as it's direct parent, *if* the parent has a height explicitly set different from auto. With the exception of the root element having the height of the viewport.
Setting height: 100% on html gives it an explicitly set height equal to the viewport, and making body's minimum height to be 100% of it's parent (html) makes sure we have that look we're after.
Note this still works if the viewport is too small to hold the content.
Note also that adding vertical padding to body would instantly make it taller than the viewport (the inside is set to the height of the viewport, padding goes around that)
Let's get that footer near the bottom next (to showcase how you use absolute positioning):
body {
position: relative;
}
.footer {
position: absolute;
bottom: 0;
font-size: xx-small;
border-top: 1px solid #fc3;
width: 100%;
}
.footer p{
padding: 5px;
}
.content {
padding: 0 5px 2em;
}
We give the body position relative: that's to make it gain "position". We have no intent to shift its position, only to use it as a reference for the children (it's smaller than the viewport, and in order to avoid calculations etc, it's a lot easier this way
footer get's the absolute position (so it's not part of the flow anymore), and we nail its bottom to the bottom of the closest parent that has position (body)
The font-size is something from your style, the border on top is something I added to show something.
- if I don't set the width you see only a border above the text, not all the way. That's because absolutely position elements collapse.
- If I set the width to 100% and I set the color different from the html background, and would add horizontal padding, you'd see it stick out on the right (width from the body (cause it has position!) is take as the width of the content of the footer and then padding is added around that and the border goes even around that).
- so I set the padding on the p inside the footer instead
Now the content is given a big padding at it's bottom ... That's cause the footer is now no longer part of the flow (and can't participate in stretching the body any longer). This prevents the footer from overlapping the content if there is enough content to be larger than the viewport (try it with resizing the window)
Let's set a default font family instead of repeating it all over:
body {
font-family: Arial, Verdana, sans-serif;
}
On to the heading:
#header img {
float: left;
height: 105px;
width: 105px; /* whatever it is*/
border: 0;
padding-top: 3px; /* as you like */
padding-left: 5px; /* as you like */
}
#header h1, #header h2, #header h3 {
text-align: right;
padding: 0 5px;
color: #6fa408;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
}
#header h1 a {
text-decoration: none;
color: inherit;
}
.menu {
clear: left;
}
The image first: we float it to the left (instead of that align="left" in the html) we set the size here, remove the border it get's from the <a> as well.
Using padding we can shift the position as needed (what looks best depends on the logo I guess)
The 3 headings in there (note: I'm not a big fan of using h1, h2 and h3 in this manner in general, it they really are 3 titles: fine, else better use e.g. a <p> instead) heve their text aligned to the right and get some padding to prevent them from rubbing against the yellow border.
Also we need to give these the serif font.
We need to remove the <a> that's inside the <h1>'s decorations and get rid of the blue color.
The menu get's a clear to make sure that if the image sticks out below the 3 paragraphs, it doesn't push the menu to the right.
That leave the menu, since you had something that I don't have I've just done a very simple menu using some pe CSS3 rounded corners (if you don't understand this part: ignore it, just some menu I was playing with).
.menu {
clear: left;
list-style: none;
border-bottom: 1px solid #6fa408;
padding: 0 5px;
font-size: 14px;
line-height: 16px;
}
.menu li {
display: inline;
padding: 1px 3px 0;
border: 1px solid #6fa408;
border-bottom: none;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px; /* css3 */
border-top-left-radius: 5px; /* css3 */
}
.menu a {
text-decoration: none;
color: #6fa408;
}
.menu li:hover {
border-bottom: 1px solid red;
border-color: red;
}
.menu li:hover a {
color: red;
}
Putting it together I've this:
<!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" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: #fc3;
height: 100%;
padding: 0 30px;
}
body {
background-color: white;
min-height: 100%;
position: relative;
font-family: Arial, Verdana, sans-serif;
}
.footer {
position: absolute;
bottom: 0;
font-size: xx-small;
border-top: 1px solid #fc3;
width: 100%;
}
.footer p{
padding: 5px;
}
.content {
padding: 0 5px 2em;
}
#header img {
float: left;
height: 105px;
width: 105px; /* whatever it is*/
border: 0;
padding-top: 3px; /* as you like */
padding-left: 5px; /* as you like */
}
#header h1, #header h2, #header h3 {
text-align: right;
padding: 0 5px;
color: #6fa408;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
}
#header h1 a {
text-decoration: none;
color: inherit;
}
.menu {
clear: left;
list-style: none;
border-bottom: 1px solid #6fa408;
padding: 0 5px;
font-size: 14px;
line-height: 16px;
}
.menu li {
display: inline;
padding: 1px 3px 0;
border: 1px solid #6fa408;
border-bottom: none;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px; /* css3 */
border-top-left-radius: 5px; /* css3 */
}
.menu a {
text-decoration: none;
color: #6fa408;
}
.menu li:hover {
border-bottom: 1px solid red;
border-color: red;
}
.menu li:hover a {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.example.com/"><img
alt="logo-100 (25K)" src="1.jpg" />title</a></h1>
<h2>header 2</h2>
<h3>header 3</h3>
</div>
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">testimonials</a></li>
<li><a href="#">widgets</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">about us</a></li>
</ul>
<div class="content">
<h1>title</h1>
<p>ipso</p>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<p>ipso</p>
</div>
<div class="footer">
<p>I'm a footer!</p>
</div>
</body>
</html>
Ok, I test it in FF, safari and opera: works all the same as expected.
On to testing in IE ...
IE8: works as expected (phew)
At this point I consider it done. I won;t change anything to the html and CSS anymore (but most of my visitors use those legacy IE versions I hear you think. Sure we'll fix it, but we're not going to compromise the good solution due to legacy IE versions in use, we'll feed them conditional comments instead:
- it fixes it without risk for IE8 to retrograde into the bugs
- it fixes them without risk for future browsers (no hacks no workarounds to stumble over, it are only comments to them)
- it is much faster for us to create
IE6: doesn't do min-height, so we need something at least something here ...
<!--[if IE 6]>
<style type="text/css">
body {
height: 100%;
}
#header h1 a {
color: #6fa408;
}
.menu {
margin-top: 2px;
}
.menu li {
margin-right: 3px;
padding-right: 0px;
}
</style>
<![endif]-->
This adds a conditional comment. Only IE6 will read it and fix the problems it has like not extending the body to the full height (IE6's height often works like min-height should -which it doesn't support-)
The inherited color also is broken in legacy IE versions, as do they include a trailing space in a <li>, so we need to adjust our inline menu a bit.
The border of the menu seems to send up under the floated image that it clears. Gee, thanks Microsoft! Instead of hunting for a reason, left's just see if some margin can't push it away... indeed it does.
IE7: has a number of the same problems of IE6, mainly minus the support it has for min-height, so we know how to fix them already:
<!--[if IE 7]>
<style type="text/css">
#header h1 a {
color: #6fa408;
}
.menu {
margin-top: 2px;
}
.menu li {
margin-right: 3px;
padding-right: 0px;
}
</style>
<![endif]-->
Putting it all together:
!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" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: #fc3;
height: 100%;
padding: 0 30px;
}
body {
background-color: white;
min-height: 100%;
position: relative;
font-family: Arial, Verdana, sans-serif;
}
.footer {
position: absolute;
bottom: 0;
font-size: xx-small;
border-top: 1px solid #fc3;
width: 100%;
}
.footer p{
padding: 5px;
}
.content {
padding: 0 5px 2em;
}
#header img {
float: left;
height: 105px;
width: 105px; /* whatever it is*/
border: none;
padding-top: 3px; /* as you like */
padding-left: 5px; /* as you like */
}
#header h1, #header h2, #header h3 {
text-align: right;
padding: 0 5px;
color: #6fa408;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
}
#header h1 a {
text-decoration: none;
color: inherit;
}
.menu {
clear: left;
list-style: none;
border-bottom: 1px solid #6fa408;
padding: 0 5px;
font-size: 14px;
line-height: 16px;
}
.menu li {
display: inline;
padding: 1px 3px 0;
border: 1px solid #6fa408;
border-bottom: none;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px; /* css3 */
border-top-left-radius: 5px; /* css3 */
}
.menu a {
text-decoration: none;
color: #6fa408;
}
.menu li:hover {
border-bottom: 1px solid red;
border-color: red;
}
.menu li:hover a {
color: red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
body {
height: 100%;
}
#header h1 a {
color: #6fa408;
}
.menu {
margin-top: 2px;
}
.menu li {
margin-right: 3px;
padding-right: 0px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#header h1 a {
color: #6fa408;
}
.menu {
margin-top: 2px;
}
.menu li {
margin-right: 3px;
padding-right: 0px;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<h1><a href="http://www.example.com/"><img
alt="logo-100 (25K)" src="1.jpg" />title</a></h1>
<h2>header 2</h2>
<h3>header 3</h3>
</div>
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">testimonials</a></li>
<li><a href="#">widgets</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">about us</a></li>
</ul>
<div class="content">
<h1>title</h1>
<p>ipso</p>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<p>ipso</p>
</div>
<div class="footer">
<p>I'm a footer!</p>
</div>
</body>
</html>
You can move the css to a <link>-ed file of course, I sue it in the html for simplicity here only.
Enjoy!
g1smd, I haven't yet installed the Firebug extension for Firefox. FireFox used to be my favorite browser, but it's been taking up too much memory on my laptop and freezing it, so lately I've been using Opera the most. But it sounds like a great extension/tool; I'll try it on my desktop later.
Thank you so much for explaining it so well, piece by piece, as you went. That helps a lot.
I've gone through it piece by piece, trying to make sure I understand it all. (Some of it I think I'll have to go through again.) It looks amazing--exactly like I wanted--and with some improvements! I really like how the footer stays at the bottom, and has a line dividing it.
And the menu with rounded corners is so neat! It doesn't have rounded corners in Opera or in my IE 7 (and the top header link is blue), but that's okay, it still looks fantastic. I just have to figure out how to move the menu more into the center (in all the browsers).
And I didn't know that you could have multiple pieces that are the same name in style. I mean, like ".menu li" and such; i thought it all had to be in the same chunk. I think that probably helps readability, being in different chunks.
What is this part of the style:
* {
padding:0;
margin:0;
?
Does that mean that everything has 0 padding and margin unless specified?
Also, I have the style part in a linked stylesheet. For the IE part, I have it as:
<!--[if IE 6]>
body {
height: 100%;
}
#header h1 a {
color: #6fa408;
}
.menu {
margin-top: 2px;
}
.menu li {
margin-right: 3px;
padding-right: 0px;
}
<![endif]-->
without the <style type="text/css"> because it is a stylesheet. Is that right?
I've got to go over this again, and play with it. But I'm so happy. Thank you!
and that worked. I have a feeling that that might be a little clumsy, though.
So, if they shouldn't be headings for the text logo, would I just create each as a separate paragraph with a name, and then specify a specific size in the stylesheet?
Also--I can bet it was really hard to figure out what I was intending, without seeing the webpage itself. You got it exactly; that's incredible!
The menu.
In the menu, it isn't just one level; there is another level beneath it for three of the links.
I was trying to do it as:
<ul class="menu">
<li><a href="/index.html">Home</a> </li>
<li><a href="/in-the-news.html">In the News </a>
<ul class="menu">
<li><a href="/article.html">Article</a></li>
<li><a href="/tv-ad.html">TV Ad</a></li> </ul>
<li>...
</ul>
but that doesn't work; it breaks it up so there's multiple rows. Would you know how to make there be two levels of links?
I tried adding more padding to the footer, but it actually raised it (which i don't understand). More padding to the body--it didn't help.
The only way I can figure it out right now is through old html stuff which I think I'm not supposed to use because it clutters the page--by adding <BR /> at the end of the content. Is there another way?
Now I've got it looking perfect--but I wonder if the CSS is too convoluted, or if it's okay?
}
.footer {
position: absolute;
bottom: -10;
font-size: xx-small;
border-top: 1px solid #fc3;
width: 100%;
background-color: white;
margin-left: -8px;
}
.footer p{
padding: 5px;
}
I also don't understand why it was -8px that fixed it. But...it did.
I have another.
There's one page where the text and the images are centered. Normally, I'd put in some <BR />s to make more visual space between the text paragraphs and photos (which are all touching top to bottom).
What I did for the CSS was make the paragraph in the stylesheet have some padding on the top and bottom, and be centered. Which works visually--but probably only for this page and a few others.
p.center { text-align: center;
padding: 10px;
}
Is there a better way to do this? Give more space between specific paragraphs?
* {
padding:0;
margin:0;
?Does that mean that everything has 0 padding and margin unless specified?
Yes, it resets the browser defaults.
You can overrule it with any statement due to its low specificity (learn about specificity another time, it's rather hard to get fully right from the first time)
I just have to figure out how to move the menu more into the center (in all the browsers).
While I didn't actually mean to propose to use this menu as a replacement for the one you already had (it's really something I was experimenting with).
Rounded borders is something from CSS3, opera doesn't do it yet.
Since this menu uses inline content, you can center it by using text-align: center on the .menu .
I have the style part in a linked stylesheet ...
In the head of the html add something like:
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/ie5.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/fie7.css" />
<![endif]-->
IE6 will load style.css and ie6.css
IE7 will load style.css and ie7.css
all others will just load style.css and see the html as a comment, somethign to ignore (well IE8 is still a bit different, but it won't go and fetch it is written as above).
The second and third header links in IE 7 stayed blue. I tried to do "inherit" in the stylesheet, but that didn't change anything. So I added:
}
#header h2 a {
text-decoration: none;
color: #6fa408;
}
#header h3 a {
text-decoration: none;
color: #6fa408;and that worked. I have a feeling that that might be a little clumsy, though.
First off you can write
AAA {
XYZ;
}
BBB {
XYZ;
}
AAA, BBB {
XYZ;
}
So the code could be
#header h2 a, #header h3 a {
text-decoration: none;
color: #6fa408;
}
The inherit works, just not for legacy IE versions that need to color (look how it's done for the h1)
So in the style.css it could be:
#header h1 a, #header h2 a, #header h3 a {
text-decoration: none;
color: inherit;
}
#header h1 a, #header h2 a, #header h3 a {
color: #6fa408;
}
I added a bit of padding to the body, so that there's a little bit of white space between the yellow border and all the text and images. I finally understand or get the shorthand more:
padding: 0 8px;
Be careful with that one, the padding on the footer, content and header are already there in order to get the effect. You risk breaking the width on e.g. the footer by doing that (your border above the footer won't show in yellow on yellow, but it'll be there extending out of the body)
I'd recommend in this case (due to the way it
s constructed to not set padding on the body, and increase the padding on .content, .footer and the header
Ah, I see you found it:
I also don't understand why it was -8px that fixed it. But...it did.
In the menu, it isn't just one level; there is another level beneath it for three of the links.I was trying to do it as:
<ul class="menu">
<li><a href="/index.html">Home</a> </li>
<li><a href="/in-the-news.html">In the News </a>
<ul class="menu">
<li><a href="/article.html">Article</a></li>
<li><a href="/tv-ad.html">TV Ad</a></li> </ul>
<li>...
</ul>but that doesn't work; it breaks it up so there's multiple rows. Would you know how to make there be two levels of links?
Yes, for the html that's the right code, however an two levels of links menu requires me to know quite a bit more of what you want, there's way to many variations possible.
I'm not advocating you should try to write your own CSS menu systems till you're far more familiar with CSS.
Most of the multiple level ones also require scripted help in order to get IE6 to do anything useful with them (IE6 doesn't support :hover on the first level li)
Let's get back to this later. It can be fixed it's first a matter of knowing what you seek it to look like.
Um. And once I put my content in, the space between where the content should be and the footer is gone.
If you look at the .content 's CSS it gives it a bottom padding that prevents the content inside the .content div from getting inside the space a single line of footer needs (if you add more than one line of stuff to the footer, you need to increase this accordingly.)
.content {
padding: 0 5px 2em;
}
Those 2em are the padding-bottom (5px to left and right and none to the top)
The thing is that absolutely positioned elements (like that footer) are taken out of the flow and can overlap with other elements. This can be a blessing (e.g. for drop-down menus), or a curse (in the case your footer would nto have predictable height)
I tried adding more padding to the footer, but it actually raised it (which i don't understand). More padding to the body--it didn't help.
The body goes around the .content div at the bottom, the .footer is removed from the flow and doesn't influence the size nor position of any other element. Adding padding to the footer adds padding around it's content. since the bottom of the footer is aligned with the bottom of the body it makes the content of the footer shift up over lapping more with whatever is above it.
If you did add you content in the .content div, check that the html still validates. Anything that the browser thinks isn't part of the .content div would cause an overlap with the footer.
I reread what you said about the footer, and the position, and being next to the body. So I did -10 for the bottom, and that pushed the footer down out of the white space and into the yellow border at the bottom. At least it separates it from the content/text...though I think I prefer it on white space. So then I gave it a white background, and that almost fixed it--but it's moved over a bit too far to the right. So I played with the padding first, which made sense to me but didn't affect it, and then the left margin.
If your content is now not long enough to need scroll bar, you'll still get one as the footer is now always at least 10px below the viewport. Better go back to the original and figure out why the padding on the bottom of the .content isn't doing what it should (my best guesses are: either something that's not in the .content, something causing the browser to think the div is closed (e.g. the code doesn't validate any longer), ...
For the record I didn't intend for you to use it as is (it's ok if you do), it was merely intended to teach some CSS and how it's supposed to work.
I didn't realize you weren't inteding it for me to use (and am so glad it's okay that I do). I've put the menu back the way I had it. I completely forgot in my excitement that I had it working after jbinbpt got me to take the conditionals out. And I forgot I had it linked to a menu stylesheet. So I've put that back, fiddled with it. I just can't get it to center, still, even with text align.
Thank you for explaining how to set up the stuff for IE; I like that they have separate stylesheets for what they don't do properly. I'll set that up.
I'm going to go through everything else you said more thoroughly, piece by piece.
Thank you!
I reread over what you said, and it made more sense. I've put the ie info in separate css files. It helps to see how to write multiple things the same way. And I took off the padding I added into the body, and put it into the content, header, footer, and menu instead--and it worked! Thank you, thank you, thank you!
I still haven't figured out how to center the menu, but it looks pretty good. (when I move it over with padding, I have to decrease the overall width, otherwise there's white space that goes over the right of teh yellow border.)
One thing I'm still not sure about with the overall layout:
I want more white space between headers and content, and maybe between paragraphs and other paragraphs. They're a bit too close together. BUT it may only be for this page, where there's less text. So, do I make a specific paragraph style class that has more padding? Do I add in <BR/>s? Or what?
(I took the browser defaults off by the global reset).
E.g.
.content p, .content p+ul, .content p+h3,
.content p+h4, .content p+h5, .content p+h6 {
margin: 5px 0 0 0;
}
.content p+p {
margin: 3px 0 0 0;
}
.content p+h1 {
margin: 15px 0 0 0;
}
.content p+h2 {
margin: 10px 0 0 0;
}
Take it in what it says: the "+" in a selector like p+h4 applies to a h4 that's preceded by a p in the same parent.
It might be useful to add something a bit less complex to the IE6 stylesheet (it doesn't honor the sibling selector ...)
I changed the spacing to ems so that hopefully it'll look right over multiple viewports. It looks right in all my browsers.
I think I'm still trying to wrap my head around how to set things up specifically. So, I have places where I want paragraphs to be in green text, and centered. I did this:
}
p.green-center {
color: #6fa408;
text-align: center;
}
in the style sheet. Is that all right, or clumsy again?
From a purist point of view, it's better to name your classes not for what they look like, but for what they contain.
So if it's a quote, name it "quote", if it's something important, name it "important", ....
That way if you decide at a later time to make it look differently it all still makes sense and you don;t need any changes in your html. It would be kinda weird to end up with a class called "green" that sets the color to "red" ...
But as I said: purist view.
I've been trying to convert another page over, and I'm trying to make a CSS box without using tables. I can't get it quite like I want. I want a box that has a heading in a different background on the top, like a title, and then an image and text in another background color beneath it, but touching, no white space.
I did this:
<div class="floatRight" style="width:40%;"><P style="background-color: rgb(245, 209, 91); font-weight: bold; margin: 0">title goes here!</p>
<p style="background-color: rgb(255, 230, 148);"><img src="as-seen-on-tv.gif" height="74" width="100" class="floatLeft"></p>
<p style="background-color: rgb(255, 230, 148); margin: 0">Featured this year ....text text text </p></div>
It looks almost right and is where I want it (on the right hand side of the page, too) BUT there's a white space between the heading and the next part, AND I have a feeling that it's very clumsy and not right at all. Probably I shouldn't be dividing it up as paragraphs? I'm just not sure how to divide it. I've been searching online for an example but I think I'm not using the right words to find it. Would you know how to do this?
I think I have it:
<div class="floatRight" style="width:40%;">
<div style="background-color: rgb(245, 209, 91); font-weight: bold; margin: 0">text text on TV!</div>
<div style="background-color: rgb(255, 230, 148);"><img alt="as-seen-on-tv (2K)" src="as-seen-on-tv.gif" height="74" width="100" class="floatLeft"></div>
<div style="background-color: rgb(255, 230, 148); margin: 0 2px">Featured this year on text text text text! </div></div>
It looks right...only is it all right to have that much code inline?
I'm working on a testimonials page. Without changing anything in the stylesheet, just the content on the page (less--a few quotes and two photos), the bottom photo moves down through the footer line and the content space, and goes into the bottom yellow border. I don't understand why or how to fix it.
