hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : PSD to HTML and CSS query!
Reply

Forum Jump

PSD to HTML and CSS query!

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 04-27-2012, 09:03 AM
willmorgan0711 willmorgan0711 is offline
Newbie
 
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



Sponsored Links
  #2  
Old 04-27-2012, 11:00 AM
the_pm the_pm is offline
Retired Moderator
 
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  
Old 04-27-2012, 12:58 PM
willmorgan0711 willmorgan0711 is offline
Newbie
 
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

Sponsored Links
  #4  
Old 04-27-2012, 01:56 PM
Hutchbat Hutchbat is offline
Junior Guru Wannabe
 
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  
Old 04-27-2012, 02:11 PM
willmorgan0711 willmorgan0711 is offline
Newbie
 
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  
Old 05-21-2012, 04:17 PM
designerweb designerweb is offline
Newbie
 
Join Date: May 2012
Posts: 13
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.

Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
The Best PSD TO HTML/CSS, PSD TO WHMCS, PSD TO WordPress Services. Mojahed-AQI Design Offers 3 04-26-2012 03:14 AM
Psd to Html/Css, Psd to Wordpress leanocodes Design Offers 0 01-10-2012 05:32 AM
Need PSD to HTML/CSS Bullsoft - Thomas Design Requests 4 01-28-2010 11:09 PM
PSD to HTML/CSS dariti Design Requests 4 08-21-2009 03:23 AM
Need PSD --> HTML / CSS TheHostHouse Design Requests 8 06-15-2009 09:31 PM

Related posts from TheWhir.com
Title Type Date Posted
11 Percent of Americans Believe HTML is an STD, and Other Surprising Findings Around Tech Jargon Blog 2014-03-04 15:36:03
Hostway Corporation Listing 2014-07-31 13:24:24
Is Assistance with Wiretap Orders Coming? Blog 2013-05-07 10:51:52
April Fools Day 2013 Web Hosting Round-Up Blog 2013-04-01 12:34:54
Alert Logic Releases New Version of Security and Compliance Solution Web Hosting News 2013-02-19 15:55:16


Tags
css, design banners, header design, html /css/ photoshop

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?