Jump to content

how to draw a single vertical line using css background

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...