Jump to content

how to draw a single vertical line using css background


franceav
 Share

Recommended Posts

I have this page:http://www.looker-inc.com/@archive/looker-inc/au/index.htmlwhich draws 2 vertical lines by the content area using css like this:.page-container{width: 770px; margin: 0px auto; padding: 0px; background: url(../img/background_layout_1.gif) top left repeat-y; border: solid 1px rgb(100,100,100);}but I want to only draw one vertical line on the left side by the menu.I tried to use different values like repeat-x, no-repeat etc but I can only either get 2 vertical lines or nothing,what confused me is this background GIF is 770x*1px you can download from here:http://www.looker-inc.com/@archive/looker-...nd_layout_1.gifI don't know why you can't see the gif pic through the webpage but you can download it by right clicking->Save Page Asafter downloaded this gif you can try this code to do the test more conveniently:<html><head><style type="text/css">.container{width: 770px; margin: 0px auto; padding: 0px; background: url(background_layout_1.gif);}div{height:1000px;}</style></head><body><div class="container"></div></body>please help me out for this and tell me how could i use these gif lines more efficiently in css/web design, i've seen many many, any tutorials are also welcomed, many thanks!

Link to comment
Share on other sites

There are two solutions for this:1. Stop using the background image background_layout_1.gif and use this CSS on your nav3 DIV:

div.nav3 {  border-right:#666 1px solid;}

or2. Use the same background image but remove the dot (make it white is what I'm trying to say) on the right of the image that 'makes' the right vertical line... does that make sense?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...