How do you remove unneeded space around images in HTML?
One of my images is coming to far away from the text, and it is messing up the look of the website. There is nothing wrong with the CSS I am using, but I believe because that there is too many HTML tags around it, it has a large space.
Please limit solutions to basic CSS and HTML, as per I can properly understand how it works.
EDIT: I am sorry, I was a bit vague about what my challenge was. I am using the Bootstrap Library, and have been looking a this following template:
http://www.markups.io/preview/varsity/
I really like the template, and I am occasionally taking code snippets out of it. I used the top bar, and replaced their logo with a different image. The image looks fine on desktop, but when a go on my mobile phone, it comes out what too low covering some important content. Anything you guys can do?
EDIT 2:
I have attached two photos of the look and what the problem looks like. The first one is the Desktop view (which is great), and the second one is the mobile view (which is too low). I don't have any more information... from the original post to EDIT 1, EDIT 2, that is all the info that I have.
Remove the spaces and line breaks between images:
<img src="http://placehold.it/20x20" /> <img src="http://placehold.it/20x20" />
<img src="http://placehold.it/20x20" />
to:
<img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />
Put this in your css file:
img {
margin: 0;
}
or use this in-line style in your html file:
<style type="text/css">
img {
margin: 0;
}
</style>
You can use the letter-spacing propriety of CSS
img {
letter-spacing: -2px;
}
I think you should remove space between your code!
so you must change this code
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
to this code (add comment code)
<img src="1.jpg" /><!--
--><img src="2.jpg" /><!--
--><img src="3.jpg" />
or to this code (literally remove space)
<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />
Since the template uses twitter bootstrap,
try adding img-responsive class to your image
Example, from:
<img src="1.jpg" />
to
<img class="img-responsive" src="1.jpg" />
Related
I have multiple images to show in a row that filled screen width:
<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">
In some pages I have 4 images but some have 5, 6, etc.
I don't want to change max-width for every pages so is that a way in CSS to take care of it?
p.s. I don't want to use table and background-image since a js plugin need find them as img, also img tag is google-friendly too...
I'd suggest you to use flexbox. It's really useful and can be mastered to make almost any kind of grid you want. Wrap all images in container class with display:flex and for each img element set flex:1. This is the simplest way. If you need to adjust it, read about it, it's great! Example here
.flexContainer {
display:flex;
max-height:200px;
}
.flexContainer > img {
flex:1;
border:1px solid;
margin:1px;
}
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
</div>
<br/>
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
</div>
There is no pure CSS way to solve it. Little jQuery can do it for you:
$(parentElem).each(function() {
var itemsCount = $(this).children().length;
var childrenWidth = 100 / itemsCount + '%';
$(this).children().css('width', childrenWidth);
});
where parentElem is container for your images. jQuery each loop here in case you have multiple rows with images on your page.
Not sure why, but none links over the images in my posts works unless it's set to position: absolute;
Summary:
No problems with neither src or href
The pointer cursor does not appear
Nothing happens when clicking on the image
The links works when I set a to position: absolute;, but then everything is misplaced and so on.
I have tried shortening it up to make it easier to debug.
Shorten HTML
<a href="#.jpg">
<img src="#.jpg" alt="Alt text" width="1200" height="800">
</a>
(Shortened) Complete HTML
<div class="clearfix"></div>
<div class="holder blacktext bildeserieholder">
<div class="container">
<div class="row">
<div class="col-md-12 centertext">
<img class="aligncenter size-full wp-image-512" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-513" src="#.jpg" alt="text" width="600" height="900" />
<img class="aligncenter size-full wp-image-514" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-515" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-516" src="#.jpg" alt="text" width="600" height="900" />
</div>
</div>
</div>
</div>
</div>
I have tried:
Using cursor: pointer to the link attribute.
Removing all img classes
Removing all CSS on both images and links in Chrome Inspect Element
It's hard to find out where I have done something wrong, so I would really recommend checking out the page: http://goo.gl/DqXAlC
Maybe not relevant, but I will add this information anyways regarding what I am using:
Wordpress
Bootstrap
Types (custom posts etc plugin)
The images are being uploaded with Types within each posts in a WYSIWYG editor called "bildeserie". In my single PHP I have the following which echos the images:
<?php echo(types_render_field( "bildeserie", array( 'raw' => true) )); ?>
Do you have a working solution or any ideas?
Note: The problem is with the images below the header and all the text.
Solutions:
.holder img {
pointer-events: none;
}
The above is disabling the link on the image, commenting it out will make everything work.
Second solution:
a {
display:inline-block;
}
That also fixes your problem (by expanding the link to the dimensions of the image).
I would imagine that the img has a size and the link does not have a size unless set to absolute. If the a doesn't have a size, you aren't clicking on the a you are clicking on the img, give the a a size and see what happens
You should disable this line in your style.css file:
.holder img {
pointer-events: none;
}
Dear Members of this amazing Forum
I recently started using Html again and for the love of God i can't figure out where the problem is.
I created 3 Div's, each with 1 image, 1 group of images, and 1 image again. (same problem if all are in the same div, with a rather basic Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
And the Html to use it.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
What results in the image below, sadly i don't get where the little space is from. Or why it's not on top too. Somehow i'm really confused where this issue is from and i'd realy appreciate the help.
[2]: http://i.imgur.com/SIkB7Hs.png <-- this one schould be a bit more clear sorry about that
edit: if found a rather face-> wall way to fix it with margin-top. And just making a div class for everyline. What's probably not the best way to go.
Ok, a few things here.
For one, with questions like this, it helps people answering a LOT if you post your code in a JSFiddle, like this here (though the images don't show there because they're relative URLs).
Also, it seems if you float the images to the left you can get rid of the spacing:
.HeaderNav img {
float: left;
}
Just to note, I have no idea why the spacing existed in the first place. Another tip: you should use 'Inspect Element' in Chrome or Firebug in Firefox to take a look at elements and see padding, margins, etc. Usually that makes it obvious where whitespace is coming from, though in this case I found nothing. Floating to the left was just an idea that seemed to work.
Probably because your <img> are still being declared as inline-level elements. Use:
.HeaderNav img {
display: block;
}
Also, you should check if a margin or padding have been assigned to the image element. If you do, reset them.
Also, make sure your padding and margin are 0 for the html and body...
so, try this:
body, html {
margin: 0;
padding: 0;
}
HTML cannot be used on it's own; it has to have CSS working with it continuously.
A bit confusing question, I don't understand it all. But check this jsFiddle. Is this what you mean?
Also remove the HeaderNav class from the first image.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
The img element default display type like inline-block, because of the font-size, so the img element maybe have 3px space.
To solve this problem, you can use the code below:
.HeaderNav img {
display: block;
}
or
.HeaderNav img {
float: left;
}
They all will change the img elements display type, I recommend the first one.
+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP |
|*************** |
|TTTTTTTTTTTTTTTTTTTTTTTT |
| |
|-------------------------------------------------------------------------------+
Sorry for the sketch here. I tried to attach a screen shot, but I couldn't get it to show up. (I'll try to fix it later on another computer if this doesn't explain enough)
EDIT: This might help visualize it... http://jsfiddle.net/T3y6E/embedded/result/
I have a <div> on a personal web page I am working on. The * represent an image placement. The "H" represent a title placement. The "T" represent a slogan placement. I am trying to move the slogan over so that it is directly below the Title (wanted placement represented by "P")
Here is my HTML for this portion of the page:
<div class="logo-image">
<img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
Here is css that affects it:
.logo-image {
float: left;
margin: 0px 20px 0px 0px;
}
The effect you're looking for is float. It must be applied to the element you want to be floating, in this case the first image. And the element (with float) must be placed before the element you want it to float from, in your case the title and slogan.
I've created a fiddle with your code to show the concept: http://jsfiddle.net/3xV5Z/1/
Just a reminder: Your slogan is too big. Float won't work well with it if you don't manage your images width.
My answer is very similar to LcSalazar's. It uses your css.
<div>
<span class="logo-image">
<img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
</span>
<img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
<div>*A southpaw's approach to bowling*</div>
</div>
I have this simple HTML / CSS
<div class="image-group">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/120x120" />
<img src="http://placehold.it/80x80" />
</div>
.image-group img {
margin: 0;
padding: 0;
}
JSFiddle
Why are the images not stuck together? I inspect the elements using Chrome's Inspector and it shows me nothing in between the images, yet they are spaced out.
I can get them to stick together by applying negative margins, but according to me, they should be sticking together anyways.
There's space in your html code. Try below
<div class="image-group">
<img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>
Check out this blog post about dealing with spaces with consecutive inline-block elements such as images.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/