HTML, CSS, and Positioning
As many may have noticed I now have a brand new layout and I’m really digging it. It didn’t come with it’s share of problems though and I’ll point them out here.
I started with the base layout, it’s called Aeros it was put together by Joe at thebuckmaster.com.
I didn’t change too much but I did make some changes that I think make this layout a cut above the original.
I started out and immediately decided to pick a new background image, I’m not saying the defaults weren’t decent but I personally couldn’t stand the blurry background. I am now using one of my favorite desktop images as my background, it’s called Coastal Sunset by nauHs.
I personally don’t like fixed width layouts either so that had to change. I adjusted the body container…
#rap {
margin:0 auto;
width:90%;
}
I also had to change the #headmenu and #header div width to 100%. to fit the new dynamic layout.
I tried to make my changes entirely in the CSS but unfortunately to make the content area fit properly I had to add a new div (all pages with this post bit), in addition to some extra CSS to use positioning.
the html… (don’t forget to close the tags)
<div class=”list_postcontainer”>
<div class=”datecomrap”>
and the CSS…
.list_postcontainer
{
float: left;
clear: left;
width: 100%;
}
Next remove the margin_bottom and width attributes from the .storywrap class and add…
margin: 0 auto 15px 35px;
Next just add the following attributes to the .datecomrap class and you should be good to go.
clear: left;
position: absolute;
I think I also adjusted the side bar to use 18% width instead of the fixed width it used to be, I personally think that dynamic layouts are the only way to go, having a fixed width just makes your design look bad or weird in other people’s browsers.
