Hello World! Wordpress developers’s two-way sentences. MARKUP CODE IS ART!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

I decided to write my first CSS and xHTML post on this one, instead of deleting it. You may will ask: “why are you doing it? “. Well, just cuz the content of it it’s thinly geek. I love the Wordpress developers’s two-way sentences!

The famous Worpress tagline is: CODE IS POETRY (I don’t know exactly where this sentence came from and who said it first, but it’s really a great one). I would love to say to everybody who write, as i do, xHTML and CSS: MARKUP CODE IS ART.

Usually, while talking with a customer about a campaign, or a visual product to realize, I automatically figure in my mind how this product will looks like. Therefore, the mind-walk is: words transposed into images.

The same happen while using style sheets. Code transposed into graphic images. I think that it can be considered art, just when you do it automatically without seeing the result in real time. You may need the “realtime changes’s step” when you are rounding it off, when the main framework is done.

After that, I have to make an example of what I’m talking about, then.. here you are!

HERE IS THE CODE FOR A LIST OF ITEM.

<div id=”menu”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ul>
</div>

I was thinking to build up a menu, then i figure out in my mind how it would looks like. Mmmhh.. let’s have a horizontal menu, clear, well spaced, orange with white links; as wide as this article, with a simple rollover on the links.

I CREATE A NEW .CSS FILE AND WRITE DOWN:

#menu {
width: 100%;
height: 39px;
margin: 0 auto;
padding: 0;
text-align:center;
background-color: #ffae00;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
height:40px;
}

#menu li {
display: inline;
margin: 0;
padding: 0;
height:40px
}

#menu a {
display: block;
float: left;
width: 20%;
height: 30px;
padding: 10px 0 0 0;
text-decoration: none;
text-align: center;
font-size: 11pt;
color: #fff;
background-color: #ffae00;
}

#menu a:hover {
color: #fff;
font-weight:bold;
text-decoration:underline;
background-color: #ffae00;

}

AND HERE IS THE RESULT:


Yeah, I know it’s a simple one. That’s only to show what I was talking about.

After that, here it comes the second step: round it off! Your idea now has a shape and you have to preen it. Then some adjustment and it’s over.

#menu {
width: 100%;
height: 39px;
margin: 0 auto;
padding: 0;
text-align:center;
background-color: #ffae00;
background: #ffae00 url(’img3.gif’) repeat-x;
border-bottom: 3px solid #ff8400;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
height:40px;
}

#menu li {
display: inline;
margin: 0;
padding: 0;
height:40px
}

#menu a {
display: block;
float: left;
width: 20%;
width: 19%;
height: 30px;
padding: 10px 0 0 0;
text-decoration: none;
text-align: center;
font-size: 11pt;
color: #fff;
background-color: #ffae00;
border-left: 2px solid #ff8400;
}

#menu a:hover {
color: #fff;
font-weight:bold;
text-decoration:underline;
background-color: #ffae00;

}

Yup, it’s over. I hope I made the right example to let you understand what I mean. The final result it’s not so bad..   …IS IT ART OR NOT?

By the way, I MUST suggest to anyone who didn’t use it yet, Firebug: a FF apps which allow to edit your style sheet directly on the browser in real time (without saving the real .css).

Share it!

Related Post

• Web Design standards: too many newbie