I have a problem with the padding or margin of images. I use a lot of images on my site and they are fill a div element so that there are like 8 in a line and in the next line 8 again.
Now I always get a weird spacing between them and I cant figure out why. I tried using negative values but I don't think that is the right way. That's why I am asking here.
I tried using dispay:block but that brings the pictures all in 1 row, which I don't want. I want them to be side by side until they reach the max-width of the div.
my code looks like this:
img {
width: 50px;
height: 50px;
/* display: block; */
padding: 0;
margin: 0;
}
Here a jsfiddle to express my problem: http://jsfiddle.net/cv5Xk/
img {
float: left;
width: 50px;
height: 50px;
/* prob. you dont need this */
padding: 0;
margin: 0;
border:0;
}
The difference between these two lines
<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'><img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>
<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'> <img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>
is that the 2nd one has a space between the two images and depending on the font it that space will vary.
The solution is to butt the images next to each other on the same line in the html code.
Use float: left;
img {
width: 50px;
height: 50px;
/* display: block; */
padding: 0;
margin: 0;
float:left;
}
Remove spaces between img tags and use css vertical-align:top
HTML:
<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>
CSS:
img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}
Related
My img won't integrate down into the page.
css for img:
dee {
display: block;
float: right;
border: 6px double grey;
width: 210px;
height: auto;
overflow-x:hidden;
background-color: #cad3de;
}
Img is nested within a section is this the problem?
Img of Problem
set margin: 0; on the img .. or your section has padding maybe.
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I'm working an a site and experiencing a weird issue with an image in a block element. When placing this image in a block, with all the padding and margins set to 0, there still as a space underneath the image. Here's the code:
<section class="page-block">
<div class="wrapper">
<img src="http://navelpluisje.nl/theme/navelpluisje/images/ik.png"/>
</div>
</section>
.page-block {
position: relative;
background: red;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 200px;
margin: 0 auto;
padding: 0;
}
img {
width: 200px;
background: white;
}
I've created a jsFiddle overhere with the problem.
I've tested it on windows and osx on several browsers and they all have the same issue.
Does anyone know where this comes from?
Thanx
You need to set the vertical-align top as demonstrated in the following JSFIDDLE.
img {
width: 200px;
background: white;
vertical-align:top;
}
Truth be told, I found this answer with the following SO Question. Which explains the following:
By default, an image is rendered inline, like a letter.
It sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like f, j, p and q.
You can adjust the vertical-align of the image to position it elsewhere.
Its caused by the default display property, inline, of img tag.
You can change it to block to get rid of that white space
img {
display: block;
}
reference for inline-block
Use below CSS Code:
CSS
img {
width: 201px;
background: white;
/* height: 100%; */
vertical-align: bottom;
}
I can't seem to figure out why this box is floating down a bit from alignment with it's neighbor. The same code is in use inside the main boxes for the content, so It's a big puzzling, and the parents have nothing special that should be messing with the alignment.
http://jordan.rave5.com/tmpstuff/
I tried vertical-align knowing it wouldn't work with the elements anyway. I'm just confused. Again!
CSS
.right-large-box {
float: right;
width: 300px;
height: auto;
padding: 0;
margin: 0;
vertical-align: top;
top: 0;
}
.left-large-box {
height: auto;
padding: 0;
margin-right: 310px;
vertical-align: top;
top: 0;
}
The top margin of 20px on .large-box is pushing it down inside its container. Remove that and it will sit at the top like you want.
You have declared float: right; inside the .right-large-box class, you should apply float for .left-large-box class too. So it should be:
.left-large-box {
float:left; /* add this one */
height: auto;
padding: 0;
margin-right: 310px;
vertical-align: top;
top: 0; /* this one actually can be removed */
}
I think you also can remove the top:0; unless if you have set position:relative/absolute to those classes.