...

View Full Version : css nav problem



kotoman
07-04-2011, 03:52 PM
I'm a newby and I'm trying to put together a nav bar in css. The 2 end graphics need to have rounded corners so I've created a different graphic for both ends that has a roll over state. Currently the end li are still pulling the non rounded corner graphics that are being used by the middle li. How do I assign the rounded corner graphic to the ends.

here is the html:

<div class="nav">
<ul class="cssmenu">
<li class="vision"><a href="#" title="Vision">Vision</a> </li>
<li class="showcase"><a href="#" title="At a Glance">Brand Showcase</a></li>
<li class="videos"><a href="#" title="Videos">Videos</a></li>
<li class="guidelines"><a href="#" title="Guidelines" >Guidelines</a></li>
<li class="assets"><a href="#" title="Assets" >Assets</a></li>
<li class="template"><a href="#" title="Template">Templates</a></li>
<li class="faqs"><a href="#" title="faqs">FAQs</a></li>

</ul>
</div>


and here is the css:

/*
* Nav Setup
*/
#nav {
width:925px;
height: 38px;
margin: 80px 0 0 21px;

}

ul.cssmenu {
list-style: none;
padding: 0px;
margin-left: 25px;
font: 15px 'DINBold', Helmet, Freesans, sans-serif;
}


ul.cssmenu li {
float: left;
text-align:center;

}

ul.cssmenu li a {
display: block;
height: 30px;
background-image:url(../images/nav_bk.png);
background-repeat:repeat-x;
text-align:center;
padding-top: 8px;

}
ul.cssmenu vision li a {
display: block;
height: 30px;
background-image:url(../images/nav_lft.png);
background-repeat:none;
text-align:center;
padding-top: 8px;
}
ul.cssmenu faqs li a {
display: block;
height: 30px;
background-image:url(../images/nav_rght.png);
background-repeat:none;
text-align:center;
padding-top: 8px;
}

/*
* Normal Links
*/
ul.cssmenu li.vision {
width: 106px;
border-right: 1px solid #ccc;
border-image:url(../images/nav_lft.png);

}
ul.cssmenu li.showcase {
width: 189px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
}
ul.cssmenu li.videos{
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
}
ul.cssmenu li.guidelines {
width: 144px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
}
ul.cssmenu li.assets {
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
}
ul.cssmenu li.template {
width: 142px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
}
ul.cssmenu li.faqs {
width: 100px;
background-image:url(../images/nav_rght.png);

}

/*
* hover Links
*/
ul.cssmenu li.vision a:hover {
width: 106px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_lft.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.showcase a:hover{
width: 189px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.videos a:hover{
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.guidelines a:hover {
width: 144px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.assets a:hover {
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.template a:hover {
width: 142px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.faqs a:hover {
width: 100px;
background-image:url(../images/nav_rght.png);
background-position: 0 -38px;
color:#FFF;

}

/*
* clicked Links
*/
ul.cssmenu li.vision a:active {
width: 106px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_lft.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.showcase a:active{
width: 189px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.videos a:active{
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.guidelines a:active {
width: 144px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.assets a:active {
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.template a:active {
width: 142px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.faqs a:active {
width: 100px;
background-image:url(../images/nav_rght.png);
background-position: 0 -38px;
color:#FFF;

}

/*
* clicked Links
*/
ul.cssmenu li.vision a.selected{
width: 106px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_lft.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.showcase a.selected{
width: 189px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.videos a.selected{
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.guidelines a.selected {
width: 144px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.assets a.selected {
width: 118px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.template a.selected {
width: 142px;
border-right: 1px solid #ccc;
background-image:url(../images/nav_bk.png);
background-position: 0 -38px;
color:#FFF;
}
ul.cssmenu li.faqs a.selected {
width: 100px;
background-image:url(../images/nav_rght.png);
background-position: 0 -38px;
color:#FFF;

}


/* nav end */


any help greatly recieved.

Kotoman

Sammy12
07-04-2011, 05:00 PM
you would set the ul to position: relative and absolute the images. However you can also just use border-radius: 8px; webkit-border-radius: 8px; -moz-border-radius: 8px;

border-radius is the default
-webkit-border-radius opera? and chrome
-moz-border-radius: ff

Don't really need them all, but I just use them anyways

kotoman
07-04-2011, 05:59 PM
thanks for the quick replay, but I'm using a png graphic to create the radius, is there any way I can amend the css to pull the different graphic in for the ends. Also, would it be possible to demonstrate the amends using full code as I wouldn't know how to implement it.

many thanks

kotoman

Sammy12
07-04-2011, 06:04 PM
so you want the radius on each li or just for the ul?

btw you used border-image on li.vision



ul.cssmenu li.vision {
width: 106px;
border-right: 1px solid #CCC;
border-image: url(../images/nav_lft.png);
}

kotoman
07-04-2011, 08:38 PM
At present when I rollover vision, it shows the nav_lft.png image but in the inactive state the nav_bk.png shows. I'm guessing that I need the nav_lft.png image to be on li. vision (?)
and the nav_rght.png image on the li faqs (?) ...

Thanks for pointing out the border error.....that's been causing all sorts of loading issues in Dreamweaver.

Sammy12
07-05-2011, 12:21 AM
go with what you feel in your heart.

Im so lost, I really have no idea what you are trying to do. Maybe a screenshot would help. I'm really lost.

shankar.adodis
07-05-2011, 07:35 AM
Hello ,

it will be better for me to check if you provide the url of your site .

i hope below solution will solve the problem clear the cache and then check .please provide the class name where you have provided the round corner ?? in the code you have provided .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum