Webomatik

One of the things I have been playing around lately is different blog navigation styles and specially how to create pure CSS navigation, without any JavaScript, external images and other stuff. This is what I have made so far. Check the code below and feel free to ask anything about it.

view live demo

.bar, .ncontent {
font-family: Garamond, sans-serif;
}
.bar {
width: 200px;
border: 1px solid black;
background-color: #669999;
text-align: center;
font-weight: bold;
}
.bar+.ncontent {
display: none;
}
.bar:hover+.ncontent {
width: 200px;
border: 1px solid black;
display: block;
}
.ncontent:hover {
display: block !important;
width: 200px;
border: 1px solid black;
}
.bar:hover+.ncontent ul,
.ncontent:hover ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.bar:hover+.ncontent li,
.ncontent:hover li {
text-decoration: none;
text-align: center;
padding: 3px;
font: Geneva, Helvetica;
font-size: 0.8em;
background-color: #E0DFB3;
}
.bar:hover+.ncontent li a,
.ncontent:hover li a {
text-decoration: underline;
color: #333333;
}

Class 'bar' is used for styling navigation sections and class 'ncontent' for navigation sub-content.

Webomatik is nearly one year old (if we count active blogging period) and it's time for some changes. This blog deserves better structure and some new goals. Interests are not different, but only wider and because this blog is still about web2.0 enthusiasm new perspectives are appearing.

* * * * *

Some time ago Webomatik started Final contest, monthly prizes giveaway, but since last two months winners of free 6 months ad spot haven't contacted me with details, I figured it doesn't make any sense to continue with contest.

It was great fun to visit and 'drop' blogs on Lifetime Drops List in last few months. However list grew and I found myself spending at least one hour every single day doing this which is very time consuming. I will suspend Lifetime Drops List for a month to use that extra time on some new things and after that I hope I will continue with it.

You can expect to read some new stuff here about web development. This will include subjects like XHTML/CSS techniques and layouts development, Blogger and website templates, maybe even Flash and JavaScript stuff like frameworks and tutorials. Old interests in free web services will remain important part of Webomatik experience.

Some think it is very important what we do with our online profiles and how do we present ourselves to do wider audience. It doesn't matter what service we are talking about every one of social services has profile page where you can write short bio, put link to your blog or email and upload your photo or avatar. There are differences between services, but basic options are often similar.

Whenever you can, change default profile image, specially if you use Twitter and you want to build bigger network of followers, because default image tells about yourself more than you think in negative way.

If you don't want to upload your own photo, for some reason, you can create avatar, graphic representation of yourself using some of free avatar generator services. One of those is Face Your Manga, Flash based application where you can make thousands unique combinations by choosing sex, hair style, color, face lines, face parts, clothes and many others.

They require some data from you like email address, age, name if you want to download your avatar. But you can easily hack this service if you don't like unwanted spam or just you can't be bothered. When you finish creating your avatar, just press PrintScreen keyboard key (Windows users), open your favorite (open source) graphic editor and paste your creation. Small hack to make life easier.

When you finish updating your Twitter profile, feel free to add me as a friend, I want to see what kind of avatar you have created.