Horizontal line
how to create the horizontal line with dash length as shown in image using CSS.
This is what i've tried
CSS
hr{
border-bottom: 1px dotted grey;
}
but i am unable get the same stroke length as shown in the image.
Try the below code: Use border css property.
hr{
border: 1px dashed #ccc;
}
<p> hello </p>
<hr/>
try border-bottom : 1px dashed;
This is such an easy "google search". Do some work before you come and ask questions.
Related
I'm trying to get header effect like this:
I want the dotted border along the bottom of the element, with the background the same color as the dots.
I've tried looking up how to set up a border offset but haven't found anything that works for the look I'm trying to achieve. I've tried using an outline as well, only to find that the outline property can't be specific to a single edge.
Put a div underneath the box with a border-style of dashed:
<div class="box"></div>
<div class="box-border"></div>
.box-border{
border-bottom:dashed 3px red;
}
https://jsfiddle.net/oo31w9x4/
You can use box-shadow as background.
div {
color: white;
box-shadow: inset 1000px 0px red;
border-bottom: 1px dashed red;
}
<div>the header</div>
I'm trying to making the border of the an image to be red when on hover, but it's not working for some reason. What am I doing wrong?
img: hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
Remove the space after the colon. It works in Chrome and IE11, at least.
img { border: 1px solid white; }
img:hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
EDIT: As mentioned in another answer, you may want to add a white border around the image so it won't shift when you hover over it. I have incorporated that in the code snippet above.
Cant comment, but we are talking CSS here, not HTML.
Add in a border for default to fix jumpy image. U could do
img { border: 1px solid rgba(0,0,0,0); }
I was wondering how to get these type of lines on a table
When I try to give the the <table> a "border right" property, it gives broken space between each cell.
border-right: 2px solid gray ;
HTML
<tr class="bordered">
CSS
.bordered
{
border-right: 2px solid gray ;
}
replace gray with any color you want like #cccccc
Do you want something similar like this example
.td
{
border-right: #ccc 1px solid;
}
I think what you are looking for is a vertical rule. Html has a horizontal rule
<hr>
However, it does not have a vertical rule. You can accomplish this with a bit of css though. For example
<div style="border-left:1px solid #000;height:500px"></div>
In below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/