Hi have a Paragraph block with the following style applied:
form.filters p {
clear:both;
padding: 5px 0 5px 0;
}
INSIDE the Paragragn, I have a Div with the following style:
form.filters .inputHolder {
float:left;
}
When viewing the rendered page, the DIV seems to sit under the P, and when viewing the code in Chrome, the DIV acually is siting below the P..
Source Code:
<p>some stuff
<div>more stuff<div>
</p>
Viewed in Chrome:
<p>some stuff</p>
<div>more stuff<div>
Can anyone tell me what is happening and what I can do to resolve this?
Many Thanks
<div>s aren't allowed in <p>s. The HTML parser, when it sees the <div> tag, automatically closes the <p> element.
Use a <span> instead of a <div>.
According to the spec the <p> element cannot contain "block-level elements (including P itself)". My guess is Chrome is just trying to be helpful here.
Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
Related
I have a very small project (html + css), where all of the "pre" tags had a CSS style. It was looking like this:
pre { color: blue; }
But now, I want to add this into a very large project, and I don't want to ruin everything. I want to modify only those "pre" tags, which are related to this specific small thing. So my idea is, that I will put everything - which is related to this - in the inside of a wrapper "div" element, and only those "pre" tags should be affected with the CSS which are in the inside of this wrapper, no matter how deep.
An example:
<pre> not this </pre>
<div> not this </div>
<pre> also not this one </pre>
<div class="wrapper">
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<div>
<h1>
<span>
<pre> This should be also affected, but it is sadly not working. </pre>
</span>
</h1>
</div>
</div>
This is my CSS, but this is only working for the top-level "pre" tags:
.wrapper pre {
color: blue;
}
If I modify the CSS to this:
pre {
color: blue;
}
That will work for all of the "pre" elements, but the problem is, I want it only for those "pre" elements which are in the inside of the wrapper element.
How can I solve this? I was reading stackoverflow and other sites about CSS, and I am trying to solve this but I cannot figure this out. Thank you.
The code you provided already works. Do you have more CSS rules in your other project that are maybe preventing your inner pres to not become blue?
.wrapper pre {
color: blue;
}
<pre> not this </pre>
<div> not this </div>
<pre> also not this one </pre>
<div class="wrapper">
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<div>
<h1>
<span>
<pre>This should be also affected, but it is sadly not working.</pre>
</span>
</h1>
</div>
</div>
I have a paragraph that contains a <pre> element and some text, like the following:
<p class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</p>
And I have used the following code to change the background color of the paragraph, but it doesn’t affect the paragraph and I don’t know why.
<style>
.par1{
background-color:red;
color:green;
}
</style>
Here’s the whole code:
<!doctype html>
<html>
<head>
<title>Test id and class attribute</title>
<style>
.par1 {
background-color: red;
color: green;
}
</style>
</head>
<body>
<div class="div1">
Some text
<h1>An important heading</h1>
<p class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
This text is inside the paragraph and it must be red.
</p>
</div>
</body>
</html>
I know that if I use the class of the div .div1, it works fine, but I want to know why the first one doesn’t work.
.div1{
background-color:red;
color:green;
}
As per W3c specs say, you can't have a pre inside a p
4.4.1 The p element
Content model:
Phrasing content.
Where Phrasing Content is:
Phrasing content is the text of the document, as well as elements that
mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.
a
abbr
area (if it is a descendant of a map element)
audio
b
bdi
bdo
br
button
canvas
cite
code
data
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
keygen
label
map
mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
template
textarea
time
u
var
video
wbr
you can use instead a span and setting it as display:block which will make it a block level element
.par1 {
background-color: red;
color: green;
display: block
}
<div class="div1">
Some text
<h1>An important heading</h1>
<span class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</span>
</div>
as #dippas said, it's about the <pre>-tag inside a <p>-tag
<p>-tags can not contain block-level elements. as <pre> is a block-level element, browsers seem to close the <p>-tag, before the <pre>-tag opens (see your browser inspector). thus the styles on <p> could not be inherited by the <pre>-tag
for a good discussion with helpful hints, see:
<pre> tag making browsers close paragraphs
EDIT:
In the W3C specs, it is said that "A paragraph is typically a run of phrasing content (...)".
https://www.w3.org/TR/html5/dom.html#paragraphs
I have a widget on my website which generates content which looks like this:
<div class="wrapper">
some title
<p>some content</p>
</div>
I want to give the title text padding and the <p> padding
I already tried this:
.wrapper > * {padding:15px;}
But that doesnt apply to the plain text. Is there some sort of selector for plain text?
I also created a fiddle to visualize it.
http://jsfiddle.net/62v59s3j/
If I understood correctly, think you should apply padding to your wrapper, and remove left and right padding from the <p>
.wrapper > p {
padding:15px 0px;
}
.wrapper {
border:1px solid #ddd;
padding:15px;
}
jsFiddle
No.
With a couple of very limited exceptions (like :first-letter), CSS only allows you to select elements.
If you want a block to have a title, then it should probably be a heading (<h1> et al), and that would give you an element to select. For that matter the block may be better represented as a <section> rather than a <div>.
Let your web browser help you in developing.
Right click on the element and select inspect element from the context menu
In the source code, right on the element and from the context menu select copy selector, paste in your css
I'm wrapping text around an image using markup something like this:
CSS:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
HTML:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="..." alt="..." />
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.
I want my footer to appear below the image. If I add <p style="clear:both"> </p> to clear the float, then I have too much space above my footer.
How can I clear the float and force any subsequent markup below my image without adding any more whitespace?
Add overflow: hidden to the CSS for the paragraph that contains the floating image. That will make the paragraph grow to fully contain the floated image. For example:
<h2>Author Information</h2>
<p class="inner">
<img id="imgAuthor" src="http://placekitten.com/200/200">
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
p.inner {
overflow: hidden;
}
And a live version: http://jsfiddle.net/ambiguous/S2yZG/
Alternatively, you could stick a <div style="clear: both;"></div> right at the bottom of the paragraph but you should only use this in cases where you need the overflow to be something other than hidden. For example:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="http://placekitten.com/250/200">
<b>Bob Smith</b>
<div class="cBoth"></div>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
.cBoth {
clear: both;
height: 1px;
}
And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/
Why does overflow:hidden work? From the CSS3 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same flow as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats [...]
Your <p style="overflow: hidden;"> satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.
You were on the right path to try <p style="clear:both"> </p> but all you need to do is change the height and margins.
<div style="clear:both; height:1px; margin:0;"></div>
alternatively you can just add clear: both to the footer style and forget this markup.
I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.