|
Posted by Audun Holme on 12/18/06 01:47
But I've already posted the relevant CSS and HTML markup
"Adrienne Boswell" <arbpen@yahoo.com> wrote in message
news:Xns989CAEFB8E12arbpenyahoocom@69.28.186.121...
> Gazing into my crystal ball I observed "Audun Holme"
> <au-holme@online.no> writing in news:EPCdnRlQbe1wQxjYRVnzvQ@telenor.com:
>
>> Hey
>>
>> I'm trying to create a "tab control" (much like Amazon.co.uk) effect
>> on my website I'm working on.
>>
>> I want to have a border around the tabs. Some of this border is set by
>> using the CSS rule "border:2px solid #f00049;" and for the rounded
>> corner effect I just use a image. The problem is (as you can see from
>> this link below) that the border created by CSS don't align with the
>> border created by the images.
>>
>> http://home.online.no/~au-holme/pub/22301/index.html
>>
>> Below I've posted my source code
>>
>> Any suggestions??
>>
>> Here is my CSS:
>> ul#nav{
>> list-style:none;
>> margin:0;
>> padding:0;
>> }
>>
>> ul#nav li {
>> float:left;
>> margin:0;
>> }
>>
>> ul#nav a{
>> background:#f8c16a url(Images/left.jpg) left top no-repeat;
>> padding-left:10px;
>> border:2px solid #f00049;
>> text-decoration:none;
>> }
>>
>> ul#nav a span {
>> background:#f8c16a url(Images/right.jpg) right top no-repeat;
>> padding-right:10px;
>> }
>>
>> here is the html:
>><div>
>> <ul id="nav">
>> <li><a href="#"><span>tab1</span></a></li>
>> <li><a href="#"><span>tab2</span></a></li>
>> <li><a href="#"><span>tab3</span></a></li>
>> <li><a href="#"><span>tab4</span></a></li>
>> <ul>
>> </div>
>>
>>
>>
>
> It would help if you could also post the real url demonstrating the
> problem, or at least a short version with only the relevant markup and
> CSS.
>
>
> --
> Adrienne Boswell at Home
> Arbpen Web Site Design Services
> http://www.cavalcade-of-coding.info
> Please respond to the group so others can share
>
Navigation:
[Reply to this message]
|