[HTML/CSS] Couple questions

Akai

Akai

Custom Title Activated
Loyal Member
Joined
Mar 28, 2006
Messages
2,383
Reaction score
0
I've been reading a lot online about coding a photoshop layout (and replies in my last topic). I'm a bit confused, but still trying. What I read was after you slice your PSD, you then save it for web (File>Save for web). Obviously. But I saw some posts saying to not do that. To save your psd as a normal image (jpg/png/gif) and then reopen it and manually slice it. Then save each individual image. So, which one is better?

Also, I read that saving for the web in photoshop (File>Save for web) is bad because of all the tables and spacers. They said tables are replaced by divs now, so how exactly do you code your photoshop design with divs? (Yes I've searched google).

Heres a photoshop layout I just did. First, here is what it will look like with all the text on it:
Akai - [HTML/CSS] Couple questions - RaGEZONE Forums


And here's it is when I did (File>Save for web): Template #1

To add text to a particular area, I have to make that image a background (background="image.jpg"....etc) and then type the text. Well, sometimes that stretches the images and messes it all up. So that one confuses me to.

Kind of a complicated post..hope someone can understand this. So what's the proper way?
 
save each image
then write your CSS using either ids or classes
so like

.header{
background:url (images/header/png) no-repeat;
height:whateverpx;
width: whatever PX; (if image isnt repeateing specifiy the width)
margin:auto;(centers in the page)
}

then your html would look like
<body>
<div class="header"></div>
</body>
and youd see a header on the screeen
or look at some exanple source code of my dark aqua project

your site name here
heres the CSS
http://nobledesigns.org/darkaqua/mainstyles.css
if you get on AIM i can help you in real time :)
 
Ok heres my next question. I saved my psd as a jpg and then started to slice. Now I'm done slicing, but since my design isn't the general "header, left nav, main content, right nav" theres some places that are weirdly sliced. And I'm wondering how exactly I would code those slices with divs. I marked some examples in this screenshot. Also, how do I save those individual images when I'm done slicing? Same as normal (File>Save Web> Images Only .gif)

Akai - [HTML/CSS] Couple questions - RaGEZONE Forums
 
Hmm, I indeed have to say that your layout is quite difficult ^^. But not impossible :P.

With CSS you basically can make rows or columns (or (vertical) centering...).
Rows: just add a <div> tag.
Columns: in the style element of <div> add float:left; and the following <div> will be on the right of the modified <div>
Centering: in the style element of a <div> you need to add stuff like margin: 0 auto; (horizontal center) and vertical-align:center; (vert. center).

Combining those and you will be able to reconstruct the site in CSS :D, good luck!
 
Daevius said:
Hmm, I indeed have to say that your layout is quite difficult ^^. But not impossible :P.

With CSS you basically can make rows or columns (or (vertical) centering...).
Rows: just add a <div> tag.
Columns: in the style element of <div> add float:left; and the following <div> will be on the right of the modified <div>
Centering: in the style element of a <div> you need to add stuff like margin: 0 auto; (horizontal center) and vertical-align:center; (vert. center).

Combining those and you will be able to reconstruct the site in CSS :D, good luck!
Click to expand...

Hm, a bit confusing..lol.

sutsurikeru said:
off topic: bet you had fun slicing that layout :P
Click to expand...

Oooooh yeah.
 
Just read the HTMLdog tutorials and it will be a piece of cake within an hour ;), good luck though, as CSS might be confusing, but once you get it, its very easy :D
 
You definitive took the wrong approach on this, and it'll be pain in the ass to continue with your current structure/code.

I would structure it in this way
http://web27190.web08.talkactive.net/upload/files/alyarose.png

But I would defintive not cut out the graphics that way. You need to cut the graphics in a very different way to fit it with HTML.
I would suggesting something in the line of this:
http://web27190.web08.talkactive.net/upload/files/alyarose_gfxcut.png

.. and then let CSS and HTML handle the rest.

Give me a hint if you require more help with layout (seeing the thread is a few days old).
 

You know you could just use ImageReady which comes with PhotoShop and Save As E.. something lols :P

And it saves the index.html folder with the coding already done for you.
 
"Also, I read that saving for the web in photoshop (File>Save for web) is bad because of all the tables and spacers. They said tables are replaced by divs now, so how exactly do you code your photoshop design with divs? (Yes I've searched google)."

He doesn't want the crap that you get when you slice it with PS/IR.
 
in this case wouldnt it just be easier to use .css with divs downside to that is all the constant having to edit everything itself, would be easier to just use imageready like someone else mentioned and dreamweaver
 
When using CSS its way easier to edit/change the layout, its also better intepretended by searchmachines. Tables are just wrong.

BTW, CSS is easier to make than tables. But I mean coding, you mean the design interface of dreamweaver, right? It sucks mate, learning to program has much more advantages.
 
very true and yeah i mean design the layout and use dreamweaver. Yeah is easier to learn to code it yourself because you dont need to relie on people thats why atm im learnin vb + c++ such a headache been readin tuts all night x.x and 90% of them i find are idiotic and already state everything i know or they get real confusing but could be because im half sleep to.
 
DeathArt said:
You definitive took the wrong approach on this, and it'll be pain in the ass to continue with your current structure/code.

I would structure it in this way
http://web27190.web08.talkactive.net/upload/files/alyarose.png

But I would defintive not cut out the graphics that way. You need to cut the graphics in a very different way to fit it with HTML.
I would suggesting something in the line of this:
http://web27190.web08.talkactive.net/upload/files/alyarose_gfxcut.png

.. and then let CSS and HTML handle the rest.

Give me a hint if you require more help with layout (seeing the thread is a few days old).
Click to expand...

The images you showed doesn't really make any sense because you have to slice the nav bar on the right, where the text goes, and the login button, and where the username/password text boxes should go, and the main content area. So...
 
You must log in or register to reply here.

RaGEZONE Sponsor

    HyperFilter

About RaGEZONE

RaGEZONE® is the top forum for MMO, MMORPG, and mobile game development. We provide binaries, source codes, and tutorials for your favorite games, making it the go-to resource for developers and fans. You can also find and share private servers, fostering a vibrant gamer community.

Forum Statistics

Members online
1,147
Guests online
3,489
Total visitors
4,636
Totals may include hidden visitors.

RaGEZONE Partners

    nongamstopbets.com UK sites not on GamStop Casino Deps NZ
Back