It’s not easy with an image like that. But basically, you’d slice it into 3 bits—small top and bottom image for the top and bottom, and a middle section that could repeat. I haven’t done something like this for a long time, but here’s an example I did years ago: http://calligraphicworks.com/ There is a strip at the top and bottom, and a section in the middle that repeats as many times as is needed down the page. (Each page has a different height, so you can see the middle section expand from page to page.)
I’m quite puzzled.
i don’t see any table. or table like behavior?
i looked this up and this seems to be another layout technique besides absolute and float. But this is supposedly not the bad bad tables that i’ve heard so much
about.
display: table is a tool in your CSS arsenal that is useful in some situations. Tables were handy for layout because of certain properties they had, and these are partly replicated with CSS display: table … but without the nasty aspects of using tables in the markup. Generally, display: table is better for small sections of a page rather than the whole thing … but this is an example where it’s appropriately used for the whole page. There is plenty you can read online about CSS table display.
well, you guys are awesome. This information should help me get started.
I’ll let you know how my conversation goes with the designer when i get chat with them.
Any tips for dealing with designers in general?
Hi,
Here’s a very rough chop up of your image to show how to make repeats.
http://www.pmob.co.uk/temp/wood-effect3.htm
I only used the display:table to avoid a margin collapse on the first element as without it the wrapper gets pulled down by the margin on its first child. Its not really needed as a normal element would have been ok (apart form the margin collapse). It has nothing to do with html tables as such but is just a way of utilising some of their behaviours. Html tables should always be used for data but not for layout. Css has no such structural semantics as such and you can more or less use what you want.
Paul, thank you so much man! getting pretty late in uk. about 5:33pm now .
I’m looking forward to looking this over.
I feel so under -informed about css now.
what book would you recommend reading to get a good feel for all the possibilities in layout techniques?
There’s plenty of sitepoint books to choose from but you can also learn a lot from the [URL=“http://reference.sitepoint.com/css”]online reference about how things should work although its mainly a manual and not a “how to”.
The learnable courses are good if you really want to embrace learning but comes at a price.
Otherwise the best way to lean is just to practice and to read through threads in the forum to see how others are tackling things. I learned most of my stuff in the early days from forums like Sitepoint where you can test out and refine ideas. There are also plenty of good sites about that are worth taking the time to look through.
Thanks for the recommendations. I prefer sitepoint’s books. They’re very good.
Learnable and SitePoint are part of the same company, and you can access the SitePoint books through Learnable (just so you know 
).
so i’m planning on slicing this up in photoshop. any recommendations on how i should proceed with that.
i was planning on slicing the paper part into a bunch of buttons basically about 5 i think it was and the logo as an image by itself.
one thing i noticed was the text was a bit fuzzy in the buttons like bar, photos, etc. It was saved as a jpeg with 100% quality. the image on the logo looks good just the text looks slightly messed up.
any ideas. i know this is probably the wrong forum for this question.
But if you know, please advise.
Don’t keep the text in the image. On the web, text need to be real text. It’s hopeless to do this from a jpg. At least work from the original psd file, so that you can hide the text etc. while you are preparing te bg images.
the psd has little faded line images underneath the text links.
so i will use css to code a link and then i will use javascript for the arrow rollover? or should i use css for that too?
after each link, i’ll have an image of the line?
Will i just code that as a img or use some type of list element or span and then do the background through css? i believe i saw a technique like that before.
so i’lll need to get the actual font from them and then my question at this point, are embedded fonts supported
across all the browsers?
You can use CSS for all those effects. Of course, you use HTML to code the link, and then CSS to style it.
after each link, i’ll have an image of the line?
Will i just code that as a img or use some type of list element or span and then do the background through css?
It’s not easy to see the lines in the image you posted, but it looks like you’ll need to use an image to replicate them. Anyhow, make it a small, transparent image that you can place wherever you need to. Because it’s decoration, I would place it as a background image on whatever element it goes with. (You can add padding at the bottom of the element and place the image as a background at the bottom, in the padding area.)
so i’lll need to get the actual font from them and then my question at this point, are embedded fonts supported
across all the browsers?
The font they used may not be web-ready, so to speak. Most commercial fonts can’t be used on the web, so if this one isn’t available, you’ll have to find an equivalent that can be used. With any luck, there will be a free version available, which you can place in your site’s files and call via @font-face. The FontSquirrel site has a lot of nice free fonts that are ready for web use.
To be honest, this stuff takes some skill, so I feel you are biting off a bit more than you are ready for … but I guess you’ve got to learn some time! Just don’t promise to have this ready by next week.
i decided to start using cufon for the text problem.
check it out
http://webpage.pace.edu/wc43870n/designlab/longpattern.html
wanted to learn sifr, but cufon seemed quicker to learn.
Both of those are out of date and I wouldn’t touch them. They are not very accessible, are slow loading, and they introduce other problems you don’t need. Web fonts have taken over, and are a much better solution.
web fonts are not fully supported in IE though if i’m correct?
Cufon is supported isn’t it?
Let me know, thanks.
just reading up on this now.
They work fine in all the current versions.
yes just not in the old ones like Ie 6, 7, or 8. when i design for compatibility, i think i should design for those as well.
but do most people just design for the latest ones? Please let me know what is the most common practice.
so i’m looking at the front page of this design again and i’m wondering how i should go about this,
Cause this paper has a bunch of lines on it and those links are directly above the lines, but as you mentioned already, if you zoom in on the screen, the design
explodes.
so what suggestion would you make to the designer.
cause they’re saying they want to keep those lines there for texture.