[thelist] CSS/Layout advice

Will willthemoor at gmail.com
Sat Apr 18 15:52:46 CDT 2009


Hi,

Hard to really describe how to mark it up/lay it out without taking an
hour or just doing it but I'd look at the layout like this:

header
  logo, form
content
   three columns with blue h2s, beige h3s...
sub content
   two columns
footer
  5 links

The bottom links are just a ul with links inside. attach the stars to
the <a>s or the <li>s. Look for things that repeat visually. First see
if you can attach those styles to standard HTML elements (h2, h3,
li...). If not, then start classing.  I wouldn't start with the
existing home page's html/css - it's sorta missing the point.
http://www.braintrustinc.com/ It's basically table based layout
without the table. tons of class names and repeated styles. what a
headache!

I'd try to convince the designer to use web friendly fonts as much as
possible. You can slice all of those images and use image replacement
but s/he should prolly learn to design for the web. Either way, your
boxes are going to grow when new content gets added or a user has a
different default font size. that means that if you use a single bg
image for the main area, it'll break and break frequently. Instead
you'll want to slice a top and bottom and attach them to containers.
that'll let things expand and contract but still keep the design
intact.

check out http://www.google.com/search?q=sliding+doors+css
and http://www.google.com/search?q=image+replacement

The top few hits are all good.


Will


On Sat, Apr 18, 2009 at 11:21 AM, Nan Harbison <nan at nanharbison.com> wrote:
> Hi All,
>
> I have to redo a new home page for a website I work on, based on the
> designer's design. It is pretty intricate and complicated (for me). CSS is
> not my biggest strength, but I am getting there!
>
> Anyway, I have a screen shot of the design, if anyone has any suggestions
> about the best way to lay this out, I would greatly appreciate it!
> I think one choice is to take the background from the original FireWorks
> image and use it as a background image in the main div, with lots of divs
> inside this main div.
>
> http://www.braintrustinc.com/newhomepage.htm
>
> I think you can see where I have to add code, the log in form, the poll at
> the bottom of the page, the quick search boxes have roll over images, and I
> rotate through the featured candidates and projects on the left and right.
>
> About the bottom 5 "housekeeping" links, can I leave those in an image and
> use an image map? Do I do an image map in PhotoShop, or is it all
> javascript?
>
> Thank you so much for any insight you might have.
>
> Cheers,
> Nan
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>



More information about the thelist mailing list