I am trying to develop a website for my dads tattoo company. I had relative success with my last site however I am struggling with how do display the attached psd.
This is how I think the site could look. I ws thinking that I would not actually have the blue font and instead opt for just the “overlapping paper” style layout with no actual header as such.
What is the best way of displaying this? Ideally I would like the content area to be able to expand vertically so that if it ever required more page area there was the facility to do so.
I have basic html and css knowledge so I am trying to expand on this!!!
Is there a way for me to use the overlapping paper style but still allow for the area to expand?
You’ll have to compromise a bit to set this up in a way that the background can expand to accommodate more content. You’d need a section of the background image that can repeat over and over, so perhaps lose the images sticking out underneath.
An alternative is to have a scroll bar to the right of the content if it exceeds the height of the container, but that’s a bit ugly.
Basically, try to avoid fixed heights on the web. Even if you decide to have just as much content as will fit in a fixed-height box, you are still in danger, as users may decide to increase the font size, or may have a larger font size set by default, in which case they will see the content hanging outside the box anyway.
Is there no way that I could retain some of the images but yet allow for a fluid layout?
Ive search all over for a tutorial but either Im failing miserably or Ill never be able to do it!
Ideally I would like to keep the design similar to how it is - except for the “skin art” text at the top. Is there no way I could slice the image in a way it would allow me to make it a fluid layout?
Maybe you should consider first what you envisage happening if the text gets longer. If that top “layer” got longer, what would you expect to happen to the background “layers”? Would they stick to the bottom and keep moving down, staying the same size? You’ve got to work out a scenario first. None of this is very practical on the web, but there could be some way to layer divs to create an effect, though it will probably have problems in older browsers.
As I said before, it’s best to avoid anything that requires fixed heights on the web. If you want fancy backgrounds, the trick is to design the image so that it can repeat over and over and yet still round off nicely if the last repeat is only partial. That’s up to your creativity.