Grow your CSS skills. Land your dream job.

tips and advice on re-making site

  • # August 30, 2008 at 2:00 pm

    About a year ago i made a site for a friend to promote his business:

    http://www.networkmediatraining.co.uk

    I made the site using Photoshop, then slicing it for web, then exporting it to dreamweaver. Then all i did was delete the area which needed content and put his content in there. problem with making it this way was it took a lot of time as every page had to be made individually in photoshop first, then sliced and put into dreamweaver. Another problem with this is if too much content is in the area, it breaks the page. (as basically its all images in a table)

    I’ve said to my friend that i’ll re-make his website in CSS from scratch, meaning it will dynamically stretch to fit the content in, and will use one template that i can then just put a different picture in the left side, and different writing in the right. (saving a lot of time for me also) Problem is i’m a CSS noob and haven’t used it before, photoshop and dreamweaver made all of that automatically.

    I was just wondering if anyone could help me in telling me how to make it in CSS? i know for starters i’ll need a fixed border for the red border, but when using chris’s example on this site the border went to the edge of the browser, not fixed in the middle. (or around the content) i shall not be making the menu system again, instead i’ll be putting the links for each section underneath, and fade the menu button clicked.
    After the border i should be fine following chris’ video tutorials.

    Thanks for anyone that helps :D

    # August 30, 2008 at 10:41 pm

    that site would be super simple to do is css. super super simple. To center the content. You want to wrap your content in a div. like this

    #wrapper { width: 800px; border:solid 1px red; margin:0 auto; }

    the margin:0 auto; above is what will center the site. then you can see the red border witht he border:solid 1px red. Or two or three pixels whatever you want.

    as for css rules. Here is a very good reference for all the rules

    http://www.stylegala.com/features/css-reference/

    so then your code would lool like this

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    START YOUR CONTENT HERE


    Now something to keep in mind is that a div is like an empty box. If you provide a background-image for the div but don’t provide a width and height for the div, You won’t see the image. If you run into problems. Just come back and ask more questions.

    # September 1, 2008 at 4:14 pm

    thanks a bunch buddy, you’re a legend :D i shall also check out that site as i want to start getting into web design a lot more. Thanks again

    # September 2, 2008 at 3:01 pm

    Have you checked the "Converting a Photoshop Mockup" tutorials in the video section? I found them really useful to understand CSS.

    # September 2, 2008 at 5:57 pm
    "deforia" wrote:
    Have you checked the "Converting a Photoshop Mockup" tutorials in the video section? I found them really useful to understand CSS.

    yep, thats how i’m doing it buddy, but needed the help with the border as the layout of the site is different. will post up the finished site when i’m done

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".