3 replies [Last post]
lukewebb
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-24
Posts: 3
Points: 0

Hi all,

I am a amateur coder who is trying to create a attractive website but is having problems, Sorry for asking such a possibly simple question, I have searched the forum however most of the solutions involve playing with margins which results in messing up my curved edges.

I am trying to centre a box with curved edges. Here is the current HTML and CSS.

HTML

Shanoz.com

Snazzy Borders

Based on Nifty Corners By Alessandro Fulciniti
http://pro.html.it/esempio/nifty/

Rounded borders without images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

CSS

body { background-image: url(../Images/BannerTileBackground.gif); background-repeat: repeat-x; background-color: #87AEC5; } .logo { background-image: url(../Images/shanoz.gif); background-repeat: no-repeat; width: 700px; height:70px; margin-left: auto; margin-right: auto; display:block; background-position: center; }

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; width: 700px;}


#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a;
padding-top:0.5em;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy {background: transparent; width: 750px;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; }
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

And here is how it displays on web : http://www.shanoz.com/helpme.htm

Many Thanks for your help.

lukewebb
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-24
Posts: 3
Points: 0

Just wanted to add, I am

Just wanted to add, I am just looking to achieve a centered box with rounded edges. I am not fixed to this solution and welcome any other suggestions however this seems to be the best I have found after much web searching. (Does not use image files and is all within my css file)

Regards, Luke

Edit - Apologies for double post, I accidentally posted this instead of editing my previous post.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Have you not tried

Have you not tried thiis?
#xsnazzy { /*Style.css (line 27)*/
background:transparent none repeat scroll 0%;
margin:0 auto;
width:750px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lukewebb
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-06-24
Posts: 3
Points: 0

Many thanks it seems to have

Many thanks it seems to have done the trick. I was stuck for ages as well :ohdear: .

I just added the

margin:0 auto;

code and it works absolutely beautifully.

Regards, Luke