I've noticed vertical lines like in the website trippeo.com if you scroll down to where it says "increase traveler loyalty..." and then has a vertical line below. How would you create a long line like that in web design? Would you need to make an image and absolute position it or is there a better way with HTML, CSS, and or JavaScript?
You can do in two ways:
Background Image aligned to right and repeated across y-axis.
.main-liner {background: url("bg.png") repeat-y right top transparent;}
Border
.main-liner {border-right: 2px solid #f00; margin-right: -2px;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/RU42F/
Related
I need to create a chart using Highcharts like on the picture above.
So, I need to know:
How can range selector buttons be positioned like in the picture? or is it possible?
1.1 If range buttons are impossible to position like that, can I use simple html buttons? and in that case how can I interact with Highcharts data.
What is the name of the chart with a bar within a black circle and red to green gradient (gauge?).
Taken from this question:
setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.
For Chrome, use -webkit-appearance: slider-vertical.
For IE, use writing-mode: bt-lr.
For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.
You're welcome to view the code at the original question.
About the gradient thing, it can be easily accomplished by setting the background with css to a linear gradient. The full code:
input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 20px;
height: 175px;
padding: 0 5px;
}
.gradientbg{
background: -webkit-linear-gradient(green, white, red);
background: -o-linear-gradient(green, white, red);
background: -moz-linear-gradient(green, white, red);
background: linear-gradient(green, white, red);
}
<input class="gradientbg" type="range" orient="vertical">
No API for that.
1.1. HTML buttons could call setExtremes() on a chart's xAxis.
It's not a series type. It's colorAxis. However, you have provide just a static image, so it might be something else.
i've to make few divs look like as atttached image i can achieve this using background image for div like this
background:url(image.png) no-repeat left top;
but i just want to know if there is any other way to do it without using background image , please help me it its possible
i have gone through some codes for css triangle but they dont look like this so please help me to do this without images if possible
I tried reproduce your image. Do you want someting like this ?
You'll have to adjust the borders width and element proportions
Codepen
#mydiv {
height: 17px;
width: 100px;
border-top: 51px solid transparent;
border-left: 1130px solid wheat;
}
If you can be more specific about what you need or to reproduce I'll be able to provide you some solutions.
You can try a combination of border-bottom, border-left, height. Basically, a triangle with extra height. Or, you can place a triangle on top of a rectangle.
See https://css-tricks.com/examples/ShapesOfCSS/ for examples.
This question already has an answer here:
CSS responsive slanted edge
(1 answer)
Closed 7 years ago.
I'd like to know how to create a div 100% width and say 300px wide where the bottom border is slightly angled across the full width of the box.
It can be done in either CSS or javascript but it needs to be responsive. I've seen examples of using borders but if I'm honest I don't fully understand using borders for super whizzy shapes.
What you're looking for is something like this :
<div class="box"></div>
We want to specify that we want to use the border as the main drawing feature.
We want the bottom left border to be transparent.
Then if we apply a reasonable height to it, we see it gets close to your image..
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
}
This then is a drawing of purely borders, stretched and sized so much they look solid.
JSFiddle
Making it responsive is a little more tricky as borders are not supported with percentage values.
You will always have a maximux border size set in a fixed value.
In our case we will use 300 px as previously, so our .box class becomes like so :
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
width:100%;
right:0px;
float:right;
}
We are going to pull right, so that the solid looking image will actually float left.
We will then add a wrapper which will have an overflow of hidden, so even though the border-image will not change size, the overflow will make it seem as it is.
.box_wrapper{
width:100px;
overflow:hidden;
left:0px;
}
Our HTML gains a wrapper :
<div class="box_wrapper">
<div class="box"></div>
</div>
And the result is something of a responsive workaround!
JSFiddle 2
If you update the .box_wrapper size in the fiddle, the bordered box will look like it's adjusting its width.
Note: There may be a much better way to achieve this!
I am trying to create an irregular border around a div, the div will contain text. I am currently using two different images and making them background on the top and bottom of the div. This method works out pretty well but the problem is the div can grow, i.e. it can have variable width and height depending on its content. So, in this case using images as background to achieve this effect is no longer viable.
Is there any way to create an irregular border using CSS and javascript? Obviously, the border should accommodate variable width and height.
I am trying to achieve something like this, but on all sides.
I'd try background-size:contain using that image and then add some padding too keep the text away. It'll scale but it might look pixelated if the box gets too large. Otherwise, you'd need to make the edges repeatable which is probably near impossible given the image you've supplied.
PS. Reminds me of the days we all wanted rounded corners and now we flat design barely uses the border-radius property.
Use a background image for the div itself and CSS border-image for the borders. Here's an example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
You can also use 2-3 divs to achieve what you are trying to do. Create an image which has the top decoration you want and set that as the background image. Then get another image with your side design, which is repeatable, but not so small that the pattern becomes apparent, and use that as the image with repeat-y enabled. Something like this
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
or
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
.image-bottom {
background: img(url3) no-repeat;
min-height: 25px;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
<div class="image-bottom">
</div>
I have a DIV element on a JSP page whose behavior is defined in the following CSS class:
.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}
span.toolbarRight .export {
background-image: url('/images/excel.gif');
}
So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.
Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):
Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):
Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):
If I have three grids (two horizontal and one vertical) the problem does not occur:
Anybody know what the reason for this is?
Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.
The other answers might be right, but you might also have a float issue here.
You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.
Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.
It is your
position:relative;
top:6px;
combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image