简体   繁体   中英

Centered Div With Two Divs On Both Sides - (non of existing fully works)

Well, here's the story. I am developing my first site and the first problem I've encountered is making rounded corners of main div, that will contain all stuff. CSS3 is a good solution, but incompatibility with IE6-8 is stopping me.

Also I need that rounded div (it's actually rectangular, 950x1600 with rounded 30px corners) to be centered and have a nice shade along the border.

Using background image is not an option too, because it planned to be with seamless pattern.

So what I`m thinking to do is:

  1. Put one centered div.
  2. Put images cut from photoshop in it's corners
  3. Use 1px high PS pattern for sides as shade.

Everything would be ok, but 'patterned' background messes everything. So only solution I see here is to put two divs on both sides of centered div, make right one draw pattern from right-top corner, so borders cut from photoshop would match seamlessly with siding divs, used as background image.

Now tell me, folks, am I trying to invent a bicycle here, or there's better solution?

ps all solutions that i've found all over are useless in a way. Some are very close, but leaving some margin white field 10px around divs. Or after adjusting to necessary height and width do not scrolling and falling out of page. Tables with text are useless without text (no? if i remove text it just disappears)

Yeah, I am a total noob, so please be indulgent =)

If your main concern is rounded-corner property support in older versions of IE, it might be worth checking out a plugin like CSS3Pie (css3pie.com). This uses the 'behaviour' property, so it won't mess with your other browsers - there's no sense in adding obsolete mark-up for 90% of current browsers (ie designing for the lowest common denominator).

CSS3 Pie

To be honest, I'd usually abandon the rounded corners in older versions of IE completely - as long as content degrades gracefully, there's absolutely no harm in this. However, if you really want a consistent appearance, I'd definitely go with a plugin like the above, rather than structuring your entire page around browsers that should've fallen out of use ages ago.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM