Jump to content
Sign in to follow this  
rmaxsg

Please help! How to create vertical line

Recommended Posts

rmaxsg

Hi

    I need to put a vertical line in between the 2 columns in content area, is possible by apply CSS?

If can. i need to adjustable length and position high and width of vertical line.

 

Sample code from this website

Here is the image

CSS code they use

.left-content {
    border-right1px solid #EAEAEA;
    padding-bottom50px;
    padding-right50px;
}

 

 

 

Thank you for any kind of help :)

 

 

Share this post


Link to post
Share on other sites
Danny

Hi, What you will need to do is inspect the element you wish to have the vertical line. I recommend using Firebug or your browsers built-in web dev tools to inspect your site and find the correct class. Can you provide a link to the site in question please. For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

anybody can help me????

Share this post


Link to post
Share on other sites
James B

Hi there, we're unable to provide the css code for you directly, but we can point you in the correct direction to find it etc.

 

If you use the Pagelines grid system you'll be able to create two columns in the content area by using some shortcodes which split the content etc. You'll find the grid system shortcodes here - http://demo.pagelines.me/tools/

 

Once you have the item in the two columns you can apply a border-left or border-right in css to get the line in the middle using the method Danny's suggest above to find the correct css element.

 

To find out more on using borders in css, check out http://www.w3schools.com/css/css_border.asp which will show you the different type of border effects you can apply.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rmaxsg

Thank you so much Advocate.  Just no sure how Pagelines grid system with Border-line in CSS look like?   

 

page-id-118 .content .row  .span2 .row-fluid {
border-right: 1px solid #EAEAEA;
}

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Yes that's it, you can just use .span2 then the border code. If you want to use the page-id you'll need to put # in front of it.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rmaxsg

i try the CSS code. but doesn't work :(

 

#page-id-118 .content .row .span2 {
        border-right: 2px solid #3e3e3e !important;
}

 

My Site

Share this post


Link to post
Share on other sites
Danny

Hi,

 

What I would suggest is adding a div inside your span and giving that a class, if you were to use span2 for example, then everytime you used span2, it would have a border on the right.

 

Here is what I would do:

 

https://gist.github.com/anonymous/5269254

 

You where I have added the vert-line class, use this to style a vertical line using border-right. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

I follow instruction below

 

I add this in to my content

 

<div class="row">
<div class="span6"></div>
<div class="span2">
<div class="vert-line"></div>
</div>
<div class="span4"></div>
</div>
 
 
I add this in to my Custom CSS
 
#page-id-118 .content .row .span2 {
        border-right: 2px solid #3e3e3e !important;
}
 
or
 
#page-id-118 .content .row .span2 .vert-line {
        border-right: 2px solid #3e3e3e !important;
}
 
All did.'t work :(

Share this post


Link to post
Share on other sites
Danny

Not sure why you keep using page-id .content .row etc...

 

Just use:

 

.vert-line { }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

i try.

.vert-line {

border-right: 2px solid #3e3e3e !important;

}

Still Not working

Share this post


Link to post
Share on other sites
Danny

Its not working as there isn't any div with the class vert-line on your site.

 

http://d.pr/i/XTg8

 

With the div and class added, along with some CSS, this works.

http://cl.ly/image/1x3i0Q073m13

 

Even easier would be to do the following, remove span2 as there is no content in the div and therefore, its not needed. Now that span 2 is removed you just use span8 and span4 and apply the vert-line class to the span8 div, see image below.

 

http://cl.ly/image/1B0s0H3N3C3I

 

I have resolved the topic, as all the information is now available to you to achieve this kind of layout. I have even provided the CSS to get this to work, which I am not allowed to do.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

Sorry I try on my Localhost.  Now i had update my content in my live site.

 

Please take a look Here

 

Sorry for troubling you

Share this post


Link to post
Share on other sites
Danny

See my post above, all the information above will allow you to achieve this look.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

Thank you so much for help me NinJa.  Problem in deed solve.

 

Have a great Weekend. :)

Share this post


Link to post
Share on other sites
Danny

No problem, happy to help!


Please search our forums, before posting!

Share this post


Link to post
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

Sign in to follow this  

×