I want to be able to have a background color behind my h2 tag, but I also want the text to indent. I have tried using css, but it won't work unless it is inline in the table.
When I do that, then I can't get the text to indent.
What is the correct way to write the inline h2 css?
Above is what I was thinking, but I'm not sure the best way to do it.
Outlook does not support stylesheets, so all styles must be made inline.
<h2 style="padding:5px;background-color:#33CC99">test</h2>
Related
I am trying to modify the CSS in a Wordpress plugin I need to use. The stylesheet (learnpress.css) is over 2000 lines long, so understanding it is a challenge; but what I'm trying to do is pretty simple -- change the background color of a certain class.
The code is at https://tgtau.rickcasey.net/courses/the-great-turning-you/, but when I change the background color of the section-content class in Chrome's developer tools, nothing happens:
Can anyone point out how I can find out what other css styles are overriding this? Other posts only hint at CSS being difficult to diagnose how inheritance and precedence work, so I'm hoping there are some techniques in chrome-dev-tools on how to do that. Thanks!
The background is set in the li elements themselves, so no matter what you set your ul background to, it won't be visible as the contained li elements are not transparent (solid white).
When debugging these cases, remember that every element can have its own background color, and containers can auto-size to their contents. You can also override the css on the li elements to make them transparent so that your ul background is visible.
This is a long shot... I'd like to have an svg shape appear before every h3 element, but which changes color with the class of the div it appears in. I understand that I can't do it by referencing a separate svg file through the "content" property.
Is there a way I can do it by referencing an inline svg - through the content property or otherwise?! As the actual text on the site will be written by users who can't use html, I can't simply hard-code it before every h3 element...
Thanks!
Unfortunately it's not possible. You need access to the svg's stroke or fill property to change the colour. Images added to the pseudo-element's content property (e.g. content: url(my.svg) is generated content and as such should just be seen as a flat image. Only the 'box' that is the pseudo-element is able to be modified through css.
Ideally, you would inject the svg inline into the DOM. However, you would still need to edit both the color property for the h3 text and either the stroke or fill property for the svg as well. As mentioned by Paulie_D in his comment, an icon font would get around this and inherit the color from the h3 tag. You can even create a custom icon font with your svg(s) with something like this.
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
It's important that the image is inline so I can easily create new text links with varying lengths of text.
I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.
You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
The key is using pseudo classes on the link element. Eg:
a:hover
a:active
a:visited
You can also use inline-block so that the a isn't completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn't work that great in IE7, if you still need to support that.
Here's some additional tips on using CSS Sprites
Is there a CSS hack/technique to take an <img> element (with no other markup) and hide the pixel content of the image while still displaying it as an element with background color and stroke?
For example, take an <img src="foo.jpg"> on the page and make it a 32x32 badge of solid color.
Though I am interested in browser-specific hacks (does Webkit have a solid-fill effect?) or CSS3 awesomesauce (is there an image-content-opacity:0.0?), I need a solution that works on IE8+, FF4+ and thereabouts.
If you are interested in the motivation for this question, see the edit history of this page. It has been removed because it was distracting users into helpfully trying to find workarounds to solve that problem instead of answer this question.
Hide the image and use the background filled with a solid color.
Example here http://jsfiddle.net/notme/ZUvHN/6/
This is a take off of my comments above and notme's solution:
http://jsfiddle.net/ZUvHN/7/
What I did was I removed display:table-cell from the a and then set it to display: block
I then set the img to display: none
This lets you then apply the border and background styles to the a tag instead of the img tag. You'll likely have to tweak the margins and spacing a bit.
I don't know if you have the option or not, but it might be easier to tweak the HTML a bit via JavaScript.