I have the following:
<div class="backgroundImage">
<div>"Hello world!"</div>
</div>
On Android browsers, "Hello world!" will not be read by Talkback/screen readers when selected. However, if I remove the "backgroundImage" class and select it, it will be read. Is there a way I can continue using the background image but with the text of its child nodes readable? Thanks.
Edit:
.backgroundImage {
height: 400px;
width: 400px;
background-image:url('backgroundImage.png');
overflow: hidden;
display: block;
position: relative;
}
I discovered what was wrong. Looking back, another individual added an opacity=0 style to the elements that I was unaware of; removing this solved the issue.
Related
Question 1: css doesn't style div id
In my html file I've created a div id for a top bar (with text + social links). In the related css file I've created the corresponding style
#topbar {
height: 40px;
width: 100%;
background-color: #383433;
margin: auto;
overflow: hidden;
}
#topbar p {
color: white;
}
<div id="topbar">
<p>Text text text</p>
</div>
The text becomes white, but the height, background color etc. isn't coming through. Am I overlooking something?
Question 2: can I style an image as part of a div id?
Html:
<div id="scroller">
<img src="images/scroller-1.jpg">
</div>
When I add:
#scroller {
max-width: 100%;
height: auto;
}
The image doesn't get responsive / resized.
If I add:
#scroller img {
max-width: 100%;
height: auto;
}
It works.
So elements part of a div-id don't inherit the parent-style?
First of all: If you have two questions, its better to post them seperated. It is cleaner this way.
To question 1: It is working actually. You can run your pasted code snippet. Likely, some other style is overwriting it. Since we cant know which one it is, the only advice i can give you is to write !important behind your css code like this:
height: 40px !important;
This way, nothing can overwrite it except styles that also have an !important tag.
To question 2:
So elements part of a div-id don't inherit the parent-style?
Well, it depends. You can set the font-color of a div then the headlines and p tags in this div will have the same color unless you specify it otherwise like
#scroller{
color:blue;
}
#scroller p{
color:red;
}
Images dont inherit from divs. They are by default always the full image size so you have to specifiy their size seperately if it should be the full width at all times.
If it was helpful to you, pls mark the answer as accepted :)
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are HTML Image Maps still used?
I have an image:
Which I want to bind a function to when clicked. The problem I have is the div underneath it when clicked needs to fire another function and because of the blank space underneath the top div it's messy.
I'm aware that html image mapping can solve this problem but I understand this is now deprecated. is there an alternative I can use?
I've re-read and I think I understand your issue more fully.
Check this jsFiddle: http://jsfiddle.net/5p9DE/
and this almost identical one so you can see the #phone div: http://jsfiddle.net/BPbk6/
and for completeness, the code:
CSS:
#container {
position: relative;
}
#phone {
position: absolute;
top: 34px;
left: 70px;
width: 250px;
height: 25px;
-webkit-transform:rotate(-11deg);
}
#phone a {
display: block;
width: 250px;
height: 25px;
}
#phone a span {
margin-left: -9999px;
}
HTML:
<div id="container">
<div id="phone"><span>Link text</span></div>
<img src="http://i.stack.imgur.com/8GvME.png">
</div>
And, as others have said, you still can use HTML image maps. This is a CSS alternative.
It is a bit hard to tell exactly what you are trying to achieve from that image and the description, but i will give it a try.
The way i usualy approach this, is by slicing the image. Make a separate image from the actual background and the area you want to be clickable. Then you add the clickable image as a background to a <a> tag linking to whatever you desire, and position it correctly (probaly absolute to the parent with the background) using some css. If you can show us some actual code on something like fiddle i can demonstrate what i mean...
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.