How can I show only the border of a div, but not the text using CSS?
This is not well supported by IE, but you could use:
#mydiv { color:rgba(0,0,0,0); border:1px solid #000 }
This makes the text color fully transparent, but leaves the border visible.
A simple cross-browser solution is the Phark "text indent" method. It's usually used for image replacement.
div.example {
border: 2px solid red;
/* Hide text inside "off left" */
text-indent: -10000px;
/* Make sure to set a width and height */
height: 100px;
width: 100px;
}
Pros:
Doesn't need any extra elements
Works in screen-readers
Cons:
Doesn't work in IE5
You can make the text the same color as the div's background. Or nest the text inside another div.
Related
I have an responsive container (Wordpress with visual composer) with a background color and border. If I want the background a little outside the container. (like a offset print error) How to achive this. I have dabbled with background-position. But can't get it to work in WP and dosn't seem to work with negative?
Background and border offset
You could replace border with outline, and use a negative outline-offset value.
*Note that this is not supported by Internet Explorer
div {
background: black;
outline: 5px solid yellow;
outline-offset: -10px;
width: 300px;
height: 300px;
}
<div></div>
I have a box with padding and border. The image is sometimes too large to fit. I'd like to display the box without distorting the image (crop is fine) and keep the padding and border (matte). Here is an example:
http://jsfiddle.net/n236vh2u/
Notice the bottom padding is overwritten by the image? I tried setting z-index: 2; on the outer <a> box, setting box-sizing: padding-box;, setting two borders border: 5px solid white, 1px solid #ccc;, but none of those worked.
Split up your styles over both the div and the a:
JSFIDDLE
CSS:
#gallerysingle {
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
}
#gallerysingle a {
display: inline-block;
max-height: 100px;
overflow: hidden;
}
#gallerysingle img {text-align:justify;}
You can use the clip property on the image.
#gallerysingle img {
text-align:justify;
position: absolute;
clip: rect(0px, 100px, 100px, 0px);
}
Note, that it has to be positioned absolute for doing so. Therefore you will have to set the height of the a tag fixed to 100px.
#gallerysingle a {
overflow:hidden;
display: inline-block;
max-height: 100px;
border:1px solid #ccc;
margin: 0 11.2px 11px 0px;
padding:5px;
width:100px;
height: 100px;
}
See it in action – jsfiddle
Update
To answer the question of browser support for this property, i did some more research:
Being a CSS 2.1 property, clip browser support appears to be fairly good. This MDN page says it is working in all major browsers since way back.
I've also done some testing on mobile showing it works with android 4.1 stock browser and mobile firefox as well as ipad 1 safari.
Also note, that this property is deprecated. MDN suggest to use clip-path instead. But apparently browser support for clip-path is not sufficient yet. So i would stick to clip for now until clip-path is widely supported. The syntax for clip-path appears to be the same, just exchange the property name.
I was wondering if there is any way to style textArea, placed into a div with css columns properties.
My textArea styled with a border and has resizable height property. So I want users to type into text area and when its divided into two columns, first column doesn't lose its bottom border and second doesn't lose its top border.
.wrapper {
height: 400px;
width: 700px;
padding: 10px;
border: 1px solid;
overflow: hidden;
-moz-columns: 2 200px;
-webkit-columns: 2 200px;
}
textarea {
height: 700px;
width: 300px;
padding: 5px;
border: 3px solid green;
outline:none;
}
<div class="wrapper">
<textarea></textarea>
</div>
For some reasons I try to avoid solutions based on the 'contenteditable' parameter.
At the same time it seems that css-columns doesn't affect the textArea in Firefox.
Here is my plunker, so u can run it both in Firefox and Chrome to compare.
Because your textarea is a single element, I don't think you're going to be able to place arbitrary borders where it splits between the columns. You could consider a pair of floating div elements that each contain a narrow green rule to fake the top and bottom borders, but that would be defeated if you continue to allow your users to resize the textarea element.
Also, based on what I can see, while Chrome happily splits your textarea between the columns, Firefox is not so generous. Both, however, split a regular paragraph of text with no issues: http://jsfiddle.net/brightmatrix/r2hFj/.
May I ask why you want to split a textarea this way?
I can't seem to get the background of a <legend> element to be transparent. See this jsFiddle: http://jsfiddle.net/hWZa6/ (tested in Chrome and Firefox)
The effect I am trying to accomplish is actually moving the <legend> element below the top border of the containing <frameset> element, but nothing I do makes the top border complete. It is always missing the bit of the line where the legend would be, whether I try to use transparency or position:
http://cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg
How can I make the area of border where the legend WOULD be, complete?
You can add position:absolute to the legend. Optionally add position:relative to the fieldset so you can move things around.
You can position it off the screen,
position:absolute; left:-999em;
Or your favorite offsetting technique that's compatible with screenreaders and such. ( Perhaps investigate boilerplate's image replacement styles )
Try this, just hide the fieldset border and wrap the element in a div with a border. http://jsfiddle.net/hWZa6/15/
<div id="wrapper">
<fieldset>
<legend>Test</legend>
The top border is never fully visible, despite the legend being set <code>visibility: hidden</code>.
<div id="A">
<div id="B">Upon applying <code>visibility: hidden</code> this div becomes transparent, and the red div behind it is fully visible.</div>
</div>
</fieldset>
</div>
fieldset { border: none; }
#wrapper { border: 1px solid black; }
legend { display: block }
#A { background-color: red; width: 300px; height: 150px; padding: 10px;}
#B { background-color: blue; width: 400px; height: 100px;}
Use this CSS for the legend element.
legend { margin-left: -9999px; }
If you don't want to, or can't change the HTML, and you don't need the legend text to be visible, you can turn the display off.
legend { display: none; }
If you do have control over the HTML, then #user1289347's solution would work, though it requires adding wrapper elements.
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.