Hi, <br />
<br />
I'm a newbie to HTML programming and have already hit a wall which I'm sure is quite easy to scale, but I have no idea how. <br />
<br />
I'm trying to add a two-color scheme to my webpage, one background color for the "header" portion above a horizontal break/line and another color for the "body" portion below. I've tried using two seperate <Body color=...></Body> sections, one on each side of the <hr>, but the lowest declared color saturates the entire page. <br />
<br />
I apologize if the simplicity of this question insults anyone's intelligence (other than mine), but I'm quite stumped. Thanks for any help!<!--content-->Sounds like a div would be your best bet:<br />
<br />
<div>Contents of header in here</div><br />
<div>rest of body</div><br />
<br />
I recommend you use seom simple css with that:<br />
<br />
<div style="background-color: #cccccc;">Contents of header in here</div><br />
<div style="background-color: #0000ff;">rest of body</div><br />
<br />
substitute in your own color values. <br />
Does that help?<!--content-->Yes, that works wonders. Thanks Dave! You are the man. <br />
<br />
One little wrinkle though; do you know how to get rid of the white border around the page? It doesn't seem that the background color is filling up the entire page.<!--content-->You can get rid of the whitespace on your page like this (simply put this before your <div> containers):<body style="margin: 0px; padding: 0px; border: 0px;">This will ensure that all whitespace is removed in all browsers which support CSS1.<!--content-->A little bit more css is in order here. however, do you want everything to go right to the edge of the page?<br />
<br />
If you put this in the head section of your document:<br />
<br />
<style type="text/css"><br />
body {<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
</style><br />
<br />
This will cause everything to go right to the edge, removing your white border.<br />
<br />
On the other hand, you could use<br />
<style type="text/css"><br />
body {<br />
background-color: #0000ff;}<br />
</style><br />
to change the color of the currently white border.<br />
<br />
If you use the first solution, let me know and I'll show you some more css to control how close the content of the divs come to the edge of the page.<br />
<br />
You typed that reply faster than I did Fred... LOL<!--content-->Sorry Dave. It's really because yours was more descriptive, though.
<!--content-->LOL - trouble is, we've probably confused JKim with our different methods of using the same code, so I guess I'd better explain that too...<br />
<br />
There's three (at least) ways to use css code:<br />
<br />
1) Inline styles - <br />
<div style="some css stuff in here"><br />
2) In the head section - <br />
<style type=text/css"><br />
more css stuff<br />
</style><br />
3) External style sheet, using the link attribute. CSS info is used from an external file, allowing you to use the same styles for more than one page.<!--content-->Excellent, the first one worked guys. I was confused for a little while, but I think I've got it (somewhat) figured out now. <br />
<br />
Just to make sure I've got the basic idea, what the... <br />
<br />
<style type=...> <br />
Body{....} <br />
<br />
...did was assign the margin and padding settings to whatever follows within a <Body></Body> on the page, yes? Now, for the sake of not altering the formatting of all text/buttons/linx contained w/in a common element (I think that's the right term), would it be possible to declare a unique name element? i.e. -><br />
<br />
<style type=...><br />
myLink{....}<br />
</style><br />
....then...<br />
<myLink> text OR link </myLink><br />
<br />
Would that work? Or would the use of Classes be more appropriate there? And does it matter that this is all taking place on an ASP page? <br />
<br />
Thanks guys, I really appreciate all the help.<!--content-->The second one won't work as expected since, obviously, myLink is not a valid (X)HTML element. What you want to be using is an id or a class. The only difference between the two is that an id should only be used once, whereas a class can be used as many times as you want (just like the words mean in real life).<br />
<br />
To define an id, you add a hash mark (#) before what you want to name it. For example, this will create a class called foo:<style type="text/css"><br />
#foo {<br />
color: blue;<br />
}<br />
</style>Then, since you now have an id called foo, you can apply it to one element of your choice. This can be done using an element's id attribute. For example:<h1 id="foo">Hello, World</h1>Since the rules in the foo id specify that the color of the element should be blue, the color of that <h1> element would be blue.<br />
<br />
Using classes is exactly the same except you define them using a period (.) before the name of the class. This, for example, will create a class named bar:<style type="text/css"><br />
.bar {<br />
color: red;<br />
}<br />
</style>Now that we have a class named bar, we can apply it to as many elements as we want. Just as we use an id attribute to apply an id, we use the class attribute to define a class. For example:<h1 class="bar">Hello, World</h1><br />
<h1 class="bar">Hello, World</h1><br />
<h1 class="bar">Hello, World</h1>Now all of those <h1> elements would be red. Also note that these classes and ids can be applied to any element on the page, I just used <h1> for an example.<br />
<br />
I hope that helps you out.<!--content-->Thanks Fred. The lesson is greatly appreciated.<!--content-->You're quite welcome.<!--content-->
<br />
I'm a newbie to HTML programming and have already hit a wall which I'm sure is quite easy to scale, but I have no idea how. <br />
<br />
I'm trying to add a two-color scheme to my webpage, one background color for the "header" portion above a horizontal break/line and another color for the "body" portion below. I've tried using two seperate <Body color=...></Body> sections, one on each side of the <hr>, but the lowest declared color saturates the entire page. <br />
<br />
I apologize if the simplicity of this question insults anyone's intelligence (other than mine), but I'm quite stumped. Thanks for any help!<!--content-->Sounds like a div would be your best bet:<br />
<br />
<div>Contents of header in here</div><br />
<div>rest of body</div><br />
<br />
I recommend you use seom simple css with that:<br />
<br />
<div style="background-color: #cccccc;">Contents of header in here</div><br />
<div style="background-color: #0000ff;">rest of body</div><br />
<br />
substitute in your own color values. <br />
Does that help?<!--content-->Yes, that works wonders. Thanks Dave! You are the man. <br />
<br />
One little wrinkle though; do you know how to get rid of the white border around the page? It doesn't seem that the background color is filling up the entire page.<!--content-->You can get rid of the whitespace on your page like this (simply put this before your <div> containers):<body style="margin: 0px; padding: 0px; border: 0px;">This will ensure that all whitespace is removed in all browsers which support CSS1.<!--content-->A little bit more css is in order here. however, do you want everything to go right to the edge of the page?<br />
<br />
If you put this in the head section of your document:<br />
<br />
<style type="text/css"><br />
body {<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
</style><br />
<br />
This will cause everything to go right to the edge, removing your white border.<br />
<br />
On the other hand, you could use<br />
<style type="text/css"><br />
body {<br />
background-color: #0000ff;}<br />
</style><br />
to change the color of the currently white border.<br />
<br />
If you use the first solution, let me know and I'll show you some more css to control how close the content of the divs come to the edge of the page.<br />
<br />
You typed that reply faster than I did Fred... LOL<!--content-->Sorry Dave. It's really because yours was more descriptive, though.
<!--content-->LOL - trouble is, we've probably confused JKim with our different methods of using the same code, so I guess I'd better explain that too...<br /><br />
There's three (at least) ways to use css code:<br />
<br />
1) Inline styles - <br />
<div style="some css stuff in here"><br />
2) In the head section - <br />
<style type=text/css"><br />
more css stuff<br />
</style><br />
3) External style sheet, using the link attribute. CSS info is used from an external file, allowing you to use the same styles for more than one page.<!--content-->Excellent, the first one worked guys. I was confused for a little while, but I think I've got it (somewhat) figured out now. <br />
<br />
Just to make sure I've got the basic idea, what the... <br />
<br />
<style type=...> <br />
Body{....} <br />
<br />
...did was assign the margin and padding settings to whatever follows within a <Body></Body> on the page, yes? Now, for the sake of not altering the formatting of all text/buttons/linx contained w/in a common element (I think that's the right term), would it be possible to declare a unique name element? i.e. -><br />
<br />
<style type=...><br />
myLink{....}<br />
</style><br />
....then...<br />
<myLink> text OR link </myLink><br />
<br />
Would that work? Or would the use of Classes be more appropriate there? And does it matter that this is all taking place on an ASP page? <br />
<br />
Thanks guys, I really appreciate all the help.<!--content-->The second one won't work as expected since, obviously, myLink is not a valid (X)HTML element. What you want to be using is an id or a class. The only difference between the two is that an id should only be used once, whereas a class can be used as many times as you want (just like the words mean in real life).<br />
<br />
To define an id, you add a hash mark (#) before what you want to name it. For example, this will create a class called foo:<style type="text/css"><br />
#foo {<br />
color: blue;<br />
}<br />
</style>Then, since you now have an id called foo, you can apply it to one element of your choice. This can be done using an element's id attribute. For example:<h1 id="foo">Hello, World</h1>Since the rules in the foo id specify that the color of the element should be blue, the color of that <h1> element would be blue.<br />
<br />
Using classes is exactly the same except you define them using a period (.) before the name of the class. This, for example, will create a class named bar:<style type="text/css"><br />
.bar {<br />
color: red;<br />
}<br />
</style>Now that we have a class named bar, we can apply it to as many elements as we want. Just as we use an id attribute to apply an id, we use the class attribute to define a class. For example:<h1 class="bar">Hello, World</h1><br />
<h1 class="bar">Hello, World</h1><br />
<h1 class="bar">Hello, World</h1>Now all of those <h1> elements would be red. Also note that these classes and ids can be applied to any element on the page, I just used <h1> for an example.<br />
<br />
I hope that helps you out.<!--content-->Thanks Fred. The lesson is greatly appreciated.<!--content-->You're quite welcome.
<!--content-->