Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}
Am trying to style a textarea with css but its not rendering correctly, a part of the border doesnt show.
Heres a screenshot
This is the css code for the textarea
#pheedform textarea {
-moz-border-top-left-radius:4px;
-moz-border-top-right-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
border:1px solid rgba(153,153,153,1);
border-bottom:thin;
width:100%;
padding:4px;
}
And this the css code for the box beneath the textarea
.pheed-options {
background:#EEEEEE;
border-top:none;
padding:5px;
position:relative;
top:-7px;
width:100%;
border:1px solid #666666;
border-right:1px solid #666666;
}
.pheedOptionItem {
padding:5px;
border-right:solid 1px #999999;
}
And this the html
<div class="textarea_fix">
<textarea name="pheed" cols="50" id="pheed">
</textarea>
<div class="pheed-options">
<span class="pheedOptionItem">
Add Photo
</span>
<span class="pheedOptionItem"class="pheedOptionItem">
Post to Twitter
</span>
<span class="pheedOptionItem">
Post to Facebook
</span>
<span>
Pheed
</span>
</div>
</div>
Setting width:100% is the cause, because the following scenario occurs: 100% + 1px border-left and 1px border-right.
Either remove the width attribute altogether (just relying on display: block) or give it a fixed, static value.
You should set both elements padding the same, either change #pheedform textareas padding to 5px or .pheed-options to 4px.
From the looks of your screenshot and the jsfiddle, it looks like the .feed-options element is a pixel or two wider than the textarea, and is likely being cutoff by having a width wider than its parent, and a parent element having overflow: hidden.
I adjusted the padding on .feed-options from padding: 5px to padding: 4px and it lined it up in the jsfiddle: http://jsfiddle.net/blineberry/d56fY/5/
This may prevent it from overflowing the parent element. If not, either adjust the widths to be less than 100% or continue to adjust the padding/margin/borders until its no longer overflowing the overflow: hidden element.
How do you make a vertical line using HTML?
Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:
.verticalLine {
border-left: thick solid #ff0000;
}
<div class="verticalLine">
some other content
</div>
You can use the horizontal rule tag to create vertical lines.
<hr width="1" size="500" style="0 auto" />
By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
<div class="vertical-line"></div>
With exact height (overriding style in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}
<div class="vertical-line" style="height: 45px;"></div>
Style the border if you want 3D look:
div.vertical-line{
width: 0px; /* Use only border style */
height: 100%;
float: left;
border: 1px inset; /* This is default border style for <hr> tag */
}
<div class="vertical-line" style="height: 45px;"></div>
You can of course also experiment with advanced combinations:
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 2px;
}
<div class="vertical-line" style="height: 45px;"></div>
You can also make a vertical line using HTML horizontal line <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}
<hr class="vertical" />
There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
#your_col {
border-left: 1px solid black;
}
<div id="your_col">
Your content here
</div>
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.
3. instantiate
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Unfortunately you can't create custom self-closing tags.
usage
<h1>THIS<v-r></v-r>WORKS</h1>
example: http://html5.qry.me/vertical-rule
Don't want to mess with javascript?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.
Not the most elegant solution though.
You can draw a vertical line by simply using height / width with any html element.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}
<div id="verticle-line"></div>
There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:
.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}
<hr class="divider">
The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.
There isn't any tag to create a vertical line in HTML.
Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"
Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>
To create a vertical line centered inside a div I think you can use this code.
The 'container' may well be 100% width, I guess.
div.container {
width: 400px;
}
div.vertical-line {
border-left: 1px solid #808080;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
<div class="container">
<div class="vertical-line"> </div>
</div>
Rotate a <hr> 90 degrees:
<hr style="width:100px; transform:rotate(90deg);">
You can use hr (horizontal line) tag and than rotate it 90 degree with css below
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
One more approach is possible : Using SVG.
eg :
<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
Pros :
You can have line of any length and orientation.
You can specify the width, color easily
Cons :
SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
I used a combination of the "hr" code suggested, and here's what my code looks like:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)
Vertical line right to the div
<div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Vertical line left to the div
<div style="width:50%">
<div style="border-left:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Why not use |, which is the html special character for |
If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.
> is a child selector. It matches any child of the element(s) specified on the left.
* is a universal selector. It matches an element of any type.
:not(:first-child) means it's not the first child of its parent.
Browser support: > * :first-child and :not()
I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.
Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.
To add a vertical line you need to style an hr.
Now when you make a vertical line it will appear in the middle of the page:
<hr style="width:0.5px;height:500px;"/>
Now to put it where you want you can use this code:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
This will position it to the left, you can inverse it to position it to the right.
In the Previous element after which you want to apply the vertical row , You can set CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Simply use either of the UTF-8 Miscellaneous Symbols
|
|
That's all you need and its compatible with all browsers.
Thanks me later.
For an inline style I used this code:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
and that positioned it directly in the center.
I needed an inline vertical line, so I tricked a button into becoming a line.
<button type="button" class="v_line">l</button>
.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}
I think it is a simple way not do to anything more You can change border left or right according to your need
.vertical-line{
border-left:1px solid #000
}
<span class="vertical-line"></span
You can also use the HTML symbol | which renders as '|'
To make the vertical line to center in the middle use:
position: absolute;
left: 50%;