Currently, I'm doing something like this:
<h2><div class='q'>Q:</div> Does alfredo sauce contain soy?</h2>
and then styling it in my CSS file, like so:
.q {
padding-bottom: 15px;
display: inline;
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
While this displays fine in my browser, when running the page through http://validator.w3.org, it complains: "Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)"
How would I style this piece of text in valid HTML/CSS?
You can use a span
<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>
also remove display: inline from the class
.q {
padding-bottom: 15px;
/*display: inline;*/
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
Use a span instead of a div inside the h2.
Use the <span> tag instead of <div>. <span> is an inline element, while <div> is a block element.
A div creates a new block element. These are forbidden in h2 and many other elements. You can create an inline element with span.
<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>
Of course, you need to change the stylesheet accordingly.
You can do this:
<h2 id="q"><span>Q</span>Does alfredo sauce contain soy?</h2>
h2#q span {
padding-bottom: 15px;
display: inline;
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
div and h2 are both block elements. Use span instead of div.
For example:
<h2><span class="q">Q:</span> Blammy blammo soy?</h2>
additional note: [Non-normative description] Some elements don't like to contain block elements. The header (h1, h2, ...) elements don't like to contain block elements. "Don't like": the spec says "should not" I believe.
Related
```
<p class='title'><em>WELCOME TO F-DRIVE</em></p>
<p class='b'>Free 5GB storage space!</p>```
```
this is my line of code. I want both of these sentence to appear in the same line.
my css rules are:
```
p.b{
font-size:32px;
font-family: bangers, fantasy;
margin-left: 20px;
}
p.b2{
font-size:32px;
font-family: bangers, fantasy;
margin-right: 20px;
text-align:right;
```
the second one appears a line below the 1st, how do i fix it?
You can use a span instead of a p tag. p is a block element while span is an inline element.
You can find out more about the difference here: https://www.sitepoint.com/community/t/p-vs-span/5298
The answer is display: inline-block, but if you want this kind of behaviour u should use span as span is inline element by default. It does not need any additional style
p {
display: inline-block;
}
<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>
I would suggest using <span> for that matter.
I've got this html element :
<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>
Here's CSS classes :
.item-menu-notif{
display: block;
cursor: pointer;
padding: 0 0.4em 0 0.4em;
}
span.item-menu-notif:hover{
background: #aaaaaa;
}
span.item-menu-notif .non-lue{
font-weight: bold;
}
My problem is that the non-lue class is not use. In firebug I can see that the class doesn't appear on my span element.
I can't understand why. I tried with and without span selector on my CSS. It's the same result.
Remove the space between the selectors:
span.item-menu-notif.non-lue
You only use space if you want to target elements who are descendants. But since you want to target the element with both classes, you have to remove that space between them.
It's because of the
span.item-menu-notif .non-lue{
font-weight: bold;
}
With this you tell to the browser, "find for me an element with the class
'.non-lue' that is into a span element with the class name 'item-menu-notif'".
For specifying a more explicit rule for an element, like in your case, where you want a span element that is an 'item-menu-notif' and a 'non-lue' you should provide the class names without whitespace between them (with a whitespace character between selectors it is assumed that the right most is a descentant of the left side selector).
Please check out these links, hope they will help you:
The first one is about selectors and the second & third are about specificity rules.
1) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
2) https://css-tricks.com/specifics-on-css-specificity/
3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
And of course the right answer is:
span.item-menu-notif.non-lue{
font-weight: bold;
}
This selector says that an element with a class of .non-lue inside your span will be styled, instead of the span element.
span.item-menu-notif .non-lue{ font-weight: bold; }
Remove the space and it will go from saying .non-lue inside the span to span with .item-menu-notif AND .non-lue.
span.item-menu-notif.non-lue{ font-weight: bold; }
You should do this
span.item-menu-notif.non-lue{
font-weight: bold;
}
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>
I am not that good with html and css so i am using a template, but whatever i do know i try to use it.
Here is an image of the problem http://i53.tinypic.com/dmw6yt.jpg
As you can see the user test is actually on a new line. That is not how it's supposed to be. It is supposed to be on the same line as this text "Accounts stats for user X".
The html and css i use are
<div class="user">Account stats for user<div class="info">test</div></div>
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
}
use inline element <span> instead of block element <div>
Inline elements are for elements like text that you want to display on the same line and then fall down below previous inline elements when there is not enough space left. Block elements are intended to be used for the structure of a site.
This is because a DIV automatically assigns a new line because it is a 'block-level' element. In a situation like this I'd swap out all of the <div> for <span> as these are an inline-element.
You could also use the CSS attribute display:inline on the <div> to override this behaviour.
You put the word "test" in new div. This means that this word will be on new row. Try using span with class or id instead of div. If you really want to use div for the word "test" you could assign float property or inline display
<div class="user">Account stats for user<span class="info">test</span></div>
.info
{
margin-left: 10px;
font-size: 18px;
}
If you automatically want it to be on the same line, i would suggest using <span> instead.
<span class="user">Account stats for user</span><span class="info">test</span>
And if you absolutely need to use divs then:
<div class="user">Account stats for user</div><div class="info">test</div>
With the CSS:
div.user
{
font-size: 13px;
text-align: center;
}
div.info
{
font-size: 18px;
float:left;
}
Either use a <span class="info"> instead of a <div>, or use these CSS:
div.info
{
font-size: 18px;
display: inline-block;
}
Normally you should prefer using a span, but there are several cases (e.g. if you want to specify a width for the element) that require a div. In your case as it stands, go with a span.
Try this:
div.user
{
font-size: 13px;
text-align: center;
display: inline;
}
div.info
{
font-size: 18px;
}
I think this will do the trick.
you could add 'display:inline;' to them and it should work.
Or you could float them both to the left, also would probably work.
'float:left;'
put this inside div.info
display: inline;
So your div.info class should look like this
div.info
{
font-size: 18px;
display: inline;
}
I have an tag that seems to be ignored by the browser because it is already also an tag that has styling defined like this:
.content .chapter_text {
margin-bottom: 0em;
padding: 0.5em;
line-height: 1.4em;
}
.content .chapter_text li{
list-style-image: url("http://www.comehike.com/img/ui/circle.png");
margin-left:20px;
}
.content .chapter_text li a{
color: #7e9940;
text-decoration: none;
}
.content .chapter_text a:hover{
color: #3f6b30;
}
The page I am working on is here: http://www.comehike.com - see the middle section in center and right columns.
The links of titles are inside but it doesn't render. How should I edit the styling to make it render?
Thanks,
Alex
<h3> isn't valid within <a>, or even within <p> -- <h3> is a block-level tag and <a> is inline. As such, you're going to get inconsistent behavior in different browsers. For instance, Chrome internally rewrites this HTML to:
<p>
</p>
<p>
<a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
</a>
</p>
<h3>
<a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
Milpitas Social Group
</a>
</h3>
<p>
Where: 95035 [...]
</p>
You're going to need to restructure your HTML so that this nesting doesn't happen, or use an inline element in the place of <h3>.
Looks like you are going to have to do something like this:
.content .chapter_text li a h3 {
color: #7e9940;
text-decoration: none;
}
(Notice the h3 before the { )
Does this work?
Block level and inline elements render differently. Normally block level elements begin on new line wheres inline element is not. so, if you put block level elements such as div,p,h1..h6 it will be invalid html markup.
Please check w3 specification. You may also have a look in this question