I have a button over my div.
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu">
Some code
</div>
The div is displayed right below the button. I want the button to be displayed with a line break. I know it is a bad practice to use <br/>. How do I give space without it?
With css:
.sidebarmenu{
margin-top: 20px;
}
Live example: http://jsfiddle.net/BhsYx/
You can use
#showmenu{
margin-bottom:10px;
}
Demo
The right way to make a line break is to use <br>.
To put some space between block elements though, you can use CSS properties like margin (external) or padding (internal). But margin is not line break. <br> means line break, and renders as an empty space. Margins are another way to render empty space, but this is not equivalent because it does not impact the same things.
You could make it a block level element...
button{
display: block;
}
see fiddle: http://jsfiddle.net/dwBG4/
You can try this :
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu" style="margin-top:20px" >
Some code
</div>
You can display block your button
button{display:block}
Not exactly bad practice in your given scenario really. It's only bad practice when you see something like:
<div>
</div>
<br />
<br />
<input />
<br />
<br />
But you're wanting to use it to control text, so use it! This reminds me of when you see people hating on tables, yet use display: table and display: table-cell on a divs!
Related
I don't have access to html, but i want to test something... How would I select the text boomboomboom and hide it with CSS...
the markup looks like this:
<div class="bla">
<div>
<strong>some text</strong>
<br />
boomboomboom
</div>
</div>
I tryed this:
.bla div {
text-indent: -9999px;
}
.bla div strong {
text-indent: 0px;
}
but this just hides "some text" instead of "boomboomboom"...
can anyone help me? http://jsfiddle.net/b26N7/1/
Check this topic, it's the same thing. Conclusion is, you can't select the text node with the css at this moment(without wraping it in a html element), but you can do it with JavaScript.
Remove <br /> to separate the "boomboomboom" in next line. You can use "display:block" to show the "boomboomboom" in next line.
Then your css will work properly.
Example: http://jsfiddle.net/uL9Rg/
I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?
you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/
You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!
Here's my demo for you. Seems like chrome didn't like the </br>
DEMO
Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.
In following example:
Line1 <br /> Line2
I'm using <br /> to force Line2 to go to next line, but as far as I know there is no cross browser friendly way of setting the height of br. What is an alternative method I could use?
Use differents blocks :
<p>Line1</p>
<p>Line2</p>
Normally, using <br /> is old way of breaking a line.
You should use <p>, <div> or some block level elements and give them top or bottom margins.
p {
margin-top:5px;
margin-bottom:5px
}
Using CSS you can control the line-height property of any element.
someElement {
line-height:12px;
}
Now you may simply set this for an element, or use it on the entire HTML to provide uniformity across the document. This is safe, cross-browser compatible and easy to use.
You can use css line-height property along with <br/> tag to control spacing between lines.
<style>
.small
{
line-height:100px;
}
</style>
<p class="small">
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
</p>
I add a <div>, best way for me, with CSS margin. Or,
The <p> tag.
Use padding & / or margin css attributes.
You can add a <div> like this
<div style="height: [put your height here]; display: block;"></div>
Seems to work for me, as shown here:
<span>This is the previous line!</span>
<div style="height: 50px; display: block;"></div>
<span>This will be 50 pixels below the previous line.</span>
You can even use a span!
<span>This is the previous line!</span>
<span style="height: 50px; display: block;"></span>
<span>This will be 50 pixels below the previous line.</span>
I have an issue with the HTML <br /> tag.
I have 2 images above each other.
With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be.
Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.
Here is the problem
Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images.
IE7 puts some space between the 2 images even if I don't put any <br />
Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc...
I have not tested in IE8.
Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?
Thanks for your insight!
Try using css to position the images rather than relying on the br tag.
img { display: block; margin: 0 0 20px 0; }
For example.
First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs
The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.
If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.
However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.
To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.
The size of the br element depends on the font size/line height. Have you considered just setting display block on the image elements and setting a bottom margin, and maybe adding a 'last' class on the last one so it doesn't have a bottom margin?
<!doctype html>
<style>
body { background:gray; }
div#gallery .row img { display:block; margin:0 0 1em; }
div#gallery .last img { margin-bottom:0; }
div#gallery .row .thumb { float:left; width:5em; }
div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>
<div id="gallery">
<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
</div>
Though in this example it'd be easier to set a bottom margin on the row itself.
if you want to use the tag you can do it so :
<br style="line-height:?px; height:?px" />
where ?px = how many px it`s needed to show the result you need
OR
you could use:
<br clear="all" />
it should work...
if you want to use CSS you could do it so :
<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>
it should work.. these are quick ways to do it.. you can use css and make something great.. but what i wrote here are "quickies" and most simple/fastest ways i thought of.
The br element is a presentation element that offers no descriptive value. Most browsers tend to apply default presentation to different elements that can differ slight from browser to browser. So, I would strongly recommend not using the br element and instead using a span tag and CSS to ensure your presentation is uniform across various browsers.
Are you set up like this?
<img src="1.jpg" />
<img src="2.jpg" />
The correct behavior is actually to not line break between the images, they should appear on the same line. The first BR tag added should bring the second image to a new line, then the second BR should create a gap.
It might fix it if you specifically tell your images to line-break themselves, so they appear on separate lines even without a BR.
I would add one thing to DanTdr's response. If you don't add a small font size for the BR tag then you run into problems in IE because of it's hasLayout behavior. The BR would be a minimum of 1em.
<br style="line-height: ?px; height: ?px; font-size: 1px;" />
After being frustrated for some time with not getting BR tags to render the same in Firefox and IE this font-size: 1px; style finally made my layout appear the same in both browsers.
What is the difference
<br style="clear:both;"/>
vs
<div style="clear:both;"/>
??
Also, I thought
<div style="clear:both;"/>
is a good way of clearing, but is
<div style="clear:both;"> </div>
a proper way?
The difference is which other style attributes you inherit. Of course one inherits from <br> and the other from <div>.
Typically <div> has no special style implications other than display:block whereas <br> implies a line-break and some non-zero height (linked to the current font height).
But often (e.g. with the ubiquitous css-reset technique) there is approximentally no difference. Therefore, pick the one that makes the most semantic sense.
[UPDATE]
For closing tags, use <div></div> and not <div/>. Here's why.
Thanks to commentors Sebastian Celis and ephemient for the "closing tag" correction.
This is the style that I use for clearing:
.Clear { clear: both; height: 0; overflow: hidden; }
Usage:
<div class="Clear"></div>
This will not take up any extra space in the page as the height is zero.
Internet Explorer has a strange idea that the content of each element has to be at least one character high, and another strange idea that each element should be as high as it's content. Using overflow: hidden keeps the content from affecting the size of the element.
I would use:
<p class="clear"></p>
and in your CSS just add:
.clear {clear:both; height:0px; font-size:1px;}
/* font-size:0px; does not work well on IE7, it works in IE8 and all other browsers. */
You might say, why not:
<br class="clear">
I typically use the clear class after float:left elements, and when using the <br> instead of the <p> they don't seem to work well on IE7 they don't clear as supposed, and on Safari4/Chrome they add unwanted space. I didn't have time to investigtae better this one, so it might be just an error on my design, all I know the <p> in this case seem to be more cross-browser.
Well, there is no difference, depending on inherited styles.
This links says some more, and recommends :
http://www.positioniseverything.net/easyclearing.html
The only difference that I can think of here is that <div> is a block-level element, while <br> is an inline-level element.
But <br> actually behaves somewhat like a block-level element, other than the fact that it is effected by line-height and font-size CSS properties.
In my opinion, <br style="clear:both;"/> is the more proper way to put a line-break in your page, mostly because it is widely-accepted and easily identifiable by others who may not be familiar with your markup.
This is what I always use:
<style type="text/css">
.clearing {
height: 0;
line-height: 0;
font-size: 0;
clear: both;
overflow:hidden;
}
</style>
And where I need a clearing:
<div class="clearing"></div>
You may also be interested in self-clearing containers: http://www.positioniseverything.net/easyclearing.html
EDIT: Added "overflow:hidden" per the suggestion from another answer poster.
You do need to be careful about the / on the tag.
I had problems with the slash on the <script> tag terminated by <script language="javascript" src="MyScripts.js" /> way. Although, most xml compliant parsers would accept both.
<script> has to be terminated by </script>
.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }
Usage
"br" sometimes has side-effects in Opera and IE browsers, so you should avoid using it
If you're writing (valid) XHTML you don't need to use the closing tag, but self closing div tags don't work in all browsers, so you should still use it. ie your example:
`<div style="clear:both;"> </div>`
This is valid XHTML (see html vs xhtml) but doesn't work in all browsers, so you should stick with the above:
<div style="clear:both;" />
also, For what it's worth the <br> tag is deprecated in favor of the <line> tag (see w3.org entry on the <br/> tag)
All methods are bad. Use CSS to change the appearance of your page. There are many methods to accomplish the same with CSS. Such as giving "overflow: hidden;" on the parent element.
<br /> is an inline element, where as <div> is a block element. Anyway, I personally prefer to use <hr class="clear">, I feel it is more semantically adequate.
You could also use..
with added CSS rules it can do the job, and it serves this purpose.