Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Switching from Tables to CSS 4

Status
Not open for further replies.
MojoZig

MojoZig

Technical User
Sep 27, 2005
61
US
Ok, I know this question isn't new so please forgive me if it's redundant. I've searched and just don't understand what the best practice is for slicing my photoshop file up to make the best CSS Layout. I can create a CSS layout from scratch, but now I'm trying to take an existing table layout and break out of the table mold for cleaner code as well as other things. My problem, of course, is with auto expanding 'columns' ...

I need Columns:

oeu-1 *and* oeu-4 to expand all the way down the page sides.
oeu-15 thru oeu-22 to expand down as needed.
oeu-23 thru oeu-27 make up the footer and should stay as they are at the bottom of the page.
All other divs should retain their size and location and not expand.

Here's the code which is exported right out of Photoshop CS with absolute positioning on all divs. I've cut out some of the rollovers and such to make it as simplified as possible.

I left the CSS in head since it's easier for copying to the forum.

I didn't clear any of the div heights of the divs that need to auto expand. I did go through and make each image that was sliced the background of each of the respective div tags in the css. Any of the repeating backgrounds for a div tag will use it's respective background image.

As it stands now, if you add text all the way down the page in one of the divs that should expand, it keeps right on going under or over the ones below it. Doesn't push them down the page like a table would.

I am hoping someone will be able to show me with my own design, how to do what I have read about with faux colums and everything else I've read on ZenGarden and every other website. I'm just so stuck with tables in my head, help!

I have the PSD file if anybody is interested in looking at it or can email you what the slices look like in a JPeg.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>OEU Final Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- ImageReady Styles (OEU Final Layout.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:1024px;
	
}

#OEU-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:40px;
	height:1024px;
	background-image:url("images/OEU_01.jpg");
}

#OEU-02_ {
	position:absolute;
	left:40px;
	top:0px;
	width:316px;
	height:23px;
	background-image:url("images/OEU_02.jpg");
}

#OEU-03_ {
	position:absolute;
	left:356px;
	top:0px;
	width:404px;
	height:23px;
	background-image:url("images/OEU_03.jpg");
}

#OEU-04_ {
	position:absolute;
	left:760px;
	top:0px;
	width:40px;
	height:1024px;
	background-image:url("images/OEU_04.jpg");
}

#OEU-05_ {
	position:absolute;
	left:40px;
	top:23px;
	width:316px;
	height:141px;
    background-image:url("images/OEU_05.jpg");
}

#OEU-06_ {
	position:absolute;
	left:356px;
	top:23px;
	width:192px;
	height:141px;
	background-image:url("images/OEU_06.jpg");
}

#OEU-07_ {
	position:absolute;
	left:548px;
	top:23px;
	width:212px;
	height:141px;
	background-color:#FFFFFF;
	background-image:url("images/OEU_07.jpg");
}

#OEU-08_ {
	position:absolute;
	left:40px;
	top:164px;
	width:178px;
	height:198px;
	background-image:url("images/OEU_08.jpg");
}

#OEU-09_ {
	position:absolute;
	left:218px;
	top:164px;
	width:7px;
	height:198px;
	background-image:url("images/OEU_09.jpg");
}

#OEU-10_ {
	position:absolute;
	left:225px;
	top:164px;
	width:315px;
	height:128px;
	background-image:url("images/OEU_10.jpg");
}

#OEU-11_ {
	position:absolute;
	left:540px;
	top:164px;
	width:8px;
	height:198px;
	background-image:url("images/OEU_11.jpg");
}

#OEU-12_ {
	position:absolute;
	left:548px;
	top:164px;
	width:212px;
	height:128px;
	background-image:url("images/OEU_12.jpg");
}

#OEU-13_ {
	position:absolute;
	left:225px;
	top:292px;
	width:315px;
	height:70px;
	background-image:url("images/OEU_13.jpg");
}

#OEU-14_ {
	position:absolute;
	left:548px;
	top:292px;
	width:212px;
	height:70px;
	background-image:url("images/OEU_14.jpg");
}

#OEU-15_ {
	position:absolute;
	left:40px;
	top:362px;
	width:178px;
	height:476px;
	background-image:url("images/OEU_15.jpg");
}

#OEU-16_ {
	position:absolute;
	left:218px;
	top:362px;
	width:7px;
	height:520px;
	background-image:url("images/OEU_16.jpg");
}

#OEU-17_ {
	position:absolute;
	left:225px;
	top:362px;
	width:315px;
	height:476px;
	background-image:url("images/OEU_17.jpg");
}

#OEU-18_ {
	position:absolute;
	left:540px;
	top:362px;
	width:8px;
	height:520px;
	background-image:url("images/OEU_18.jpg");
}

#OEU-19_ {
	position:absolute;
	left:548px;
	top:362px;
	width:212px;
	height:476px;
	background-image:url("images/OEU_19.jpg");
}

#OEU-20_ {
	position:absolute;
	left:40px;
	top:838px;
	width:178px;
	height:44px;
	background-image:url("images/OEU_20.jpg");
}

#OEU-21_ {
	position:absolute;
	left:225px;
	top:838px;
	width:315px;
	height:44px;
	background-image:url("images/OEU_21.jpg");
}

#OEU-22_ {
	position:absolute;
	left:548px;
	top:838px;
	width:212px;
	height:44px;
	background-image:url("images/OEU_22.jpg");
}

#OEU-23_ {
	position:absolute;
	left:40px;
	top:882px;
	width:105px;
	height:142px;
	background-image:url("images/OEU_23.jpg");
}

#OEU-24_ {
	position:absolute;
	left:145px;
	top:882px;
	width:519px;
	height:23px;
	background-image:url("images/OEU_24.jpg");
}

#OEU-25_ {
	position:absolute;
	left:664px;
	top:882px;
	width:96px;
	height:142px;
	background-image:url("images/OEU_25.jpg");
}

#OEU-26_ {
	position:absolute;
	left:145px;
	top:905px;
	width:519px;
	height:61px;
	background-image:url("images/OEU_26.jpg");
}

#OEU-27_ {
	position:absolute;
	left:145px;
	top:966px;
	width:519px;
	height:58px;
	background-image:url("images/OEU_27.jpg");
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (OEU Final Layout.psd) -->
<div id="Table_01">
	<div id="OEU-01_">
	</div>
	<div id="OEU-02_">
	</div>
	<div id="OEU-03_">
	</div>
	<div id="OEU-04_">
	</div>
	<div id="OEU-05_">
	</div>
	<div id="OEU-06_">
	</div>
	<div id="OEU-07_">
	</div>
	<div id="OEU-08_">
	</div>
	<div id="OEU-09_">
	</div>
	<div id="OEU-10_">
	</div>
	<div id="OEU-11_">
	</div>
	<div id="OEU-12_">
	</div>
	<div id="OEU-13_">
	</div>
	<div id="OEU-14_">
	</div>
	<div id="OEU-15_">
	</div>
	<div id="OEU-16_">
	</div>
	<div id="OEU-17_">
	</div>
	<div id="OEU-18_">
	</div>
	<div id="OEU-19_">
	</div>
	<div id="OEU-20_">
	</div>
	<div id="OEU-21_">
	</div>
	<div id="OEU-22_">
	</div>
	<div id="OEU-23_">
	</div>
	<div id="OEU-24_">
	</div>
	<div id="OEU-25_">
	</div>
	<div id="OEU-26_">
	</div>
	<div id="OEU-27_">
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Thanks!
 
Sort by date Sort by votes
normally we move from table-based layouts to css-based layouts to cut down on code. you'd probably have just as much code with your table, so something's still not right.

also, you're still in the mind set of "slicing images". get out of that mindset. slicing images is a table-based approach.

i suggest reading some tutorials on new web development. maybe start here:


*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
cLFlaVa hit the nail on the head.

Don't think about slicing.

Create your page as a series of blocks of HTML. Each block containing just plain HTML to put the content on the screen.

Once you have that you can start using CSS to get each block to interact with the others to get things into position.

At some point in the process you will start to see how you can apply graphics to the HTML elements in these blocks to get the look you are after.

It's not immediately intuitive and takes a bit of practice to get yourself into the right mindset. But stick at it and it will happen.

The main thing... always start with some plain, unstyled HTML.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Well, unfortunately, the design isn't a design of mine that I created, I'm 'updating' an already approved design so that I can revamp the whole site to make it look better than what the old webmaster had created without running it through city council again. Each one of the divs has content in it or is reserverd for content, except oeu-01, oeu-04, oeu-16, oeu-18. These are the cells that I would normally have the background image repeat itself in a cell such as the dotted lines (oeu-16 and 18) that seperate oeu-15, 17 and 19.

I have read through a bunch of articles on the AListApart site as well as several others, but none offer a real in depth description of taking a more complex photoshop image through the slicing process and if they did, either I missed it or it just doesn't make sense to me. The more I read, the more I am finding that unless you are building something from the ground up and are keeping the layout relatively simple (header, sidebar floats, central content and footer, you might as well use tables since you will probably have better cross-browser compatibility with basic table tags than trying to beat ie or the others into submission with css hacks... Sorry, just venting a little, I do know that CSS is the way to go, and I have a lot to learn, but breaking the mindset isn't easy and it urks me that I can't just pick it up as I do with everything else. That's why I have turned to my old fail-safe, tek-tips, and try getting help with something that is familiar like this layout.

I sliced the image up as few times as necessary and you can even see the slices here: I tried to contain the slices as much as possible.

I have about 15 areas that have content that is being pulled from my CMS system. (Ektron). I use css menus in section oeu-06 from opencube, I have css scroll areas in other areas, date, menus, etc .. ...

Heres a link to what the layout looks like in table form on my dev server ... ignore the one missing image in the content since this is on the dev server.


I will look at the psd again for html content areas as you all have suggested. Take a look at the links and see if you all think I should just stick to tables on this certain design or if there is a better way to slice the pie ...

Thanks again for your time!

TT
 
Upvote 0 Downvote
MojoZig,

Like mentioned by Foamcow & cLFlaVA - you shouldn't need all that slicing.

Looking through my own "design glasses" I can see only three images needed for your layout. To be a bit more specific, they are:

1. "body background" -made up of the images in your colls #1 and #4.

2. "page top" -made up of the images in your colls (1,3) and (5, 6, 7) and (8-14). It's a bit hard to see here though.

3. "page bottom" -made up of images (23-27) in your colls

Then it "just" ;-) a matter of wrapping the whole thing into divs that positions, floats and stretches according to your description.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
691
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
362
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
366
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
285
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top