Opposite to [hr] ?

10 posts from 2 voices

• Started 10 months ago by MarcG5
• Latest reply from Ismael
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   MarcG5
   Member

   Hi all,

   Is it possible to create the opposite to the [hr] (horizontal line seperator) for columns? Ideally I'd like to have the line seperator to define each column section, but I've no idea how to do this so any help would be appreciated.

   Kind regards
   Marc

   Posted 10 months ago #
2. 

   Ismael
   Moderator

   Hello,

   Inspect the element column and you can style it with border-right or border-left.

   Regards,
   Ismael

   Posted 10 months ago #
3. 

   MarcG5
   Member

   Thanks Ismael,

   I've had a look following your suggestion, but am failing missrably. Is there a sample peice of code that you could suggest that I use?

   Thanks
   Marc

   Posted 9 months ago #
4. 

   Ismael
   Moderator

   Hi,

   Can you us a link to your site so that we can inspect it?

   Regards,
   Ismael

   Posted 9 months ago #
5. 

   MarcG5
   Member

   Hi,

   Sure, its http://www.mgwp.co.uk

   There are two places where I'd like to have the vertical seperator. The first on is on the home page seperating the main text with the options to the right. The second place I'd like the seperators is on the bottom of each page. This is where I have Portfolio, Prices, Contact Me.

   Thanks mate
   Marc

   Posted 9 months ago #
6. 

   Ismael
   Moderator

   Hi,

   You can do

   .home .fullwidth .two_third {
   width: 587px;
   border-right: 1px solid #CCC;
   padding-right: 25px;
   }
   
   .page .fullwidth .one_third {
   width: 274px;
   border-right: 1px solid #CCC;
   padding-right: 15px;
   }
   
   .page .fullwidth .one_third.last {
   width: 274px;
   border-right: none;
   padding-right: 15px;
   }

   Regards,
   Ismael

   Posted 9 months ago #
7. 

   Ismael
   Moderator

   Hello,

   You might find that the other columns have shorter right borders. If that is the case, open up your footer.php and place this code above </body> tag.

   <script type="text/javascript">
       jQuery.noConflict();
       $('.one_third').equalHeights();
   </script>

   Regards,
   Ismael

   Posted 9 months ago #
8. 

   MarcG5
   Member

   Thanks Ismael - I'll have a play ;-)

   Kind regards
   Marc

   Posted 9 months ago #
9. 

   MarcG5
   Member

   Cool stuff - all working!

   Thanks again
   Marc

   Posted 9 months ago #
10. 

    Ismael
    Moderator

    Hi Marc,

    Glad that I could help you. :)

    Cheers,
    Ismael

    Posted 9 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.