pageoneresults
03-03-2002, 22:59/10:59PM
Good evening everyone! I was going to post this in the tips section but I thought this new forum would be more appropriate. My username is appearing too many times down there anyway! ;)
These past seven days have truly been an accelerated learning experience for me. I built my first page using pure CSS (nadda table), and also validated with the W3C for 4.01 Transitional.
CSS and Absolute Positioning (http://www.seoconsultants.com/css-test.htm)
I'm currently in the process of converting the entire site over to a combination of css positioning and minimal utilization of tables. I haven't progessed to the point where I feel comfortable absolutely positioning everything on my page, but I will!
My hopes in starting this thread are to educate on the use of CSS1 (the basics) and now CSS2 (the basics). I emphasize the basics because I am no CSS guru, but I learn quickly. All of the imposing limitations that I had previously are now almost non-existent. Positioning of html was my most important area of optimization. Why? Because I started my career back in the spidering days.;) And I still feel that properly formatted html plays an important part in the overall optimization of web sites.
When I first viewed the page above, I got goose bumps. My <h1> tag starts right after the <body> tag. You can do no better using traditional optimization techniques! In fact, I'd be willing to bet that you'll find 1 out of 100 ordinary sites that have achieved this, most wouldn't know anyway. But, I'm sure there are many optimized sites that are also not utilizing this design method or strategy.
Could it really be a strategy? I don't know yet! But, from my six years of experience, along with my gut instinct, tell me that the few sites I'm building right now will rank a little higher than they would have using my previous methods. I say previous, because I am not turning back!
When I switched to using external css and js a few years ago, that was a big thing. I was able to minimize code bloat and provide a clean path to content. But, there were usually images that appeared before that content and that was always a problem. What do you do when you have 10-14 <td> tags with images in them? That question no longer plagues me. I now put them at the bottom of the html in a <div> tag whose position is being controlled by properties within my external CSS file. Here's an example...
This is my header <div>
<div class="header">
<!--webbot bot="Include" U-Include="navigation-2/top-class.htm" TAG="BODY" -->
</div>
Sorry, I even got a little fancy and used an FP include. You could also use SSI's (Server Side Includes).
Here is the css controlling the header <div>
div.header{
position:absolute;
top:0px;
left:0px;
width:750px;
visibility:visible;
}
This is my body <div>
<div class="body">King Content Here</body>
Here is the css controlling the body <div>
div.body{
position:absolute;
top:127px;
left:151px;
width:599px;
visibility:visible;
}
Now, go ahead and give it a try. Set up an external css file for testing. Build a simple page just using the header and body <div> tags and it will all click, literally!
Enjoy, I hope this will keep some of you awake as long as it has me over the past week. Payback!
These past seven days have truly been an accelerated learning experience for me. I built my first page using pure CSS (nadda table), and also validated with the W3C for 4.01 Transitional.
CSS and Absolute Positioning (http://www.seoconsultants.com/css-test.htm)
I'm currently in the process of converting the entire site over to a combination of css positioning and minimal utilization of tables. I haven't progessed to the point where I feel comfortable absolutely positioning everything on my page, but I will!
My hopes in starting this thread are to educate on the use of CSS1 (the basics) and now CSS2 (the basics). I emphasize the basics because I am no CSS guru, but I learn quickly. All of the imposing limitations that I had previously are now almost non-existent. Positioning of html was my most important area of optimization. Why? Because I started my career back in the spidering days.;) And I still feel that properly formatted html plays an important part in the overall optimization of web sites.
When I first viewed the page above, I got goose bumps. My <h1> tag starts right after the <body> tag. You can do no better using traditional optimization techniques! In fact, I'd be willing to bet that you'll find 1 out of 100 ordinary sites that have achieved this, most wouldn't know anyway. But, I'm sure there are many optimized sites that are also not utilizing this design method or strategy.
Could it really be a strategy? I don't know yet! But, from my six years of experience, along with my gut instinct, tell me that the few sites I'm building right now will rank a little higher than they would have using my previous methods. I say previous, because I am not turning back!
When I switched to using external css and js a few years ago, that was a big thing. I was able to minimize code bloat and provide a clean path to content. But, there were usually images that appeared before that content and that was always a problem. What do you do when you have 10-14 <td> tags with images in them? That question no longer plagues me. I now put them at the bottom of the html in a <div> tag whose position is being controlled by properties within my external CSS file. Here's an example...
This is my header <div>
<div class="header">
<!--webbot bot="Include" U-Include="navigation-2/top-class.htm" TAG="BODY" -->
</div>
Sorry, I even got a little fancy and used an FP include. You could also use SSI's (Server Side Includes).
Here is the css controlling the header <div>
div.header{
position:absolute;
top:0px;
left:0px;
width:750px;
visibility:visible;
}
This is my body <div>
<div class="body">King Content Here</body>
Here is the css controlling the body <div>
div.body{
position:absolute;
top:127px;
left:151px;
width:599px;
visibility:visible;
}
Now, go ahead and give it a try. Set up an external css file for testing. Build a simple page just using the header and body <div> tags and it will all click, literally!
Enjoy, I hope this will keep some of you awake as long as it has me over the past week. Payback!