My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
Related
html
<div id="home_header_minitab">
<img src="topnavi_1.gif" />
<img src="topnavi_2.gif" />
<img src="topnavi_3.gif" />
<img src="topnavi_4.gif" />
</div>
css
#home_header_minitab{
width: 100%;
float: right;
text-align: right;
}
and the result,
If i delete float and text-align, it prints fine. but if i add that two, it shows like that. but the requirement is to locate the images to the right side. :(
If I'm wrong, I'll appreciate if there is a better way to print images straight forward.
Replaced inline elements are treated in the same way as characters.
There is a space between <img> <img> for the same reason that there is a space between a a.
Remove the whitespace between the elements from the HTML.
Unless otherwise specified, whitespace in HTML is usually collapsed into a single space. So in your code there is actually a space between the images.
Now, because img tags are inline elements, they are part of the normal text flow and as such will appear as if they are text elements themselves—separated by a space. That space will be rendered as a normal space with its normal size between the images which is why you see it.
There are usually two ways to solve this without replacing the inline layout by your own (e.g. using floats). The first way is to simply get rid of any whitespace between the elements in HTML. This is the easiest and most effective solution.
The other solution would be to change the font size to zero, so the space actually has no size itself:
#home_header_minitab {
font-size: 0;
}
Note that you need to be careful here in case you want to actually display text, or if you want a fallback to the alternative image titles.
Is there a way to display a row of links horizontally without using float:left? It's way too hard to center a div when using float:left, I can never get it to work.
Use display:inline;
http://jsfiddle.net/tcQzL/3/
If your elements are inline elements they will display in one row, otherwise you must make them inline.
I'm not sure if I understood correctly, but just make new div-where your buttons are in. And in that new div make your links have float:left
Then just normally position that new divyou made.
But I think that those those earlier answers from Andrei S and mesiesta are more better.
you could try display: inline or inline depending on your needs (from what I know, inline-block offers more flexibility than just inline)
here, check this fiddle
There's a catch though if you use these, if you look in the fiddle, my first two elements are written one after another so that I don't have any gaps between them (that's why I added the borders) and the other ones are written one below each other and as you can see, there's the gap I was talking about. So keep that in mind while writing your code.
There are different workarounds about this, but if you do need borders, and not just the text, you should really consider using float to avoid any workarounds
You can use display:inline-block for that. Write like that
.link{
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/tcQzL/10/
Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.
In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.