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 Coder
    Join Date
    Dec 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: Trying to make left and right borders using background images, Div tags help!

    I'm trying to create a box with rounded corners and borders. I'm having a problem with getting the borders to show up. I'm using a bunch of nested div tags. Is this bad practice?

    I'm currently trying to add the left and right borders using images that are very short but very long, and to repeat them. For some reason they're not appearing. Can you please help?

    Below is some code that basically has a navigation bar. I'm trying to put rounded corners on top (which is working) and the top border is showing up. The problem is that in IE the left border shows up, but in Firefox it does not. I haven't even gotten to the right border yet.

    Any ideas?

    Thanks =)

    HTML code:
    Code:
    <div class="nav_main">
    			<div class="border_nav_main">
    				<div class="border_top_trans">
    					<div class="border_top_left"><img src="img/corner_tl.gif"></div>
    					<div class="border_top_right"><img src="img/corner_tr.gif"></div>
    				</div>
    				<div class="nav_main_selected">Home</div>
    				<div class="nav_main_unselected">You</div>
    				<div class="nav_main_unselected">Notes</div>
    				<div class="nav_main_unselected">Tags</div>
    				<div class="nav_main_unselected">Browse</div>
    				<div class="nav_main_unselected">Search</div>
    			</div>
    		</div>
    CSS code:
    Code:
    div .nav_main {
    	position: relative;
    	float: left;
    	clear: both;
    	display: inline;
    	background: url(../img/nav_background.jpg) repeat top left;
    	width: 100%;
    }
    
    div .nav_main_selected, div .nav_main_unselected {
    	float: left;
    }
    
    div .nav_main_unselected, div .nav_main_selected{
    	font-size: 12pt;
    	font-weight: bold;
    	text-align: center;
    	margin-top: .2em;
    	margin-left: 20px;
    	margin-right: .5em;
    	margin-bottom: 0;
    	width: 6em;
    }
    
    div .nav_main_selected{
    	background: white;
    	color: #003366;
    }
    
    div .nav_main_unselected{
    	color: white;
    }
    
    div.border_nav_main{
    	background: url(../img/border_left.gif) repeat;
    	height: 100%;
    	width: 100%;
    	clear: both;
    }

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image borders

    Is this bad practice?
    Yes.
    A more appropriate approach would be to use CSS to implement these as background images. Now, since CSS only allows one background image for each element you'll going to need multiple elements to hold all the necessary images; the key here is to make the most use of the existing elements necessary for proper markup and to avoid adding superfluous elements for visual effects as much as possible.

    These articles on ALA give you an idea of how to approach this: Onion Skinned Drop Shadows, CSS Design: Creating Custom Corners & Borders and ... part II.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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