Its time to bow to the power of CSS!

Category simple-html-css

0

One of the things I've noticed a lot lately is developers when designing for the web, work way to hard to accomplish something on the web. Especially Domino designers. Thats mainly because we haven't had a real web-friendly design interface. I felt some reluctance and even push back when it comes to designing using CSS, and it just causes more work.

Take for example, the following. I want to create a quick layout with a box, an image, and some text, centered in the box, and I want the WHOLE THING to be click-able to download a file.



So what do you think you'd do? Create a table, center it all in there with DIVs?  Its actually so much easier with simple HTML and CSS, Check it out:

Here's the HTML:

<a class='logo' href='/brochure.pdf'><img src='brochure_icon.jpg' /><br />Download our Brochure</a>

WHAT?!?!?!? That's it??? Just the link, the text and the img tag?? Where is the box, where is the action that happens when you click the box?

Check out the simple CSS:

a.logo {
        display: block;
        width: 615px;
        height: 250px;
        border: 1px solid #8DC63F;
        background-color: #E7F3D6;
        text-align: center;
        text-decoration: none;
        color: #333333;
}

a.logo img {
        border: none;
        margin: 10px;
}

a.logo just says "apply the following styles to an anchor tag (<a>) that has the class 'logo'," and a.logo img just says any img tag inside a an anchor tag with the class logo should get these styles too. The key here is we're changing the <a> tag from displaying inline to displaying a as a block, which means we can then give it dimensions (width and height) ... And because it IS the anchor, when you click on it, it does what anchors are supposed to do. All the rest of the CSS just makes it look "pretty" ... colors, borders, margins, etc.

Give it a try, see what you can do with simple HTML + CSS !!  You can make pretty complex layouts with minimal simple HTML and CSS

Posted by Jeremy G Hodge On 06/18/2009 | Permalink |