[help]repeated Borders

I've come across this website, and I really like the dropshadow going down either side of the main content bit. However, I'm not sure how I would go about pulling that off in one off my own designs. Is it a CSS trick, or something that can be done using tables?

#199647

Didnt they just do it in Photoshop ?

#199650

I'm not sure; that's why I'm asking

#199660

It's a single-line repeating background that has the 700-whatever pixels of white for the content background and shadows (in the .gif), which is extremely long, but set with CSS to center on the page, so it'd work with most resolutions. So, to answer your question, the effect itself is from the image--pretty much any image editor can do that--and CSS to tell the browser to center it, but that's the extent to which CSS plays a role in the shadows.

#199664

OK, I think I get you. However, how would the shadow run all the way up the page, if not all of it is white, as you said in your example? Sorry if this makes little sense >_

#199666

Okay.. pretty much it's just some CSS for the background, like yea:

body {
  background-color:#whatever;
  background-image:url(images/name_of_wide_1px_high_bg_image_with_shadow.gif);
  background-repeat:repeat-y;
  background-position-x:center;
}

#199686

Originally posted by Simon@Aug 7 2004, 01:36 PM

OK, I think I get you. However, how would the shadow run all the way up the page, if not all of it is white, as you said in your example? Sorry if this makes little sense >_<

<{POST_SNAPBACK}>

Hm... not sure I'm quite getting your question.

What I mean by the single line repeating background is that basically the page has this structure:

COLOR - SHADOW - WHITE - SHADOW - COLOR.

The shadow continues up the page by virtue of the fact that the background repeats that line from the top all the way down. The line connects seamlessly with itself as it is drawn down vertically, creating the illusion of a shadow coming from the sides of the table. In reality, the shadow is just a few pixels, if you can imagine, sort of stretched or bled down from one row of pixels to take up all of the rows of pixels where the shadow is.

#199968

Aha, I get you now. Thanks for your help

#199980

Topic Moved.

This belongs in Web Development.

--------------------------

Stevie BM

#200580

#200583

Thanks Ludge

#200613

OK, I'm having a little bit of trouble with this. I'm using the code Mahalis posted, and this works fine in Internet Explorer. However when I try to use it in FireFox the background does not aline properly. In IE it is in the center, but FireFox just leaves it on the left-hand side. I'm still learning CSS, so I'm not sure exactly what could be causing this

Haha, yeah; another question. I'm trying to create that effect on individual table cells. When you mouse-over them, the whole of that paticular cell changed background colour and it is a link. Can anyone point me towards any guides on how to do this?

#200802

all your answers are in alistapart somewhere. Look at the horizontal dropdowns article for info on the cell bg colours.

Edit:

actually, this should work.

Make the link fill the whole cell by making it a block element. Then apply the style you want to it. Then make another style for it, but add "a:hover" rather than just "a". This style will be applied when you mouseover. It's worth remembering that IE will only apply a :hover to anchors (links) and nothing else. Other browsers will let you apply it to anything.

Edit 2: If you need any more help, IM me at some point and I'll walk you through some source code.

#200815