Vertical line placement

HTML & CSS
1

How would I place vertical lines on top of a background color in html, and is this even possible?

Code:

<div style="width: 266px; height: 44px;background-color:#00a0b0;"></div>

<div style="border-left:3px black solid; position:absolute; left:50px; height:44px;">
<div style="border-left:3px black solid; position:absolute; left:50px; height:44px;">
2

If all you want is a block of colour with two vertical black lines, then there are better ways of coding it than what you have at the moment.

If you explain what you want to do with this - do you intnd adding text or other elements, for example - we can advise you on the best method(s).

3

I just wanted to know if it was possible to move lines on top of a background color.

Example:

4

No text, nothing like that. Just a line or 2 on top of a background color, that’s all.

5

It’s possible to create a colour block with vertical lines, as I said.

Is there a reason why you want to use this particular mark-up to create the lines, or do you just want to create the finished effect?

6

It would make more sense if the lines were inside of the first div, and they should have closing tags too.

7

No, not really, I was just playing around with the code and seeing if I could do it.

8

Then why don’t you just use a single div with background-image: linear-gradient, as explained to you some time ago?

How would I convert these 3 div into 1 div without using border, and only background? - #16 by PaulOB

9

I know that method already, I wanted to try a different way.

10

Can you show me what you mean cause I tried that.

Unless I’m doing it wrong.

11

You are:-

12

Like this then.

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

Close.
You are still missing two closing tags there.
Every div must have an opening and a closing tag.

1 Like
14

It doesn’t work like this?

<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>
15

If you want the two black lines to appear inside the blue div, don’t you think it would make sense to enclose the code for them inside the code for that div? Think about where you’re placing your closing tags.

(If this is purely an exercise to see whether or not it’s possible, there’s no problem, but this is a truly horrible way to code this, and I wouldn’t recommend it to anybody in the real world.)

1 Like
16

Like this?

Then I don’t need this:
</div>

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

Seriously?

1 Like
18

Like this, but I was told it was wrong.

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

How many opening <div> tags do you have?

How many closing </div> tags do you have?

1 Like
20

Right?

Open
">

Closed
"></div>