ASC999

Am loving border radius! The problem is i'm now giving everything rounded corners! ha ha

Hi, I'm trying to create rounded corners on the tabs for a secondary level navigation bar. I have sorted the corners on the hidden pages but am having issues with the 'current page' and also 'hover'function when trying to add the second corners. I think it's something to do with the span function as the second corners are appearing, but over the words rather than the edge of the tab. Any help would be much appreciated! My CSS is as follows: #menu2 { clear: both; margin: 0px; padding: 0 0px 0px 0px; width: 681px; background: #ffffff; /* header photo colour faf9dc ffffff */ float: right; } #menu2 ul { font: bolder 14px 'Lucida Calligraphy', 'Trebuchet MS', sans-serif; width: 621px; color: #fff; background-color: #ffffff; margin: 0 0px; padding-top: 0px; display: inline; border-bottom: 0px solid #2000d6; /* gap between menu & main colour fff */ float: left; } #menu2 li { float: left; list-style: none; position: relative; margin-right: 1px; background: #2000d6 url(images/tab_tr.png) no-repeat top right; } #menu2 li ul { display: none; position: absolute; top: 1em; left: 0; } #menu2 li a { display: block; padding: 7px 55px; color: #FAF9DC; text-decoration: none; background: transparent url(images/tab_tl.png) no-repeat top left; } #menu2 li a#current span { float: left; display: block; width: 15px; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: #ffffff url(images/currenttab_tr.png) no-repeat top right; } #menu2 li a:hover { background: #000000 url(images/hover_tl.png) no-repeat top left; color: #FAF9DC; } #menu2 li a:hover span { background: #000000 url(images/hover_tr.png) no-repeat top right; color: #FAF9DC; padding: 0 10px; } #menu2 li a#current { background: #ffffff url(images/currenttab_tl.png) no-repeat top left; color: #2000d6; } #menu2 li a#current:hover { background: #000000 url(images/hover_tr.png) no-repeat top right; color: #ffffff; } #menu2 li a#current:hover span { background: #000000 url(images/hover_tl.png) no-repeat top left; color: #ffffff; } #menu2 li:hover ul { display: block; background-color: #2000d6; color: #FFF; } #menu2 li > ul { margin-top: 0px; margin-left: 0px; background-color: #2000d6; color: #FFF; } Whilst my HTML is : <div id="menu2"> <ul> <li><a href="index.html" id="current"><span>Home</span></a></li> <li><a href="about.html"><span>About us</span></a></li> <li><a href="info.html"><span>Alpaca info</span></a></li> </ul> </div>

Once again, many thanks for your help - all is now working well. Hopefully I will be able to sleep tonight without dreaming about codes!

Hi Bocaj, Many thanks for your reply. The dropdown is now working! I now seem to have 2 other small issues however: You need to move the curser very slowly & accurately in order to select one of the 2nd level links on the dropdown menu. It can take several attempts to move from the menu bar to the list as they keep hiding. I can't seem to change the background colour on the dropdown lists - they just stay clear accept the link you are hovering over. All help is much appreciated - as you may be able to tell, i am a complete novice at this!

I'm struggling to get the dropdown to work. Does anyone have any suggestions? CSS: /* header menu */ #menu { clear: both; margin: 0; padding: 0 0 10px 0; width: 770px; background: #FFF url(images/wrap-bg.jpg) repeat-y; float: left; } #menu ul { font: bolder 14px 'Trebuchet MS', sans-serif; width: 740px; color: #FFF; background-color: #4E3525; margin: 0 15px; padding: 0; display: inline; border-bottom: 6px solid #FFF; float: left; } #menu li { float: left; list-style: none; position: relative; } #menu li ul { display: none; position: absolute; top: 1em; left: 0; } #menu li a { display: block; padding: 5px 15px; color: #FFF; text-decoration: none; } #menu li a:hover { background: #C8935D; color: #FFF; } #menu li a#current { background: #993333; color: #FFF; } li > ul { top: auto; left: auto; } #menu li:hover ul { display: block; } /* dropdown menu position */ #menu table{ border-collapse:collapse; z-index: 80px; left:-1px; top:5px; } /* hide the sub level links */ #menu ul ul { visibility:hidden; position:absolute; width:100%; height:0; } /* make the sub level visible on hover list or link */ #menu ul li:hover ul, #menu ul a:hover ul{ visibility:visible; padding-left: 0; padding-top: 0; position: absolute; } HTML: <div id="menu"> <ul> <li><a href="index.html" id="current">Home</a></li> <li><a href="index.html">About us</a></li> <ul> <li><a href="index.html" title="Our aims & objectives">Our goals</a></li> <li><a href="index.html" title="Shows, workshops & courses">Events</a></li> </ul> <li><a href="index.html">Alpaca info</a></li> <li><a href="index.html">Ivywell herd</a></li> <li><a href="index.html">Services</a></li> <li><a href="index.html">Links</a></li> <li><a href="index.html">Contact us</a></li> </ul> </div>

Many thanks for your reply. Whilst you are correct about the total width being 967px, i've changed that but still no luck with the left indentation. Any other suggestions?

Hi All, I've put a wrapper on my site to centre it & everything seems to have worked. I have an issue however with the body (h2 plus the content. For some reason there appears to be a margin, so the body has shifted over about a third of the page. The width is fine. It's got me stumped! Any help would be much appreciated. CSS: * { margin: 0; padding: 0; } body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #cc9933; <!--margin colour--> background- repeat: no; bakground position: bottom left; background-attachment: fixed; line-height: 125%; padding: 0px; margin: 0px; text-align: left; colour: #FFccCC; } #wrapper { background-color: #FFcc99; <!--main body colour--> border: 1px solid #ff9933; position: relative; margin: 0 auto; padding: 0px; width: 960px; text-align: left; } #content_wrapper { margin: 0px; width:960px; height:900px; background-image: url(content.gif); background-repeat: repeat-y; border-bottom: 10px solid #ff0033; text-align: left; } #bodycontent { margin: 0px; padding-left: 0px; text-align: left; } h1, h2, h3 { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; } h1 { font-size: x-large; background-color: navy; color: white; padding-top: 3em; padding-bottom: .2em; padding-left: .4em; margin: 0px; background: #663300; <!--header colour--> border: 1px solid #ff9933; } h2 { color: navy; font-size: 130%; font-weight: normal; padding-top: 70px; padding-left: 5px; text-align: left; margin: 0px; width: 960px; z-index: 0; border: 1px solid #ff9933; } .post-body div, p { font-size: small; color: navy; padding-left: 5px; padding-top: 5px; } #tagline p { font-style: italic; font-family: Georgia, Times, serif; border-top: 1px solid #99cc33; border-bottom: 1px solid #99cc33; padding-top: .5em; padding-bottom: .5em; padding-left: .8em; margin: 0px; background: #99cc33; border: 1px solid #ff9933; } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ivywell Alpacas - Home Test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link href="testing.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitebranding"> <h1>Ivywell Alpacas</h1> </div> <div id="tagline"> <p>Defining the future...</p> </div> <!-- SiteSearch Google --> <div id="search"> <form method="get" action="http://www.google.com/search"> <label for="q">Search:</label> <input id="q" name="q" size="20" maxlength="255" value="" type="text"/> <input name="domains" value="http://www.ivywell.co.uk/"'>http://www.ivywell.co.uk/" type="hidden"/> <input name="sitesearch" value="http://www.ivywell.co.uk/" checked="checked" id="mysite" type="radio"/> <label for="mysite">Just this site</label> <input name="sitesearch" value="" id="www" type="radio"/> <label for="www">WWW</label> <input name="btnG" value="Go" type="submit"/> </form> </div> </div> <!-- end of header div --> <div class="menu"> <ul> <li><a href="../menu/index.html">HOME<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <li><a href="../menu/index.html">ABOUT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/embed.html" title="Our aims & objectives">Our goals</a></li> <li><a href="../menu/form.html" title="Shows, workshops & courses">Events</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.html">ALPACA INFO<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="Explanation of what an alpaca is">What are alpacas?</a></li> <li><a href="vertical.html" title="An overview of the alpaca standard">Alpaca facts</a></li> <li><a href="expand.html" title="How to look after alpacas">Care & husbandry</a></li> <li><a href="enlarge.html" title="Reasons for keeping alpacas">Why keep alpacas</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/index.html">IVYWELL HERD<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/body4.html" title="Our success in the ring">Show success</a></li> <li><a href="../layouts/bodyfix.html" title="Studs services available">Studs</a></li> <li><a href="../layouts/body2.html" title="Our core herd of breeding females">Females</a></li> <li><a href="../layouts/body5.html" title="Photo's of our herd">Gallery</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">SERVICES<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="Alpacas currently available for sale">Alpacas for sale</a></li> <li><a href="spies.html" title="Clothing range made from alpaca fleeces">Alpaca knitwear</a></li> <li><a href="vertical.html" title="Alpaca equipment & supplies">Alpaca supplies</a></li> <li><a href="expand.html" title="Support for establishing & running a successful alpaca business">Business support</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">LINKS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">CONTACT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="Directions">How to find us</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> <div id="content_wrapper"> <div id="bodycontent"> <h2>Welcome to the home of Ivywell Alpacas</h2> <p>Welcome to the site of Ivywell Alpacas. blah blah blah. </p> <p><img src="Gallery/Brooke.jpg" class="feature" width="200" height="162" alt="a circle of divers practice their skills"/></p> </div> <!-- end of bodycontent div --> </div> </div> <!--wrapper--> </body> </html>

Dan - thank you so much, you are an absolute star! All is now sorted!

Many thanks for your replies. I've tried the codes you've suggested above & amendments, but still no luck! Any other suggestions? How do I stop everything squeezing up when you minimise the screen?

Hi All, This is my first post & I am very much a beginner at web design. I am doing my best to learn how to use codes but am now stuck! I have read several posts on here regarding wrappers & how to centre my site, but still am not getting anywhere, so your help would be much appreciated! My CSS looks like this: * { margin: 0; padding:0; } body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #99cc33; line-height: 125%; padding: 0; margin: 0; text-align:left; } #wrapper { background-color: #FFFF99; border: 1px solid #993399; margin-top: 0px; margin-left: auto; padding: 10px; width: 960px; height: 1000px text-align:left; } Whilst my html is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ivywell Alpacas - Home Test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link href="testing.css" rel="stylesheet" type="text/css"/> </head> </div> <body> <div class="wrapper"> <div id="header"> <div id="sitebranding"> <h1>Ivywell Alpacas</h1> </div> <div id="tagline"> <p>Defining the future...</p> </div> <!-- SiteSearch Google --> <form method="get" action="http://www.google.com/search"> <div id="search"> <label for="q">Search:</label> <input id="q" name="q" size="20" maxlength="255" value="" type="text"/> <input name="domains" value="http://www.ivywell.co.uk/"'>http://www.ivywell.co.uk/" type="hidden"/> <input name="sitesearch" value="http://www.ivywell.co.uk/" checked="checked" id="mysite" type="radio"/> <label for="mysite">Just this site</label> <input name="sitesearch" value="" id="www" type="radio"/> <label for="www">WWW</label> <input name="btnG" value="Go" type="submit"/> </div> </form> <!-- SiteSearch Google --> </div> <!-- end of header div --> </div> <!-- end of header div --> <div id="navigation"> <ul> </ul> </div> <!-- end of navigation div --> <div class="menu"> <ul> <li><a href="../menu/index.html">HOME<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="herd2.html" title="The zero dollar ads page">test</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">test</a></li> <li><a href="../menu/form.html" title="Styling forms">test</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.html">ABOUT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/index.html">EVENTS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">HERD<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">CONTACT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">test</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">test</a></li> <li><a href="../mozilla/content.html" title="Using content:">test:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> <div id="bodycontent"> <h2>Welcome to the home of Ivywell Alpacas</h2> <p><img src="Gallery/Brooke.jpg" class="feature" width="200" height="162" alt="a circle of divers practice their skills"/></p> <p>Welcome to the site of Ivywell Alpacas. blah blah blah. </p> </div> <!-- end of bodycontent div --> </div> <!--wrapper--> </body> </html> Any help would be much appreciated as it is now driving me absolutely crazy!!!