Vertical line placement

HTML & CSS
21

3 Closed Tags


<div style="width: 266px; height: 44px;background-color:#00a0b0;border: 3px solid #0059dd;"></div>
<div style="border-left:3px black solid; position:absolute; left:50px; height:44px;"></div>
<div style="border-left:3px black solid; position:absolute; left:80px; height:44px;"></div>
22

This is of course the right way to do it :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.lines {
	position:relative;
	width: 266px;
	height: 44px;
	background:#00a0b0;
}
.lines:before, .lines:after {
	content:"";
	position:absolute;
	left:50px;
	top:0;
	bottom:0;
	width:3px;
	background:#000;
}
.lines:after {
	left:80px;
}
</style>
</head>

<body>
<div class="lines"></div>
</body>
</html>

But as you only seem to like inline styles then it is of no use because you can’t use before and after in inline styles :frowning:

…and just for fun the linear gradient version which you mentioned you already know about.

<div style="width: 266px; height: 44px;background:#00a0b0 linear-gradient(to right, #00a0b0 50px, #000 50px, #000 53px,#00a0b0 53px,#00a0b0 83px, #000 83px,#000 86px, #00a0b0 86px) ;"></div>

3 Likes
23

Which is the Correct* wrong way to do it?

24

The correct way depends on usage and as you do not supply an intended use we can only guess.:slight_smile: The correct way is the way I have shown above or if you want it inline then change your code to this:

<div style="width: 266px; height: 44px;background-color:#00a0b0;border: 3px solid #0059dd;position:relative;">
  <div style="border-left:3px black solid; position:absolute; left:50px; height:44px;"></div>
  <div style="border-left:3px black solid; position:absolute; left:80px; height:44px;"></div>
</div>
1 Like
25

3 Closed Tags

Right?


<div style="width: 266px; height: 44px;background-color:#00a0b0;border: 3px solid #0059dd;"></div>
<div style="border-left:3px black solid; position:absolute; left:50px; height:44px;"></div>
<div style="border-left:3px black solid; position:absolute; left:80px; height:44px;"></div>
26

Thanks!!!

27

No the two border divs should be children of the parent and not siblings and then the parent requires position:relative as a secure stacking context for the absolutely placed elements.

3 Likes
28

What if I wanted to use

<a href="" target="_blank"

instead of

<div>

29

I got it.

<a href="http://google.com">
  <div style="width: 266px; height: 44px;background-color:#00a0b0;border: 3px solid #0059dd;position:relative;">
    <div style="border-left:3px black solid; position:absolute; left:88px; height:44px;"></div>
    <div style="border-left:3px black solid; position:absolute; left:179px; height:44px;"></div>
  </div>
</a>
1 Like
30

I guess doing it like this would be right too.

<a href="http://google.com">
  <div style="width: 260px; height: 44px;background-color:#00a0b0;border: 3px solid #0059dd;position:relative;">
    <div style="border-left:3px solid #0059dd; position:absolute; left:83px; height:44px;"></div>
    <div style="border-left:3px solid #0059dd; position:absolute; left:174px; height:44px;"></div>
    <div style="border-left:83px solid red; position:absolute; left:0px; height:44px;"></div>
    <div style="border-left:88px solid yellow; position:absolute; left:86px; height:44px;"></div>
    <div style="border-left:83px solid red; position:absolute; left:177px; height:44px;"></div>
  </div>
</a>
31

There are hundreds of ways to do it :slight_smile:
You could shorten it to this.


<a style="width: 260px; height: 44px;background-color:red;border: 3px solid #0059dd;position:relative;display:block" href="http://google.com">
  <span style="display:block;width:91px; height: 44px;border-left: 3px solid #0059dd;border-right:3px solid #0059dd;margin:0 0 0 83px;background:yellow"></span>
</a>
3 Likes
32

And this is how you would do 3 separate colors, if I have this down right.

<a style="width: 260px; height: 44px;;border: 3px solid #0059dd;position:relative;display:block" href="http://google.com">
  <span style="display:block;width:91px; height: 44px;border-left: 3px solid #0059dd;border-right:3px solid #0059dd;margin:0 0 0 83px;background:yellow"></span>
  <span style="display:block;width:83px; height: 44px;border-left: 3px solid #0059dd;border-right:3px solid #0059dd;margin:-44px 0 0 -3px;background:green"></span>
  <span style="display:block;width:83px; height: 44px;border-left: 3px solid #0059dd;border-right:3px solid #0059dd;margin:-44px 0 0 174px;background:orange">
</span>
</a>
33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.