CSS Trouble...

[vrufusx65v]

I have made a webpage in Photoshop and now im having issues converting it to CSS and XHTML with a little but a jquery, javascript, etc. I have been going to net.tuts+ for a while now and i still can't get my page to be flawless and filled with life like they can. Would anyone know of some good tutorials for basically creating a CSS/XHTML page from photoshop? [Preferably a video tutorial]

here's a pic of the site for review purposes...comments and criticism are happily notified...

 

[elion]

I have made a webpage in Photoshop and now im having issues converting it to CSS and XHTML with a little but a jquery, javascript, etc. I have been going to net.tuts+ for a while now and i still can't get my page to be flawless and filled with life like they can. Would anyone know of some good tutorials for basically creating a CSS/XHTML page from photoshop? [Preferably a video tutorial]

here's a pic of the site for review purposes...comments and criticism are happily notified...

it's too difficult.

 

[mattura]

go for a few css tutorials first, then you'll understand what you can do with a bit of style.
Looks pretty much possible to me, you must see your page as either a table or as floating <div>s
Look up css 'float' and try playing around with 'margin', 'padding', 'border' and 'background'

If this is too hard, you could perhaps do it in flash...it would look more slick and be easier to convert from photoshop.

 

[vrufusx65v]

go for a few css tutorials first, then you'll understand what you can do with a bit of style.
Looks pretty much possible to me, you must see your page as either a table or as floating <div>s
Look up css 'float' and try playing around with 'margin', 'padding', 'border' and 'background'

If this is too hard, you could perhaps do it in flash...it would look more slick and be easier to convert from photoshop.

Thanks, that really does help...

I have tried using floating DIVs before but i never truly understood them...

 

[as4s1n]

What is it you do not understand?

 

[misson]

I have tried using floating DIVs before but i never truly understood them...

The thread "CSS Issue" includes links to pages describing floats.

 

[cybrax]

Design is 'do-able' it's a basic two colum layout with header & footer go visit Dynamicdrive.com for a bare bones layout and see how it is done.

OR put the design to one side and just start with a single div on screen and play with the css, when you have the hang of it.. add a second div and so on.

Down and dirty content manager for the Q&A and News - http://www.cybrax.co.uk/a4_site/default.php
Its flat file storage not MSQL with a WYSIWYG upload form attached, very basic but versatile. (sorry about the large file size, still tinkering and a lot of junk in the folder)

Dynamic drive has some nice AJAX for displaying remote RSS feeds and a pagination javascipt that could work for the top news section, Yahoo pipes may also be useful for feeds.

The search box is bit more tricky though there are a few free PHP site search scripts out there or you might be able to alter a Google custom search box.

PS: the AJAX chat box is not allowed on x10 servers

 

[vrufusx65v]

*@cybrax*

That helps a whole lot, thank you very much.

@everyone

I was just thinking [before i looked at cybrax's post] that i could start off with just a big table with smaller tables in it and then convert them to DIVs and see what would happen...

 

[vrufusx65v]

Little side question as well:

how do i maintain the fonts on the page so they look just like the picture?

 

[as4s1n]

You could do a table layout but that is bad practice. It may be possible with a bunch of <div>s. As for your second question, are you asking which font face or how to get them all to look the same?

If it's the latter:

/* CSS page */
body
{
/* code above */
font-family: which-font-you-choose, backup-font;
}

 

[vrufusx65v]

I guess I wasn't being clear. I want to use a font that's not in any font family in a program like dreamweaver, and that's not a native text font like courier or times new roman. Is their a way to do that without using images?

 

[as4s1n]

I don't think so. It may just be easier that way. If you want to do it with images, a thread opened up a while ago Custom fonts in Internet Explorer. Check it out and hope that answers the question.

 

[essellar]

@font-face is a possibility, but font-rendering is spotty at best for a lot of font faces due to poor smoothing and hinting. If you really need to maintain absolute font control and can't use images (for instance, because you want to use a special font for unknowable test), then take a serious look at a technique called "scalable Inman Flash Replacement".

As for the rest of the page, it's not only do-able, it's really trivial. It requires the ability to be okay with cheating, though. The only tricky piece is the two-column section in the middle, specifically keeping the columns balanced. The trick is not to bother -- the "borders" around those sections are background-images above, below (clearing both) and a single y-repeated graphic on the "host" div for the two floated columns that acts as the vertical borders for both. (The graphics above and below are not strictly necessary, but they'll allow you to do subtle rounding you can't do reliably with CSS alone.) You can use the same basic technique for the three-column footer if you want to put borders between the columns.

 

[mattura]

Oh, I forgot, I made a little demo a while back with a few CSS techniques you might be able to use:
http://www.matt.elementfx.com/css/
Take a look at the css and match it to what's happening on screen. You should also consider what will happen when users resize your page or your text.

As for the fonts, you can use any font you like, as long as you upload the ttf (or font file) somewhere and then refer to it as url('uploadpath/customfont.ttf') in your css. Take a look here for an example:
http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

 

[vrufusx65v]

Thanks for the help, i'll look over everything said and come back probably with more questions in the near future...

 

[essellar]

As for the fonts, you can use any font you like, as long as you upload the ttf (or font file) somewhere and then refer to it as url('uploadpath/customfont.ttf') in your css.

Well, unless you want it usable in Internet Explorer, which requires an EOT (Embedded OpenType) font -- and probably always will, due to agreements Microsoft has with various font foundries -- or the next generation of Webkit browsers (Safari, Chrome) which will be using SVG as the standard embeddable font format.

 

[michman]

I'm not entirely sure why we're having this conversation here
I'm not a pro at these things so I just use a program that does all the tricky stuff for me.
It takes surprisingly little time to make an awesome web-page

 

[essellar]

It takes surprisingly little time to make an awesome web-page

Not really. It takes surprisingly little time to create a web page that earns the coveted "Works on My Machine" certification, especially if you only look at the page using one browser. Making a web page that actually does something AND that works in all of the browsers that you can reasonably support AND that is usable by people with various degrees of disability (and not just by twenty-year-olds with perfect vision, hand-eye coordination and reflexes) AND that accurately reflects your "brand" takes a surprisingly long time. It shouldn't have to, but it does.

 

[vrufusx65v]

Not really. It takes surprisingly little time to create a web page that earns the coveted "Works on My Machine" certification, especially if you only look at the page using one browser. Making a web page that actually does something AND that works in all of the browsers that you can reasonably support AND that is usable by people with various degrees of disability (and not just by twenty-year-olds with perfect vision, hand-eye coordination and reflexes) AND that accurately reflects your "brand" takes a surprisingly long time. It shouldn't have to, but it does.

And that's what i'm trying to accomplish. I want an extremely versatile site that i can view without a problem in almost every browser with all the works. Although this is my first official site ill be publishing, i want this site to be working correctly with little maitinence once it's up and running. i few edits here and there, but still a fine working piece of internet amazement...[yes i do have high standards/expectations, i know...]

 

[vrufusx65v]

I'm not entirely sure why we're having this conversation here
I'm not a pro at these things so I just use a program that does all the tricky stuff for me.
It takes surprisingly little time to make an awesome web-page

What Programs do you use to make this stuff a thing of the past? All i have is the CS4 Master Collection....