Jenn Mears Web Design » CSS

Welcome To The New Site!

Administrator — Thu, 30 Apr 2009 04:26:59 +0000

Ooh, I am so excited! I wanted to utilize the Sliding Door CSS theme by Wayne and incorporate it with a previous motif on the site which compared developing a site to the changing of the seasons. I’m still “unpacking the boxes” a little, so keep visiting for changes!

Tabling the Matter

Administrator — Mon, 11 Aug 2008 15:46:01 +0000

This is actually an addendum to the previous post, “A Case of the DT’s”. While a Definition List worked for the simple matter of placing an image and some information together neatly, when I wanted similar information to line up across the page, things got crazy again! After an hour of the “Wordpress Shuffle”
(changing a line of CSS, then checking the site in a different window, running back, change a different thing, run back to check…), I gave up and was on the verge of leaving the page as is, when I had a “eureka!” moment. Could I make a template for the page and insert a table inside the code?

Turns out, I could.

It seems weird, going back to the old school table method, but when the graphic designer wants the images and text to march across the page, sometimes the old trick works best.

For extra credit, I guess I could find a way to automatically call new ads to the table via php, but for now, I’ll just do it the old fashioned way, with lovingly handcrafted HTML.

A Case for the DT’s

Administrator — Sat, 19 Jul 2008 01:52:17 +0000

My latest project has been one of those things where you say “Yeah, I’m pretty sure I can do that.” only to end up thrashing around on Google and in various forums, trying every keyword combination possible to make Wordpress do something that you thought would be fairly simple.

It could be the particular theme that I chose as my foundation, but it seemed like no matter what I did, I couldn’t make a simple unordered list of images and links line up correctly. They kept nesting in a big ugly diagonal line running down the page. It’s my first time developing something according to a graphic designer’s mock-up and, while I love a challenge, I was starting to pop a sweat as I threw all sorts of html at the page, trying to make those damn images and blurbs line up obediently.

Finally, I stumbled upon one of those “eureka” moments when I found out that a Definition List, designated with a specific class, could be molded to my specifications. After switching to the HTML mode of writing, I added a

tag then I put the img tags into dt wrappers like so:

And then enclose the text link and description in

tags. Then, I added some appropriate CSS in the Design>Theme Editor>style.css section of the Dashboard:
dl.welcome {
width: 85%;
margin: 15px 0;
padding: 15px;
}

dl.welcome dt {
margin-top: 20px;
margin-bottom: 0px;
}

dl.welcome dt img {
float: left;
margin: 0px 5px 0 0;
}

dl.welcome dd {
margin-left: 5px;
margin-bottom: 20px;
font-size: 90%;
line-height: 1.5em;
}

and Voila! a list that managed to maintain the same layout that the designer intended.