I have an span that contains a p-tag and text. Now I want to add an underline effect on hover. But I only want to underline the Text, in this case 'Tree', but not the 'Test'. Unfortunately I can not add anything to the 'tree'. I can not remove the underlining in the p-tag with text-decoration: none.
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
Any ideas?
It's not possible.
Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
I'd suggest put a span around "Tree" and add the effect to that.
If that's not possible, you could add the effect to the span and remove it from the p-tag. But i'd rather have no effect than doing that ;)
Edit: I was more enthusiastic, ignore the second idea.
For this very specific case, and if it is truly not possible to add a span around the text node or to alter the styling of the p element, then you can get the effect with a bottom border - but it's only for specific cases:
<style>
#underline {
border-style: none none solid none;
}
</style>
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
Related
I have an <a> element nested within a <span> element. The <a> element occurs after some lines of text followed by two line breaks (<br>). So while the initial text within this <span> element needs to be text-align: left, I'd like to know if there is a way to change the formatting for the subsequent <a> element to be text-align: center.
I am using CSS to modify the formats and have succeeded in changing the color and text-decoration of the <a> element (independent of the former text), so I know that my code is pointing to the correct element, but when I try to alter the alignment it will not work for me...
Please hit me with potential solutions.... Thank you.
Use display: block; it will allow the a element to text-align
a {
display: block;
text-align: center;
}
jsFiddle Demo
First of all I want to achieve a black background:
Instead of a black background I get bold letters.
HTML CODE
<span id="border"><h3>Title</h3>
<p>Lorem Ipsum</p>
</span>
CSS CODE
#border {
background-color: #000000;
}
Jsfiddle
http://jsfiddle.net/tYaCK/
This bold is actually coming from your h3 tag as a default style rather than your border css.
As for why your border isn't appearing... well that is because the span is an inline element and will not expand to contain the block level h3 tag.
You can see this working by adding display: inline-block; as a style to the h3 tag.
FYI You should not have a h3 within a span as that is not valid html. I would recommend a div tag as an alternative to the span.
Two issues:
The bold is the default styling of the <h3> tag.
Your black background isn't showing up because it's on a <span> element.
The span defaults to display:inline, which means it us not valid for it to contain block elements. The h3 is a block element.
To fix this, either use a div instead of a span, or set the span to display:block.
You could have seen the background color if the situation had been slightly different.
Consider the following HTML:
<span id="border">
Some opening text...
<h3>Title</h3>
<p>Lorem Ipsum</p>
and some closing text.
</span>
I just added some text to the span element.
And for the CSS, just add a color so you can see the text:
#border {
color: green;
background-color: #000000;
}
Demo at: http://jsfiddle.net/audetwebdesign/M8Exf/
What is happening here is that the CSS engine opens an inline block (span) and applies the format from #border.
However, upon finding the block level h3, the CSS engine closes off the span element (internally) and begins a new block level box, and similarly for the p element.
Upon finding the remaining text from the span, the CSS engine starts a new anonymous inline box and applies the same styling from #border.
This procedure is part of the CSS box and visual formatting model.
I have a few classes that adjust font sizing:
.text-tall {
font-size: 1.5em;
}
.text-small {
font-size: .8em;
}
When I apply the class to a paragraph element
<p class="text-tall">Some text goes here.</p>
the styling work as expected. When I apply it to a span element
<p><span class="text-tall">Some text goes here.</span></p>
the adjusted font-size is applied to all text below the element on the page, sometimes resulting in progressively larger and larger text.
The obvious solution would be to simply always apply the class to the paragraph element, but my paragraph bottom margin is relatively sized (margin-bottom: 1.5em), so doing that increases the margin, too, which is something I don't want to do.
This only seems to be a problem in IE8 and lower. Any suggestions would be appreciated!
Thanks for the tips, everyone. Turns out a function in my functions.php file (in WordPress) was removing the ending </span> tags.
Try specifying the text-tall div with the span in the CSS. For example, you could do this:
.text-tall span {
font-size: 1.5em;
}
You may also be able to do the same thing with the text-small.
Trying to understand what is going on, maybe someone can explain.
Upon :HOVER I want the entire table content to go transparent. This works for text inside td wrappers. However, text inside a span wrapper doesn't know it should go transparent.
If I remove color:#897 from the span CSS suddenly it does what I want and all text goes transparent. I did try all sorts of CSS tricks to no avail, the table refuses to recognize span as a descendant of table. What is wrong and how to fix it, if possible.
The reason is that you define color in SPAN as table#Factors span & you define your hover table#Factors:hover So color of SPAN still override you table#Factors:hover class color. Write like this:
table#Factors:hover span{
color:transparent;
}
Check this http://jsfiddle.net/AyNg3/
Read this for more http://diythemes.com/thesis/css-specificity-thesis/
jsFiddle
table:hover,
table:hover span{
color: transparent;
background: transparent;
}
You just needed to include a selector for the span as well.
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>