I am new to CSS and learned a case from W3Schools(http://www.w3schools.com/css/tryit.asp?filename=trycss_float5). In this case, the <ul> element is floating, the <p> element next should surround it as I thought, but it starts from a new line instead. Why <p> doesn't surround floating <ul>? And, when I remove li{display:inline;} , it seemed no different shown in FireFox and Chrome. Can you explain this for me? Thanks.
Why shouldn't it? A <p> by definition starts a new paragraph, which implies a new line. You're asking "why is the door shut after I close it?"
Trying giving your p tag...
display:block; //maybe unnecessary
overflow:auto; //very important for containing floats
It's called nesting. Whatever is inside the <p> tag will be...well...inside it. if you write it like:
<p>
<ul>
//content
</ul>
</p>
Then your <ul> will be in the paragraph tag. and like marc said, paragraphs always start a new line by definition.
Related
I'm doing some of these basic lessons for HTML on Codeacademy, and I've hit my first round-block. Why doesn't this construct work properly?
<h1>
First text.
<h4>
I'm a different size than the first text.
</h4>
I'm not the same size as the first text. Why?
</h1>
I don't really know what headings are. Code Academy hasn't really explained much.
Thanks to anyone who takes the time to look at my n00b question.
I can't find a good reference for this, but it looks like nesting these tags is simply not allowed.
Browsers are pretty lenient about what they'll attempt to display. In this case, I believe the browser closes the h1 tag for you when it encounters the h4 tag. Then it quietly ignores the spurious </h1> it finds later—remember that it already closed it for you.
So the actual elements I see in Chrome are roughly this:
<h1>First text.</h1>
<h4>I'm a different size than the first text.</h4>
I'm not the same size as the first text. Why?
You can see this yourself in Chrome's developer tools (or the equivalent in your browser of choice).
UPDATE
The HTML 5 spec is a good place to learn about this. If I'm understanding it correctly, h1, h2, etc. are "flow content" and expect "phrasing content" to be nested inside (not other flow content). I'm new to reading this spec, so I may be misunderstanding the structure of the document. Someone please correct me if I'm wrong!
If you want to achieve this used span tag instated of nesting head tag.
Like this :
<h1>
First text.
<span>
I'm a different size than the first text.
</span>
I'm not the same size as the first text. Why?
</h1>
CSS:
h1 span{
font-size:20px;
display:block;
}
Heading tags are block level elements like <p> tags. You can think of them taking up a whole line. Thus with your example you're trying to squeeze a whole line inside of a full line. It just won't fit. Your browser probably assumes you meant to have a </h1> right before the <h4> tag in your example. Thus the remaining text after the </h4> tag is just seen as plain text and the closing </h1> tag is simply ignored.
If you want switch between h1 text and h4 text. you need something like this:
<h1>first text.</h1>
<h4>I'm a different size than the first text.</h4>
<h1>I'm now the same size as the first text</h1>
If for some inexplicable reason, you want the h1,h4,h1 tags in the same line. You'll need to use css. You could add a class, then set them as inline block. However, if you just want to change the styling of text in a line, you should use span tags instead.
I have a <br> before and after an unordered list. The spacing of the <br>'s don't seem to be equal though. Please see https://jsfiddle.net/052620dm/ (the second <br> is bigger than the first). It looks like adding a br before the ul doesn't do anything. Changing the unordered list to another display fixes the issue but obviously makes it no longer an unordered list. Any advice? Thanks!
First: Don't use <br> for layouting, use CSS.
To your problem: The first <br> breaks the text to a new line. This means, that there is no spacing between the 'hi' and the <ul>, because the <ul> starts directly at the new line. The <ul> is a block element and automatically pushes the text after to a new line. Then, the 2nd <br> comes and breaks to a new line again. This creates the larger spacing.
hi
<br> // linebreak
<ul> // <ul> starts directly at this new line
<li>test</li>
</ul> // <ul> is a block element and pushes the element after to a newline
<br> // another new line is added (there comes your empty space from)
hi
Not sure why you would want to use a br before and after the list. Why not just set a margin?
If you need to use the br tags, wrap your text in p tags and you'll get the same spacing before and after the list.
I've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br /> tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:
<p>Hello. <br /><br />This is a test</p>
You could simply use 2 separate paragraph (<p>) tags. For example:
<p>Hello.</p>
<p>This is a test</p>
Here's a demo.
Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.
If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br> elements.
This is one line of text<br>
This is also one line of text<br>
The next line happens to be empty<br>
<br>
And here is another line, not empty<br>
And so on.
However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.
And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p> tags as well. Example:
Add the water to the recipe<br>
Add the salt<br>
<p>Note: stir thoroughly!</p>
If your intention is to actually separate two lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.
This is some text
<hr style="opacity:0">
This is some unrelated text
If the next line happens to be an introduction to the later half of the text, change it into a <h4> (that is, a header at whatever level you require here).
The last line of the previous section
<h4>Introduction</h4>
The fist line of the next section
This works because headers also have margins built in.
Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
Suppose they are in <section>s:
<style>
section {margin:1em 0}
</style>
...
... The last line of the previous section</section>
<section>The fist line of the next section ...
You can surround the 'Hello' with div and add css of maring-bottom for example:
<p>
<div style='margin-bottom: 40px;'>Hello.</div>
This is a test
</p>
I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semantic and using the proper tag in your site "helps the search" engines to "understand your site"
<p>Hello. <br /> <br> This is a test</p>
Using block level elements would help. for example, p is a block level element which would give the line break.
so you can have the text in two paragraphs. and have the margin/padding set to the paragraph
using <br> is a bad approach.
Try using this where you want the blank space:
If you want multiple blank spaces, then repeat the code successively like this:
etc.
I have a series of paragraphs. Each one ends with a illustration which clarifies the subject being explained in the paragraph.
I want the illustration to be on a new line and not display along with the text and I have found the following solutions, with it's own problems:
Put the illustration in a different <p> than the text related to the illustration.
<p>Some text here<p/>
<p><img src="myphoto"/></p>
This seems to solve all the problems, but later I needed to enclose some of this paragraphs inside a <ul> instead of a <p>. The problem being I cannot enclose the <p> tag for the illustration inside a <li> and does not make sense to put the illustration inside a <li>.
<ul>
<li>Some text</li>
<p><img src="myphoto"/></p><!--Incorrect-->
<li><img src="myphoto"/></li><!--Does not make sense-->
</ul>
Put the ilulstration inside the same <p> as the text. Then use <br/> tag to move the picture to a new line. I'm not really happy with this workaround, the <br/> is doing presentational stuff that should be better in CSS.
<p>Some text here<br/><img src="myphoto"/></p>
Finally, set the display attribute of the <img> as block in the CSS style sheet. I'm not sure if this is a good way and don't know the unrelated consequences it may have.
I don't know if there is a standard way of doing this. I have search for CSS to start my image in a new line but did not find it. Any help will be welcome.
Ok, so this is my new solution. Basically, we just set the IMG element to be a block-level element.
img { display:block; }
This solution does not introduce any new markup. (You just place the <img> element right after the text in the paragraph / list item.)
I believe this to be the most elegant solution, since setting images to be blocks is rather common anyway.
Try this after your image:
<BR CLEAR=ALL /> … or
<BR CLEAR=RIGHT|LEFT />
basic HTML, no CSS! :)
What is considered "better" practice:
<div class="clr"></div> (Where clr is clear:both)
or just simply:
<BR CLEAR:BOTH />
I'm really confused since I was once told never to use BR but then BR is designed to be what the div class is?
Question:
Would it be wrong to just use <BR /> when you want to clear or should I use the div?
Thanks in advance
edit: I've already read http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks and http://www.w3.org/TR/html4/struct/text.html#edef-BR
example (note I've removed classes and added the style directly to the html for ease of reading):
<div style="float:left;">
<img style="float:left;" src="/images/videos/video.jpg" width="90" height="75" alt="thumb" title="title" />
<a href="www.example.com" >Title text</a>
<div style="clear:right;"></div>
<span>Length: duration here</span>
<div style="clear:right;"></div>
<span>descriptive text here<span>
<div style="clear:right;"></div>
<span>Date: date of added here</span>
</div>
In your expert opinions am I using spans, divs, etc correctly? Should I use BR's instead of Divs for the breaks.
Thanks everyone
Closing Note:
Thank you for all for pointing out that a linebreak is nothing to do with clearing of floats. I need to learn exactly what a linebreak is... I guess I don't know.
Thanks to freddy for seeing what I actually wanted to do and giving me the solution I clumsily asked for.
None of the above. Best practice is to use the HTML to give structure to the information.
So, you use div to put a section of information in the page. If you need a line break after that information, you use CSS to style that.
<div id="someinformation">
<p>some parragraph of info</p>
<ul>
<li>an item of the list</li>
<li>another item</li>
<li>yet another item</li>
</ul>
</div>
Now in CSS you can style as needed. The document on its own have structured information with some default way of being rendered by the browsers. The structure plays well with screen readers which are not bothered with HTML elements for visual appearance.
Say you have more elements, in CSS you can decide to let them appear beside each other, or with a line break, or with some margins.
You're asking the wrong question for the solutions you gave yourself. Those 'clear' elements aren't there to create line breaks usually, they are there to clear floated elements that occur before them.
BR are used semantically for adding line breaks in such places as in the middle of a phrase or between two words. It does NOT clear floats.
An element with a clear property clears floats on either side specified above the element, here it makes more sense semantically to use a div - since you are not creating a line break but rather clearing a float.
a BR can be specified to have a clear but semantically once again, this would lack sense.
For adding padding/break/margin after a certain text it is best to use the margin/padding properties rather than use BR's consecutively.
So in summary:
This is the first line<br />Second line
For br's.
<div style="float: left">Clear me</div>
<div style="clear:left"></div>
For div's.
<div style="margin-bottom: 19px;">Test here</div>
For a "line-break" or more accurately margin under the text.
As to your presentation, it seems that you may want to research floats a bit more. Semantically it is a bit messy with the fact everything is float left, and then you clear right every line. Graceful coding is all about minimal code - maximum results.
What about adding clear-properties to your span elements, instead of inserting another (pointless) element in there?
HTML should describe structure, not presentation. If you add BR - line breaks - to change the presentation (how the site looks when styled) you're doing something wrong.
Adding DIVs or SPANs has no effect on the structure, since they have no semantic meaning at all.
I'd never use a div for that. I believe that <br/> is the best thing to do when you need a line break inside a <p> for example.
Anyway, I'm not sure why are you using that CLEAR:BOTH or the class=clr.