HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
How can I make the menu bar on my site have rounded corners
Post new topic   Reply to topic    HTML Help Forum Index -> General HTML
View previous topic :: View next topic  
Author Message
mattyp



Joined: 14 Jun 2009
Posts: 12

PostPosted: Thu Jun 18, 2009 8:38 am     How can I make the menu bar on my site have rounded corners Reply with quote

How can I make the menu bar on my site have rounded corners and more dimension? Also the box on the right hand side?

www.ramsocialmedia.com

thanks,
Matt[/url]
nikki



Joined: 24 Nov 2008
Posts: 132

PostPosted: Thu Jun 18, 2009 10:20 am     Reply with quote

add css to the first <li> tag i.e About us

li.first{
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}

add the following ccs for the last <li> tag i.e, Blog

li.last{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
sticks464



Joined: 31 Dec 2006
Posts: 2308

PostPosted: Thu Jun 18, 2009 10:22 am     Reply with quote

Give this round corner generator a try
mattyp



Joined: 14 Jun 2009
Posts: 12

PostPosted: Thu Jun 18, 2009 7:02 pm     Hi sticks464 Reply with quote

I tried the round corner generator but am unsure where to copy/paste into the CSS for #menu . . .

can u give me some direction.

what do I need to add to the html?
sticks464



Joined: 31 Dec 2006
Posts: 2308

PostPosted: Thu Jun 18, 2009 10:26 pm     Reply with quote

Due to the fact your using blog software and the sidebar h2 is inside a ul the div with images will not work for you. But this will
Code:

#menu {
   float: right;
   background: #699C4D;
   border-top: ;
   margin: -75px 185px 30px 20px;
    -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
}
#sidebar h2 {
   padding: 4px 20px;
   background: #699C4D;
   font-size: 1.2em;
   color: #FFFFFF;
    -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
}


It's basically the same as nikki posted only condensed. That's all you have to do is add the two rules to each style element you want to have round corners. Adjust the 8px to your liking.

WILL NOT WORK IN IE but will in all other browsers. The only way to make IE look like the other browsers is to use a background image.

Delete the css you put in from the generator.
mattyp



Joined: 14 Jun 2009
Posts: 12

PostPosted: Fri Jun 19, 2009 8:57 am     Hi sticks464 Reply with quote

The Menu with rounded corners Worked! but the sidebar did not Sad

}
#sidebar h2 {
padding: 4px 20px;
background: #699C4D;
font-size: 1.2em;
color: #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Anything else we can do to make it work?

Thanks,
Matt
sticks464



Joined: 31 Dec 2006
Posts: 2308

PostPosted: Fri Jun 19, 2009 2:33 pm     Reply with quote

You may have to use a more relative path. Try adding this style rule
Code:
#sidebar #sidebar-content ul li h2 {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
mattyp



Joined: 14 Jun 2009
Posts: 12

PostPosted: Fri Jun 19, 2009 6:00 pm     it worked! Reply with quote

Thanks!
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> General HTML All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
DARFUR
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial