Anoneh's CSS

Posted under » CSS » About Anoneh updated on 08 November 2011

There are no tables in this website. All are done by CSS.

I started this website in 2009 so the width is 960 which was the new standard then. I forsee the width of websites getting wider though.

Body Font is

font:13px Verdana, Arial, Helvetica, sans-serif; color: #333333

What makes this site slightly easier to read is this

line-height: 15px;

I hate the default bullets so I followed what BBC did.

line-height: 1.3em;
background:transparent url(/img/v3/arrow.gif) no-repeat 8px 8px;
padding:4px 0pt 4px 18px;

When you rollover a link, there is a colour background.

a:hover{background: #E5F7FD;}

The rollover colour is not the default boring blue.

a:visited {color: #005A8C;}

The blue colour scheme is following Skype's. I like it because I once developed Skype's Singapore website when I was working for "a local ISP" which was their partner then.

in 2011, I've added a glow-shadow for the rectangular content area. First I did the top part, then the contents and end with the footer.

.twoColElsLtHdr #header {  
    background:url('../imgs/bg_width.gif');
	position:relative; top:15px;
 } 
.twoColElsLtHdr #whitebg {  
    background:url('../imgs/bg_width.gif');
	position:relative; top:5px;
}
#header .top-l, #header .top-c, #header .top-r, #bottom .bottom-l, #bottom .bottom-c, #bottom .bottom-r { float:left; }  
#header .top-l { background:url('../imgs/top_l.gif'); width:14px;} 
#header .top-c { background:url('../imgs/top_c.gif'); width:960px;} 
#header .top-r { background:url('../imgs/top_r.gif'); width:14px;} 
#bottom .bottom-l { background:url('../imgs/bot_l.gif'); width:14px;} 
#bottom .bottom-c { background:url('../imgs/bot_c.gif'); width:960px;} 
#bottom .bottom-r { background:url('../imgs/bot_r.gif'); width:14px;} 

For chrome and safari to look ok without the gap at the bottom, you need to the "position:relative; top:XX;" at the appropriate places.

If you like how the coding you see above is formatted with numbers and all, honestly I have no idea how it is done. It's all generated from here.