Results 1 to 6 of 6
  1. #1
    Join Date
    Apr 2012
    Location
    Sheffield, UK
    Posts
    21

    Post PSD to HTML and CSS query!

    Hi Everyone,
    I am having some trouble working out how to convert my site that I am currently designing into html and css. I know my way around the 2 languages fairly well but I am stuck as to how to get the result that I want!

    you can view the picture of the psd doc here - http://i.imgur.com/u3AYZ.png

    As you can see, i have a header and a footer - I will add the various main content at a later stage - twitter feed, about me and portfolio.

    Ideally I would want the blue bars for the header and the footer to be full width and having the blue circle (which i could out a white rim on to make a cut-out effect hovering somehow in the middle).

    As I am not a css expert, code snippets are extremely helpful.

    Thanks,
    Will

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    There are probably a dozen different ways to do what you're asking, and each way has its merits, depending on how the rest of your design is going to shake out.

    If we *only* look at what you have now, and not put any thought into any other elements that may end up being placed in the header area, the path of least resistance is to create a a div with a set height and a blue background (making it the height that it is within your layout, export your logo with the white area as part of the image and transparency around it (trans PNG is probably best - no need to deal with artifacts from GIF matte). Then simply drop the image into the div in your HTML, center it with CSS and add top margin to push it out of the container in which it is sitting.

    The upside is that you'll end up writing two lines of code total. The downside is this method will pretty much prevent ANYTHING else from being placed inside that header area or the white space to either side of the bottom half of the logo. Not full prevention, but annoying enough that you'll wonder why you ever coded it that way.

    The moral of the story is that you're going to end up hurting yourself by coding a partially formed layout, only to find the technique you used doesn't match with the future development of the layout. Finish your canvas, then look for how to code it best!

    Some designers like to design using a browser as they go. In my experience, this is a good way to waste a whole lot of time undoing damage done through ill-executed coding techniques. Why limit your creativity by coding a half-finished layout?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    Apr 2012
    Location
    Sheffield, UK
    Posts
    21

    Re:

    That is a fair point, maybe I should design the rest of it before marking it up. And i'm afraid I think I do have that progressive code then check in browser trait.

    Thanks for your help,
    Will
    Will Morgan
    Hosting: Steel City Hosting
    Personal Site: WGDM.NET

  4. #4
    Join Date
    Apr 2012
    Location
    Algiers
    Posts
    41
    to keep the white rim ! i'll suggest to add a white border to the circle ! cut the image and save it as transparent PNG !
    The Wordpress developer Modem Router

    PSD to XHTML, PSD to HTML5, PSD to Wordpress, HTML to Wordpress, Custom PHP/jQuery Apps

  5. #5
    Join Date
    Apr 2012
    Location
    Sheffield, UK
    Posts
    21

    Re;

    Yeah, I thought of that, i sliced the top banner and made a small 3px slice and used the x-repeat and then centred an image in html for the circle!

    Thanks,
    Will
    Will Morgan
    Hosting: Steel City Hosting
    Personal Site: WGDM.NET

  6. #6
    I think you can use 960 grid system which is a good grid system for CSS and it will help to convert PSD to HTML.

    All the best.

Similar Threads

  1. Replies: 3
    Last Post: 04-26-2012, 03:14 AM
  2. Psd to Html/Css, Psd to Wordpress
    By leanocodes in forum Design Offers
    Replies: 0
    Last Post: 01-10-2012, 05:32 AM
  3. Need PSD to HTML/CSS
    By Bullsoft - Thomas in forum Design Requests
    Replies: 4
    Last Post: 01-28-2010, 11:09 PM
  4. PSD to HTML/CSS
    By dariti in forum Design Requests
    Replies: 4
    Last Post: 08-21-2009, 03:23 AM
  5. Need PSD --> HTML / CSS
    By TheHostHouse in forum Design Requests
    Replies: 8
    Last Post: 06-15-2009, 09:31 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •