Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Needing suggestions for a problem with rounded corners.

    Hi all,

    I am having an issue with making a UL box have rounded corners. I have created 3 separate images using photo shop and when I try putting them together I get a small gap in between each. I feel like I've tried everything but being new to CSS im sure its something obvious I am missing. I'm going to provide everything im working with and would greatly appreciate any suggestions.

    Code:
    <div id="helpfullinks">        
      			    
       <ul>  
             <p class="first"><a href="http://allaboutclothdiapers.com/" title="All about cloth diapers" target="_blank">All about cloth diapers.</a></p>
            <a href="http://allaboutclothdiapers.com/how-many-cloth-diapers-do-you-need/" title="How many diapers do I need?" target="_blank">How many diapers do I need?</a>
            <a href="http://mothering.com/green-living/dumping-disposable-diapers" title="Dumping disposable diapers" target="_blank">Dumping disposable diapers.</a>
            <a href="http://www.mothering.com/green-living/crazy-for-cloth" title="Crazy for cloth" target="_blank">Crazy for cloth!</a>
            <a href="http://www.mothering.com/green-living/joy-of-cloth-diapers" target="_blank">The joy of cloth diapers!</a>
             <p class="last"><a href="http://clothdiaperhelp.com/index.php/en/the-news/45-5-ways-to-soothe-a-fussy-baby" title="Soothing your baby." target="_blank">Soothing your baby.</a></p>
       </ul> 
    </div>
    I added the first/last class tags to give the pics something to hold on to. They may be the problem but I couldn't figure out how to do it with out them.

    Code:
    #helpfullinks p.first {
    	background-image:url(../Images/helpfullinkstop.png);
    	color: #ffffcc;
    	margin: 0;
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    #helpfullinks p.last {
    	background-image:url(../Images/helpfullinksbtm.png)
    	margin: 0;
    	background-repeat: no-repeat;
    	background-position: left bottom;
    }
    
    #helpfullinks {
    	padding-right: 10px;
    	padding-bottom: 0px;
    	padding-left: 10px;
    	height: auto;
    	background-color: #FFFFFF;
    }
    
    #helpfullinks ul {
            background-image: url(../Images/helpfullinksmid.png);
            background-repeat: repeat-y;
    }
    
    #helpfullinks a {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	line-height: 1.5em;
    	text-decoration: none;
    	display: block;
    	margin: 5px;
    	padding: 5px;
    }
    At this point I'm lost but I don't want to give up yet. Again any help would be greatly appreciated.
    Attached Thumbnails Attached Thumbnails Needing suggestions for a problem with rounded corners.-helpfullinkstop.png   Needing suggestions for a problem with rounded corners.-helpfullinksmid.png   Needing suggestions for a problem with rounded corners.-helpfullinksbtm.png  

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Your may find this site of use.

    Right hand column.

    Specimen choice here.
    Last edited by effpeetee; 08-29-2010 at 09:16 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •