I want to apply the border to the bottom of the DIV, but it has to be on the right side of the DIV not straight under the element. This is my html and css at the moment.
<div class="vmselement"><img src="img/play.png" alt="play" />
<h2>AFSLEELBAAR </br> OP ELD DEVICE</h2>
</div>
.vmselement{
border-bottom: 1px solid ;
color: #e8b215;
}
This is how it will looks like:
element
border bottom
Please access FIDDLE DEMO.
On
Not sure if that's what you're looking for but I would consider using box-shadows.
In order to do what I think you are trying to achieve, you would do something like this :
.wrapper{
overflow:hidden;
width:400px;
}
.vmselement{
width:400px;
color: #e8b215;
box-shadow: 180px 1px 0px 0px #e8b215;
}<div class="wrapper">
<div class="vmselement">
<img src="img/play.png" alt="play" />
<h2>AFSLEELBAAR </br> OP ELD DEVICE</h2>
</div>
</div>That way you hide the right box-shadow, and the bottom-one is not straight under your .vmselement div.
On
Please try FIDDLE DEMO
Or else try this HTML code:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.vmselement{
color: #e8b215;
}
.color-right{
border-bottom: 1px solid #e8b215;
width:50%;
float:right;
position:relative;
}
</style>
</head>
<body>
<div class="vmselement"><img src="img/play.png" alt="play" />
<h2>AFSLEELBAAR </br> OP ELD DEVICE</h2>
<div class="color-right"> </div>
</div>
</body>
</html>
As you will see - I have introduced one more div which is floated to 'right' with limited width. For now I have kept the width:50%;. You may change the width as per your needs. I suggest to keep it in percentage instead in pixels.
Just tweak the width and thickness.
Edit: Edited to fit your request.