I have 6 images sized 50x50 that are supposed to fit in a 300px div (50 * 6 = 300).
In my code I write them as follows:
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
Note the line breaks in between the image tags. I write them that way for clarity.
The problem is that when I test the page in a browser - the images do not fit, because the browser adds a space for every line break so I end up with something like this:
[img][space][img][space][img][space][img][space][img][space][img][space]
instead of:
[img][img][img][img][img][img]
I can easily remove the line breaks from my html, but that makes my code a lot less readable.
I am working in Ruby on Rails 2.3 - if there's a helper function for stripping out whitespace, I don't mind using that.
I was wondering if anybody knows how I can avoid this.
Thanks!
If you're using the image_tag helper, you can do
the -%> will not include the spaces in output.
Put your images in a <div class="images"> and set your css rules to div.images img { float: left }.
Related
I'm trying to add several images on my wordpress page but I don't want any spaces in between all of the images. All of them stacked on top of another..trying to create one big vertically inclined image but all of them have a white line or space in between.
I've tried the following:
No spaced between the tags:
<img src="http://www.test.com/images/packages/unnamed (1).jpg"></img><img src="http://www.test.com/images/packages/unnamed.jpg"></img>
I read this in another post on here:
<div>
<img border="0" src="http://www.test.com/images/packages/unnamed (1).jpg">
</div><div>
<img border="0" src="http://www.test.com/images/packages/unnamed.jpg">
</div>
Any help would be greatly appreciated.
Thanks
you might need to play with the margins/ border with a little css. Both can add space between anything.
Example for your code:
you will need to do a couple things:
1) make the images part of a css class (lets call it noBorder)
ex:
<img src="file" class="noBorder" >
you will add this class to all of your image tags
2) make the actual class
pretty much like this:
<head>
<other head tags>
<style>
.noBorder{
margin:0px;
border:0px;
}
</style>
</head>
3) alternatively, you could just insert this inline code to each of your image tags:
style="border:0px;margin:0px;"
ex:
<img src="file" style="border:0px;margin:0px;" >
note that these styles will also work on those divs you have there
A great resource for these things is: http://www.w3schools.com/css/default.asp
and on this subject: http://www.w3schools.com/css/css_boxmodel.asp
I actually got it fixed, thanks for the help.
All I did was this code for all of the images one after another and boom fixed.
<img src="http://www.domain.com/images/packages/unnamed (1).jpg" style="display:block"></a>
This question already has answers here:
Ignore whitespace in HTML [duplicate]
(12 answers)
Closed 9 years ago.
I wondered if there is any technique that can be used to remove whitespace displaying in the browser without sacrificing readability of HTML.
For example, putting HTML on different lines (easier to read when working with it) creates unwanted whitespace between the divs/spans/li's - very frustrating. The only way I can see around this is to push all the HTML onto one line, which makes reading/editing and maintaining a nightmare.
For example see these fiddles.
Fiddle 1 has readable HTML, but the images are pushed onto a second line due to unwanted whitespace.
Fiddle 2 has HTML all on one line, frustrating to read, but the output is correct.
I'm wondering if there is anyway to get around this or is it just something I have to deal with?
To me, the following code is just not easy to work with.
<div class="prodGrid">
<div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div></div>
There are some CSS-only solutions to this, but none that I'd recommend. I prefer to keep the markup on separate lines, but use comments to "remove" the whitespace, like this:
<div class="prodGrid">
<div class="prod">
<img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
</div><!--
--><div class="prod">
<img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
</div><!--
--><div class="prod">
<img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
</div>
</div>
Ugly as all hell, but currently my preferred method until there's a proper CSS solution. inline-block has too many useful properties to abandon it just because the markup suffers slightly.
Note - watch out for IE7 if you do take this approach. There's a bug in that browser that means comments are interpreted as DOM elements. So, if you're using some slightly more complex selectors you may need to take the approach of just sticking everything on one line.
Used to vertical-align top on your img tag
as like this
.prod img{vertical-align:top;}
Demo
----------------
2nd is this
.prodGrid{font-size:0;}
.prod img{vertical-align:top;}
Demo2
just wondering if there is a way to reduce the amount of code needed when displaying a lot of images in HTML?
I am wanting to display around 2-300 images in a gallery, and at the moment the HTML will look like this:
<div id="scroller>
<img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>
...but down to image "decking-250.jpg".
Is there a more efficiant way to display the images so that I don't have 250+ lines of "img src" HTML?
The only part of the filename that changes is the "-1", "-2", "-3" etc etc. The rest, including the Alt tag can remain empty.
I am building this site in ASP.Net MVC3 Razor using the ASP.net online tutorials as a guide if that helps any solution come to mind, of if it simply has to be done that way then that is also fine - I just wondered if there was another approach I should consider to learn?
Many thanks in advance.
This is the way HTML works. You can't reduce that, as you need one img tag for each picture. You may create that code dynamically via PHP, JS, …. But in the end you'll get a long list of img tags, maybe individually wrapped by other tags (for example in a list).
I agree with Feela, and though it may appear verbose, your code is about as bullet-proof as it gets. Yet if something like JS is something you can use (or are using already), there are options. This isn't tested, but you could set up a for-loop statement in Jquery/Javascript that could condense the code. For example:
for (i=1; i < 250; i++) {
$('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}
I'm no ASP coder, but perhaps it provides something functionally similar.
I have a page with a row of about 10 imgs. For readability of the HTML, I want to put a linebreak in between each img tag, but doing so renders whitespace between the images, which I do not want. Is there anything I can do other than break in the middle of the tags rather than between them?
Edit: Here is a screenshot of what I have so far. I would like the book spine images to display in random combinations, using PHP. This is why I need separate img tags.
Sorry if this is old but I just found a solution.
Try setting the font-size to 0. Thus the white-spaces in between the images will be 0 in width, and the images won't be affected.
Don't know if this works in all browsers, but I tried it with Chromium and some <li> elements with display: inline-block;.
You could use comments.
<img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="...">
I'd worry about the semantics of having a series of images side by side though.
You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.
Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.
Flexbox can easily fix this old problem:
.image-wrapper {
display: flex;
}
More information about flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have two options without doing approximate stuff with CSS. The first option is to use javascript to remove whitespace-only children from tags. A nicer option though is to use the fact that whitespace can exist inside tags without it having a meaning. Like so:
<div id="[divContainer_Id]"
><img src="[image1_url]" alt="img1"
/><img src="[image2_url]" alt="img2"
/><img src="[image3_url]" alt="img3"
/><img src="[image4_url]" alt="img4"
/><img src="[image5_url]" alt="img5"
/><img src="[image6_url]" alt="img6"
/></div>
After way too much research, trial and error I found a way that seems to works fine and doesn't require to manually re-set the font size manually on the children elements, allowing me to have a standardized em font size across the whole doc.
In Firefox this is fairly simple, just set word-spacing: -1em on the parent element. For some reason, Chrome ignore this (and as far as I tested, it ignores the word spacing regardless of the value). So besides this I add letter-spacing: -.31em to the parent and letter-spacing: normal to the children. This fraction of an em is the size of the space ONLY IF your em size is standardized. Firefox, in turn, ignores negative values for letter-spacing, so it won't add it to the word spacing.
I tested this on Firefox 13 (win/ubuntu, 14 on android), Google Chrome 20 (win/ubuntu), Android Browser on ICS 4.0.4 and IE 9. And I'm tempted to say this may also work on Safari, but I don't really know...
Here's a demo http://jsbin.com/acucam
I'm too late (i just asked a question and find thin in related section) but i think display:table-cell; is a better solution
<style>
img {display:table-cell;}
</style>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">
the only problem is it will not work on IE 7 and Earlier versions but thats fixable with a hack
Use CSS stylesheet for solving this problem like the following code.
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}
alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG
Testing on Firefox 3.5 Final!
PS. your html should like this.
<div id="[divContainer_Id]">
<img src="[image1_url]" alt="img1" />
<img src="[image2_url]" alt="img2" />
<img src="[image3_url]" alt="img3" />
<img src="[image4_url]" alt="img4" />
<img src="[image5_url]" alt="img5" />
<img src="[image6_url]" alt="img6" />
</div>
Is there anything I can do other than break in the middle of the tags rather than between them?
Not really. Since <img>s are inline elements, spaces between these elements are considered by the HTML renderer as true spaces in text – redundant spaces (and line breaks) will be truncated but single spaces will be inserted into the character data of the text element.
Positioning the <img> tags absolutely can prevent this but I'd advise against this since this would mean positioning each of the images manually to some pixel measure which can be a lot of work.
Another solution would be to use unconventional line breaks in places of spaces. This is similar to the first couple answers, and is an alternative way of lining up elements. It also is a super-edge-optimization technique because it replaces spaces in your markup with carriage returns.
<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">
Note that there are no spaces in any of that code. Places where spaces are normally used in HTML are replaced with carriage returns. It's less verbose than both using comments and using whitespace like Paul de Vrieze recommended.
Credit to tech.co for this approach.
white-space: initial; Works for me.
Inspired by Quentin's answer, you can also place the closing > next to the start of the next tag.
<img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."
/><img src="..." alt="..."/>
The whitespace between the elements is only put there by the HTML editor for visual formatting purposes. You can use jQuery to remove the whitespace:
$("div#MyImages").each(function () {
var div = $(this);
var children= div.children();
children.detach();
div.empty();
div.append(children);
});
This detaches the child elements, clears any whitespace that remains before adding the child elements back again.
Unlike the other answers to this question, using this method ensures that the inherited css display and font-size values are maintained. There's also no need to use float and the cumbersome clear that is then required. Of course, you will need to be using jQuery.
Personally I like the accepted answer stating there is no exact way of doing this, not with out using a trick of some form.
To me, it is an annoying issue with at times can make you waste an hour wondering why a row of check boxes for example are not all aligned correctly.. Hence i had to have a quick google and myself check if there was a css rule that i have not remembered... but seems no :(
As for the next best answer, of using font-size... to me this is a nasty hack that will bite you later on wondering why your text is not showing.
I generally develop a lot with PHP and in the case of where i am generating a grid of check boxes, the PHP generated content removes this problem as it does not insert any spacing/breaks.
Simply, i would suggest either having to deal with the images all being on a single line together or using a server side script to generate the content/images.
Instead of using to remove a CR/LF between elements, I use the SGML processing instruction because minifiers often remove the comments, but not the XML PI. When the PHP PI is processed by PHP, it has the additional benefit of removing the PI completely along with the CR/LF in between, thus saving at least 8 bytes. You can use any arbitrary valid instruction name such as and save two bytes in X(HT)ML.
Semantically speaking, wouldn't it be best to use an ordered or unordered list and then style it appropriately using CSS?
<ul id="[UL_ID]">
<li><img src="[image1_url]" alt="img1" /></li>
<li><img src="[image2_url]" alt="img2" /></li>
<li><img src="[image3_url]" alt="img3" /></li>
<li><img src="[image4_url]" alt="img4" /></li>
<li><img src="[image5_url]" alt="img5" /></li>
<li><img src="[image6_url]" alt="img6" /></li>
</ul>
Using CSS, you'll be able to style this whatever way you want and remove the whitespace imbetween the books.
This might be a stupid question but if there's a better or proper way to do this, I'd love to learn it.
I have run across this a few times, including recently, where small spaces show up in the rendered version of my HTML page. Intuitively I think these should not be there because outside of text or entities the formatting of a page's HTML shouldn't matter but apparently it does.
What I'm referring to is this - I have some Photoshop file from the client on how they want their site to look. They want it to look basically pixel perfect to the image in this file.
One of the places in the page calls for a menu bar, where each one does the changing bit on hovering, acts like a hyperlink, etc. In the Photoshop file this is one long bar, so a cheap and easy way to do this is to just split that segment into multiple images and then place them next to each other in the file.
So instinctively I lay it out like so (there's more to it but this is the gist)
<a href="page1.html">
<img src="image1.png" />
</a>
<a href="page2.html">
<img src="image2.png" />
</a>
<a href="page3.html">
<img src="image3.png" />
</a>
and so forth.
The problem is the images have this tiny space between them which is unacceptable since the client wants this thing pixel-perfect (and it just plain looks bad).
One way to get it to render properly is to remove the carriage returns between the images
<a href="page1.html">
<img src="image1.png" />
</a>
<a href="page2.html">
<img src="image2.png" />
</a>
<a href="page3.html">
<img src="image3.png" />
</a>
Which makes the images go right up against each other (the desired effect) but it makes the line incredibly long and the code more difficult to maintain (it wraps here in SO and this is a simplified version - the real one has longer filenames and JavaScript sprinkled in to do the hovering).
It seems to me that this shouldn't happen but it looks like the carriage return in the HTML is being rendered as a small empty space. And this happens in all browsers, looks like.
Am I right or wrong for thinking the two snippets above should render the same? And is there something I'm doing wrong? Maybe saving the file with the wrong encoding? Should I make every one of these links a perfectly positioned CSS element instead?
The whitespace (carriage return included) is usually rendered as space in all browsers.
You need to put the elements one after another, but you can use a trick:
<a href="page1.html"><img src="image1.png"
/></a><a href="page2.html"><img src="image2.png"
/></a><a href="page3.html"><img src="image3.png"
/></a>
This also looks a little ugly, but it's still better than one single line. You might change the formatting, but the idea is to add carriage returns inside the elements and not between them.
I don't know if this is general enough for your page, but you could class these particular a tags and float them all left, then they'll bunch together no matter how your HTML is formatted.
<style>
a.together {
float:left;
}
</style>
<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>
That's part of the HTML specification - the spaces are in the markup so they're considered part of the document.
The only other options you've got, since you dislike the formatting, is to break the html tags:
<a href="..."><img src=".." /></a
><a href="..."><img src=".." /></a
><a href="..."><img src=".." /></a
which is undesirable in my opinion, or create the html dynamically - either via JavaScript or using a templating system and dynamic html.
The reason is simple: In HTML white space matters, but only once. Repeated white space is ignored, only the first is shown.
The only reliable way to avoid this is, as you did, by putting no white space between elements.
When table based layout would be less out than it is currently, you could use a zero-border, zero padding table to align your elements while having them on separate lines in the source code.
The way I handle this is to use an unordered list, and make each image/link an item.
Then use CSS to display each item inline and and float them to the left.
This will give you a lot more flexibility and make the markup very readable.
The behavior you demonstrated above is true as the browser treats carriage returns as a space. To fix it, you can style it like so with:
a { display: block; float: left; }
Please note that the above rule applies it to all links, so you might want to narrow the selector to certain elements only, ie:
#nav a { display: block; float: left; }
If you're going to do a tabbed interface on a website, take great pains to do it properly, and it will be worthwhile. There are many websites with great examples of CSS tab implementations. Consider using one of them.
This one has a lot of CSS+Javascript/AJAX tabs. Or see this set of simple CSS examples (some styled). Finally, check out this actually-pretty-cool tabs generator.