dep
01-09-2006, 02:25 PM
I think it's funny how sometimes these books seem a *little* bit too heavy into the whole external CSS thing.. Here's an example that I made.
Centering Text on the Page
In the past, one would have to place the center text markup right in the HTML, like this:
<CENTER>Hello World!</CENTER>
Well, thanks to the magic of CSS, this era is at an end. Centering text is easier than ever by using CSS. First, type in the text that you're going to want to center.
Hello World
Now, you'll place some simple, lean HTML around this text to make it easy to interpret by your stylesheet. It makes sense to me that you'll want to use an unordered list...
<ul>
<li>Hello World</li>
</ul>
Now that you've placed the HTML on the page, it's easy to dive into the css. Create an entry for the UL in your stylesheet.
<style type="text/css">
<!--
ul{
}
li{
}
-->
</style>
within the curley braces on the page, we will place the code that will lock our text in to place!!! Look at the following code.
<style type="text/css">
<!--
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
float: left;
text-align: center;
width: 100%;
}
-->
</style>
With a few simple lines of CSS, you can see now how we can flawlessly place our text in the middle of the row!!! Isn't that great!?
dep
Centering Text on the Page
In the past, one would have to place the center text markup right in the HTML, like this:
<CENTER>Hello World!</CENTER>
Well, thanks to the magic of CSS, this era is at an end. Centering text is easier than ever by using CSS. First, type in the text that you're going to want to center.
Hello World
Now, you'll place some simple, lean HTML around this text to make it easy to interpret by your stylesheet. It makes sense to me that you'll want to use an unordered list...
<ul>
<li>Hello World</li>
</ul>
Now that you've placed the HTML on the page, it's easy to dive into the css. Create an entry for the UL in your stylesheet.
<style type="text/css">
<!--
ul{
}
li{
}
-->
</style>
within the curley braces on the page, we will place the code that will lock our text in to place!!! Look at the following code.
<style type="text/css">
<!--
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
float: left;
text-align: center;
width: 100%;
}
-->
</style>
With a few simple lines of CSS, you can see now how we can flawlessly place our text in the middle of the row!!! Isn't that great!?
dep