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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Adding border to left and right sides [CSS]?

    As you can see from this portfolio i'm building:
    http://www.josephlavington.com/

    ...it only needs turqoise borders on the left and right. I was thinking I could use an image to do it (which repeats down the y-axis, so it doesn't break when you add more content) - http://www.josephlavington.com/images/bg_repeat.gif

    But how can I implement it with CSS? Any ideas?

    Here's the CSS file that's linked:
    http://www.josephlavington.com/jlav.css

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well the first thing that i would do is create a small turqoise border on the left and right, and try to make the width right. Then take a div and make it a sort of another container for your middle content, then try something like this:

    Code:
    #contentContainer {
    background-image:url(whatever.gif);
    background-repeat:repeat-x; /*you can make it shorter by adding repeat to bg image but im just explaining it*/
    width:500px; /*or whatever works*/
    height:auto;
    }
    Just see if that works for you.
    Good luck

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    I generally follow this format. Make sure you change the heights, widths, and other values necessary to match your design. I just put in dummy values as an example.

    Code
    Code:
    <div id="my_container">
    	<span class="top"></span>
    	<div class="content">all your content goes here</div>
    	<span class="bottom"></span>
    </div>
    CSS
    Code:
    #my_container {
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	width: 500px;
    }
    
    #my_container .top {
    	background-image: url(urlToTopOfDesign);
    	background-repeat: no-repeat;
    	display: block;
    	height: 6px;
    }
    
    #my_container .bottom {
    	background-image: url(urlToBottomOfDesign);
    	background-repeat: no-repeat;
    	display: block;
    	height: 6px;
    	overflow: hidden; /* to fix ie6 issue*/
    }
    
    #my_container .content {
    	padding: 0px 5px;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Cycleswithin,
    Your site seems a perfect candidate for a new technique I've been playing with. Have a look at http://nopeople.com/CSS/slider/ to see it working.
    Look at the source to see how it works and especially look at the images.

    Here's one image, the one that's being used on the bottom example: http://nopeople.com/CSS/slider/contentcurve2.gif

    You have a few things the validator finds that could be fixed.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey thanks for the replies everyone.

    I attempted to implement sobrien79's method, messed around with the code a bit to try and make it work but still no luck.

    I can get a border (using border-left and border-right method - no images), but it doesn't line up properly, and the colour doesn't quite match the turqoise of the top and bottom images (even though I used the same code - must be something to do with web safe colours etc.).

    Excavator - I ran my site through the CSS validator and it found no errors, unless you mean in IE? But then, isn't everything broken in IE anyway?

    I also think I get your technique. Where I have my container, I could just implement a background image that is the same width and have the border on the left and right only, which I think jcdevelopment also proposes.

    Anyway, this is my first CSS site - i'll see if I can work on it a bit today.

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Your CSS validates but you have 31 errors in your HTML
    HTML Validator
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #7
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    It doesn't line up because you have whitespace in your header image on the left and right. You'll have to use the image I attached. It is a transparent gif except the blue borders.

    Use the bg.gif as the background to your container div.

    Assuming you put bg.gif into the images directory:
    Code:
    #container {
        background-image: url(images/bg.gif);
        background-repeat: repeat-y;
        width: 539px;
    }
    Attached Thumbnails Attached Thumbnails Adding border to left and right sides [CSS]?-bg.gif  

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, that worked!

    I was going to implement that method, but didn't get round to it this weekend.

  • #9
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    Sweet, glad I could help.


  •  

    Posting Permissions

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