6 Replies - 3212 Views - Last Post: 06 August 2016 - 04:54 AM

#1 Hellsbellboy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 28-June 03

Verticle half line between two buttons in HTML/CSS

Posted 04 August 2016 - 04:24 PM

Hello,

I'm working on a HTML/CSS mockup of a project for a mobile app, and have a question about how to create a specific element with HTML/CSS.

Here's a screenshot of what I'm attempting to do:

Posted Image

https://www.dropbox....xt/how.jpg?dl=0

Want to get that half vertical line between the 'Join now and Log in'.

Thank you.

This post has been edited by Hellsbellboy: 04 August 2016 - 04:25 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Verticle half line between two buttons in HTML/CSS

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Verticle half line between two buttons in HTML/CSS

Posted 04 August 2016 - 11:37 PM

The first thing you could do is to right-click and Inspect Element on that page to explore how they achieved it.

There isn't a border-length (border-width should really be border-thickness) property available so there are a number of approaches to this, for example (using pseudo selectors), or using a border-image. caniuse

Another approach is to use a background image for the containing element.

Searching will reveal other variations/hacks.
Was This Post Helpful? 0
  • +
  • -

#3 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Verticle half line between two buttons in HTML/CSS

Posted 05 August 2016 - 06:10 AM

I would definitely use a pseudo-element for this with position set to absolute (top: x%/px; right: borderWidth/2; bottom: x%/px)

Just a little note : actually before and after are called pseudo-elements and the correct syntax is ::before and ::after in order to distinguish them from :hover :focus: :active :visited :target, etc. which are called pseudo-classes. Pseudo-classes are called like this because it's as if the element had a class name which would not be explicit in the document, and pseudo-elements because it's as if you were styling an element, which is not explicit in the document. I don't think there is anything called pseudo-selector and I don't think it would make much sense.

This post has been edited by ge∅: 05 August 2016 - 06:12 AM

Was This Post Helpful? 0
  • +
  • -

#4 Hellsbellboy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 28-June 03

Re: Verticle half line between two buttons in HTML/CSS

Posted 05 August 2016 - 01:59 PM

Thank you both! I'll look deeper into this and see what I can get to work (and post my results). This helps point me in the right direction. Thanks again!
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,955
  • Joined: 03-December 12

Re: Verticle half line between two buttons in HTML/CSS

Posted 05 August 2016 - 07:17 PM

Pipe character, color #333, margin 100of left and right.
Was This Post Helpful? 1
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Verticle half line between two buttons in HTML/CSS

Posted 06 August 2016 - 01:35 AM

I like the pipe ;)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
body {
    background-color: black;
}
ul {
    background-color: lightyellow;
}
li {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin-left: 10px;
    margin-right: 10px;
}
li::after {
    content: '|';
    position: absolute;
    right: -5px;
    line-height: 50px;
    color: #333;
}
li:last-child::after {
    content: none;
}
</style>
</head>
<body>
<ul>
    <li>HELLO</li>
    <li>THERE</li>
    <li>YOU</li>
</ul>
</body>
</html>

Attached Image
Was This Post Helpful? 0
  • +
  • -

#7 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Verticle half line between two buttons in HTML/CSS

Posted 06 August 2016 - 04:54 AM

I don't, because it's not flexible.

Characters have kerning, baseline, height, size, font-hinting, etc. which depend on the font, the system and user preferences. You can never be very precise with font, and you can never be sure everyone is going to see the same thing.

Moreover, if you or your client change your mind, you will have to replace it by something else anyway and readjust what you had previously done (like your -5px which is completely arbitrary: you can even see that THERE doesn't look centred in your design, and I am sure that whatever the value, it will look misaligned in one browser).

You can use primitive shapes, borders and images, which have a defined width and height, are a lot easier to work with, can be animated, etc. You will find some examples bellow

https://jsfiddle.net/tx4ebky4/

li::after {
    content: '';
    display: block;
    position: absolute;
}

.style1 li::after{
    border-left: 1px solid black;
    height: 18px;
    right: -0.5px;
    top: 16px;
}

.style2 li::after{
    border-left: 5px dotted gray;
    height: 25px;
    right: -2.5px;
    top: 12.5px;
}

.style3 li::after{
   height: 10px;
   width: 10px;
   background: black;
   right: -5px;
   top: 50%;
   margin-top: -5px;
}

.style4 li::after{
   background: url(http://oi41.tinypic.com/10nsyma.jpg);
   background-size: 100%;
   height: 45px;
   width: 16px;
   right: -8px;
   top: 2.5px;
}

li:last-child::after {
    content: none;
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1