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.
Related
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>
I need to style h1, h2, h3... and p tags inside a div but I only have access to the content area.
If it where possible, this would be what I'd use:
<div style="h1{padding:0;}p{font-size:1.4em;color:#000}">
Is there a solution to do this ? Apart from adding the style to every element.
Thanks
Although HTML syntax restricts style elements to the head part, this requirement is not enforced in practice. It works inside body, too. You just need to take into account that the effects are global to the document. Thus, to limit the effect to elements inside a certain element, you need to use suitable selectors. Example (I have added a color setting because the effect of just padding: 0 as in the question in not noticeable: it equals the default):
<h1>Heading outside the div</h1>
<p>A paragraph outside the div.</p>
<div class=mydiv>
<style>
.mydiv h1 { padding: 0; color: green; }
.mydiv p { font-size: 1.4em; color: #000; }
</style>
<h1>Heading inside the div</h1>
<p>A paragraph inside the div.</p>
</div>
There isn't a good solution.
Style elements may only appear in the head.
Inline style only applies to the element the attribute appears on.
The closest you can come is to use JavaScript to dynamically modify the stylesheet.
You would be better fixing whatever problem is preventing you from modifying the head section.
To avoid unwanted changes inside divs i will be using to divs with 2 unique id's:red and green
If you want different style for specific divs:
<div id="red"><h1>red</h1><p>red</p>
<div id="green"><h1>green</h1><p>green</p>
body #red > h1,body #red >p{
color:red;
}
body #green > h1,body #green > p{
color:green;
}
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
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
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.