Again, there all about the same.... general magazine layouts, barely graphical..... which is perfect if that is the wanted look, yet I've known people that want themes, or that due to the nature of the intended site will require a more "break out" layout and appearance.... which seems either very difficult wo achieve with CSS, or impossible, I can't figure which!
If it's just difficult, then I'll stick with it and keep it at the fore of my learning... if it is currently impossible due to the lack of true browser support, I'll simply say sod it and stick to tables... I have no wish to waste time attempting to perfect something that won't work..... I'll stick to learning the standard article appearance and that will be it!

I'd say it's just difficult. Do you have a table based site illustrating what you want?

Ok folks how does one do this? Meaning, how do you ever get things placed in the right spot, aligned, and the get the feel right on a web page design like this? Do you have to been an "artist" or use a fancy web design tool?


or even more intense?


I would like to really know how this is possible... :-|

No! Im no artist....CSS is the way to go! :cheesy:

Well, here'g a general example of what I mean, without getting overly complicated....

Not perfect, but I still ache from training, got too many bruises on parts that make sitting unpleasant etc..... (I'm thinking the only thing I need to learn self defence for is to protect myself from those I train with! LOL)....

So let me know if this sort of thing is possible with css.

yeah easy.
I'll go look on my other machine and see what designs I have that are like it (in CSS terms)

things like this are what get me... I like this sort of designing... not really any different from the magazine layout, just with some themed images, it really sets the field as it were...

I think it is mostly CSS... I've seen alot of sites with similar designs, yet the y blatantly use tables (what really gets me is half of them are cheering for CSS, whilst using tables! LOL).

here's a rough and ready only tested in IE version of your link

<style type="text/css"><!--
body {
  background: #09f;
  margin: 0;
  padding: 0;
#container {
  margin-right: 20px;
#header1 {
  background: #fff url(image1.jpg) bottom repeat-x;
#header2 {
  background: url(image7.jpg) right repeat-y;
#header3 {
  background: url(image8.jpg) 100% 100% no-repeat;
  height: 200px;
  text-align: center;
#lefta {
  background: #fff url(image6.jpg) 100% 0 no-repeat;
  position: absolute;
  top: 183px;
  left: 0px;
  height: 50px;
  width: 200px;
#left1 {
  position: absolute;
  top: 233px;
  left: 0px;
  width: 200px;
#left2 {
  background: #fff url(image7.jpg) right repeat-y;
  margin-right: 37px;
#left3 {
  background: url(image1.jpg) bottom repeat-x;
#left4 {
  background: url(image8.jpg) 100% 100% no-repeat;
  padding-bottom: 200px;

<div id="container"><div id="header1"><div id="header2"><div id="header3">
<h1>Header Here</h1>

<div id="lefta">&nbsp;</div><div id="left1"><div id="left2"><div id="left3"><div id="left4">
Some side bar content to stretch it down.

that design would be a lot easier in 2d if you wanted to try it.

OK... between you doing that, the site i posted, and the design stuff someone in another forum has posted.... I'm now sold on CSS!

It will be a bugger getting to be cross B/P, and making sure I don't break the validation rules too often.... yet I think it's worth it... esp. as I have been told tables aren't BAD, just should be used as alittle as possible, or not at all if it can be done with CSS......

YEP, Guess I'm for CSS.... joy... more stuff to figure properly... alongside the mysql & php, figuring how to wangle advertsing companies to stop trying to overcharge me.... and figuring my club sights SEO problems..... But it is worth learning properly.

Thank you for proving that to me.. .wasn't sure, but if you could turn that into css... then just about anything should be possible with the last gen of browsers....!

Here's a tip for you for older browsers:

Put a link to a stylesheet. On that stylesheet have really basic stuff that version 4 browsers understand. At the top of that sheet import a stylesheet for modern browsers using:
@import url(real.css);

That hides the complex code from the old browsers, and ensures the sites displays it's content to everyone.

Also I can explain how the design works if you like.

hmmm... some help regarding CSS and ddesign/layout would be good!

See latest thread... don't want to hijack this one!


The slicing of certain websites is done in Photoshop itself before taken into a web creator. The webpage is primarily drawn out in Photoshop as it wants to appear, and then there is a tool in the tool menu that's called "slice" and with it you draw the appropriate boxes around each section which will make each a different image (i havent found a way to insert text into these images after the fact, so any area that needs to be changed now and then should be made a web-colored box (because otherwise the colours will not match and might appear unexperienced) and can be deleted in the web creation to allow for text space. the images, then, in the web programs can have attached hyperlinks/hotspots (smaller areas of the picture in which there is a link) or just be as they are.
Okay, ive rambled on without explanation.
After the slicing occurs, one needs to go under the File menu, and select "Save for Web" this takes you to a screen in which various forms (in relation to quality of images/size) of your page appear and you are able to change the resolution to such that it still looks good but doesnt take up a whole lot of time to load. (this can be changed by on the right side, changing the type of image (which depends on how much colour is in each one)) to jpg/gif etcetra and also a menu to select how many colours are used. if you have a image using only blue, black, and white, you dont want that menu to have selected fifty colours, only three. Simple as that. Once this is all done, press save, save this page in your web folder and you're good to open it up in the web program and go from there.

(I realize that I've commented after change of subject, but this information is still good to know.)

Thats good info but the design is all in the person and there ability with graphic programs. If you use flash obviously your good.

Just a reminder to you Adobe fans ... Photoshop is not the only game in town for slicing. I have used Canvas 9 to create and slice images, and also the corresponding html base file. Here is a sample: << url snipped to comply with forum policy >>

Practice, read as much as you can on the inet, practice, do as many tutorials you can, and practice some more. We all started out knowing nothing, some just started earlier than others. Also some just have the basic artistic talent that others do not. I started about 10 months ago and I have come a very long way since then, just stay with it.

Can I just say Im not a big fan of any slicing tool. Does a program really have the logic to layout your site based on the rectangles you draw around parts of your graphic. I know that there is much debate between css and tables but from what I understand the slicing method uses tables. I also use tables and believe me, hand-cutting your graphic appropriately so to use minimal images while using tables correctly isn’t a big deal. I just wish the slicing thing would die out. ;)


I do agree with everything cmills83 said

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.