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.
Related
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
I'm new here and to HTML/CSS, so forgive me if I'm being incredibly dopey with this issue. I have searched for an answer to no avail and I finally admit defeat and ask...
I have two div boxes side by side in a container using float. No problmes there (i hope). I wish to split the right hand div box again. I thought it wouldn't be an issue, turns out I was wrong. I just cannot get the Include list (.includebox) to sit next to it's partner the Exclude list (.excludebox) inside .helpbox2
I've cut and pasted what I think is the pertinent code but I can always add more. The problem is live at www.exceptionalcvs.co.uk/help_cv_basics.html unless i've mucked around with it again - which I shall try my hardest to refrain from.
HTML
<body>
<div class="container">
<div class="margins">
<div class="helpbox1">
<h2>1. Introduction</h2>
</p><p>
<p>text here</p>
</div>
<div class="helpbox2">
<h2>2. What do I put in my CV?</h2>
<p></p>
<div class="includebox">Include list
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="excludebox">Exclude list
<ul>
<li>Passport number</li>
<li>Driving license number</li>
<li>Social Security number</li>
<li></li>
<li>Martial status</li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}
.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}
Apologies if the code is a bit messy.
image of issue is here:
http://www.exceptionalcvs.co.uk/img/div_problem.jpg
You missed the l on .includebox
Edit 2
Here's the same code simplified, in a way that I'd do.
Remove the .margins div, unnecessary
Refactor your CSS so that you make style all divs in your second box the same, and make the only difference that one floats right
Spread CSS rules onto separate lines, only make a rule one line if it has a single attribute
Remove the position:relative and the top and right's - again, unncessary
I hope that helps :)
Edit
You also don't need anywhere near as much styling as you've got, these can all go as they're doing nothing (unless you have them for a reason I can't see in your example)
position:relative;left:0px;right:0px;;margin:0px auto;
Also
Try to space out each CSS rule onto a new line, it makes it a lot easier to read
When you use Stack Overflow, people really frequently use JSFiddle to demonstrate their issues. I used your code to help me, see here
Try separating your elements with dashes, but always in lowercase, e.g. .inside-box
Welcome to Stack Overflow :)
Your code is fine, but you missed the 'L' on .includebox in your css file.
Here is the working example: http://jsfiddle.net/SVEh9/
Should paragraphs breaking point be set with the width of the container, or using br's?
Example:
<div style="width: 30px;">
<p>
Foo bar test
</p>
</div>
Or
<p>
Foo<br>
bar<br>
test
</p>
http://jsfiddle.net/APcU3/
I've always assumed that it should be by setting a width on the container. But I'm not frontend and quite a lot of the HTML templates I've been given to complete have used the BR method.
It depends on specifically what you're trying to accomplish. If you're trying to get words to wrap to fit a specific width on the page then the first example is how you should approach it (as a general rule you should try to adjust layout issues using css, not markup).
However, if there is a logical reason why the lines need to break at those specific places, then the <br /> method is appropriate (for instance, if you want to make sure that each word is on its own line regardless of the word-length, then using markup (<br>) is fine. However, even in these circumstances you may want to rely on more meaningful semantic markup unless there is a real logic to specifically using a break character. I.e:
<p class='thin_column'>
<span>Foo</span>
<span>Bar</span>
<span>test</span>
</p>
and include css rules:
.column {width:50px;}
.column span {display:block;}
This way you can still use CSS to radically adjust the layout but you'll force line-breaks after each word.
Don't ever mix style and structure (or in this example content)! The width-method (used in an css-class and not inline) is the one and only way to achieve this.
the <br> element is only used to force a line break on a specific position. but that is content-dependend not a styling issue.
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.
I've been wondering if I can use <p> </p> (just space in paragraph) instead of <br />
Because I love to keep my code semantic and thought if this is right has been bothering me for a while now. I have seen WYSIWSG editors (TinyMCE) use this, but I still rather ask then do it wrong.
That is not "semantic", an empty paragraph is something that more or less cannot exist, semantically. It contains no information, i.e. no semantic content. All it does is change the visual layout, i.e. the presentation.
You're far better off using styling to change the margins, borders or padding to achieve the effect you're after.
What's wrong with using the margins of the paragraphs for vertical-spacing instead?
<p>Hello World</p>
<p>This is much cleaner than using empty tags with non-breaking spaces.</p>
The right way to do it is with CSS: use the margin-top or margin-bottom.
<p> </p> is pretty horrible... I'd rather see <br> than that (even though it may be less "correct").
<p> </p> is not semantic, so I don't know how that helps you.
You should set the space between the paragraphs with css.
I advocate wrapping items in block-level tags, such as divs and ps. This way I don't need either. If you want to space out elements, you should be using margins. You can be more accurate with margins anyway.
In a situation where you're forced to have a line break, use <br />: it, unlike empty paragraph tags, actually does mean 'line break'. There's almost always a better way to do things though.
It's HTML. You can use whatever it wants as long as you're sure it will render the way you wanted on all the browsers you're gonna use. I don't understand what you mean by "keep my code semantic" so I'm not sure what your issue with <br> is. But if you're talking about formatting and such, turn to CSS.