Small Business Starter Kit

Re: Rounded edges work without corner images?!?!

bradoyler — Tue, 09 Jun 2009 22:28:28 GMT

anyone still have the source\image files for this?

Re: Rounded edges work without corner images?!?!

Hyacinth Broadchest — Mon, 25 May 2009 11:41:17 GMT

okram1:

how to change #nav-main

Do what Cyriacus has said above. Change the stylesheet where he has indicated.

Re: Rounded edges work without corner images?!?!

okram1 — Wed, 06 May 2009 10:12:53 GMT

background: #FB83BA url (../../images/bg-nav.png) no-repeat;
I changed #FB83BA to # ffffff and bg-nav.png changed the color but always stay the same color in the #nav-main, and in
#footer is changed

how to change #nav-main

Re: Rounded edges work without corner images?!?!

Cyriacus — Fri, 06 Jun 2008 02:24:49 GMT

You pretty much answered your own question.

Check out this image inside of an image viewer: images/bg-nav.png

This is in your style sheet

#nav-main {

background:#FB83BA url(../../images/bg-nav.png) no-repeat;

margin-left:auto;

margin-right:auto;

width:740px;

padding:.8em 0 1em 20px;

position:relative;

font-weight:bold;

}

and the class is called out in your Master Page

Re: Rounded edges work without corner images?!?!

Lunch2000 — Thu, 01 Nov 2007 23:29:04 GMT

They are no different than the rounded corners you see in these forum messages. The link that ca8msm sent is a great resource though and should clear up anyone's questions.

Re: Rounded edges work without corner images?!?!

Knight1219 — Wed, 31 Oct 2007 18:20:54 GMT

can you screenshot and post the edges your talking about?

Re: Rounded edges work without corner images?!?!

ca8msm — Mon, 29 Oct 2007 09:21:00 GMT

There are lots of different methods you can use to create rounded corners. Some use javascript, some use images and some use html elements. There is a link to most of these methods here:

http://www.smileycat.com/miaow/archives/000044.php

Rounded edges work without corner images?!?!

Lunch2000 — Sun, 28 Oct 2007 23:11:39 GMT

I am having a hard time understanding how the rounded corners work on the Fabrikam website. I originally thought that it was using the corresponding tl.gif (top-left), bl.gif, tr.gif, and br.gif images for the rounding, but I have removed these files and it still works. So there must me some magic that I don't know about in the style sheets. Here is the aspx markup in MasterPage.master:

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"

Width="400px" CssClass="menu-main" MaximumDynamicDisplayLevels="0" StaticSelectedStyle-CssClass="StaticSelectedStyle" />

</div>

Now here are the corresponding css elements in the style sheet:

#nav-main {

background:#608fc8 url(../../images/bg-nav.png) no-repeat;

margin-left:auto;

margin-right:auto;

width:740px;

padding:.8em 0 1em 20px;

position:relative;

font-weight:bold;

}

#nav-main div {

background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;

width:25%;

_width:25.5%;

position:absolute;

top:0;

right:0;padding:.8em 0 1em 0;

}

Can someone please explain to me where the magical rounding takes place, or a link to a site that can explain it to me. I would greatly appreciate it. Thanks.