I am building a website here: argit.bounde.co.uk
I have been searching for hours to try and find the solutions. I am trying to build my own slider which will be fluid width so I cant define height / width where possible. I have got the bulk of the slider working with stock images however when I put elements underneath it they are 5px lower than they are meant to be. This happens in all browsers except IE that I have tested. I want to give the banner which is underneath my slider a negative top margin so that it will display over the slider but until I can figure out what is causing this 5px margin I cant.
The html is here:
<div id="slider">
<div id="sliderwidth">
<ul>
<li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
<li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
<li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
<li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
</ul>
</div>
</div>
<div id="sliderborder">
Things I have tried:
Removing all jQuery: didnt work.
Removing all CSS styling the slider: didnt work.
Setting img height to 300px: didnt work.
Setting li height to 300px: worded.
replacing imgs with divs 300px high: worked.
setting padding 0, margin 0 to every element in the slider: didnt work.
checked for validation errors: fully validated.
checked imgs are 300px high: they are.
checked every element in dev tools to check for any rogue margin/padding: none found.
I am literally out of ideas, any help would be greatly appreciated!!
There is nothing strange... Just add display:block to your images.
By default all images are inline-elements (inline or inline-block) and handled as a line of text. This space is where the hanging part of a y or gwould go. This very poorly explained but you get the idea.
div#slider ul li img {
width: 100%;
display: block;
}
just try with
div#slider ul img {
display: block;
width: 100%;
}
or
div#slider ul img {
vertical-align: top;
width: 100%;
}
since, by default, images are inline-block elements so they may need a proper vertical-align setting
All you have to do is just add vertical-align: bottom; like this:
div#slider ul li img {
width: 100%;
vertical-align: bottom;
}
For some reason, I just had a 5px margin at the top of my website and to the left side. I couldn't get rid of it... until I set the margin on the body element to 0. Problem solved. Hope this helps anyone that comes across this annoying issue. :)
Related
so i'm working on my css skills and trying to get an image from a sprite from youtube, so my code was like this
<div id="navbar">
<ul>
<li><span id="logo"></span></li>
</ul>
</div>
and my css is
#logo {
background: no-repeat url("http://s.ytimg.com/yts/imgbin/www-hitchhiker-vflNAOpbO.webp") -167px -205px;
width: 72px;
height: 30px;
background-size: auto;
}
and it won't work till i add display: inline-block; to the logo rule
so it was really confusing why do i need to set background-size to auto and why do i need display: inline-block at this certain example
okay so after researching i've found this
default value for a span for display is inline which would ignore the width and height given at this case which why the inline block worked
the default value for background-size is auto and it's fine as we are providing the width and height of the image so it's redundant here
sorry for rushing to post rather than spending decent time researching, thanks for understanding and hope it helped :)
sorry if this has been answered before, but I haven't been able to find it anywhere.
I am trying to create a sort of thumbnail gallery but I am having trouble setting the width and heights of elements in the html code. For some reason it works if I set the size in the stylesheet, but not in the code itself. I have been trying to figure this out all night and it's driving me nuts. I'm hoping it's something simple that I am misunderstanding. Any help would be greatly appreciated. Here's a link to a sample:
http://jsfiddle.net/4gupR/1/
CSS
.box {
display: block;
float: left;
margin: 0 20px 20px 0;
}
figure {
position: relative;
margin: 0;
padding: 0;
display: block;
}
HTML
<div class="box">
<figure width="800" height="800">
<img src="http://placehold.it/400x300">
</figure>
<figcaption>Caption</figcaption>
</div>
Just to clarify, it is important that I do this through the html code, and also, I need to set the size, and not just use margin, or padding…
As always, thanks so much for any help you can offer!
When you want to use inline styles, you have to use the "style" attribute.
<div style="property: value;">
http://jsfiddle.net/bZkYS/1/
The attributes should go on the img tag, not the figure tag.
<figure>
<img src="http://placehold.it/400x300" width="400" height="300">
</figure>
Most html elements don't support width and height as attributes, but you can still set their width and height via CSS either in your stylesheet or directly in the html in a style attribute:
<figure style="width : 800px; height : 800px;">
(You seem to be already setting display:block in your stylesheet.)
Having said that, img elements actually do allow width and height attributes, so you could set them on your img.
I have a page where the header is a gradient and on first load everything looks perfectly fine. When I refresh the page the gradient gets messed up and it seems like it puts in 2 gradients (1 really small) example below:
The first one is after a reload and the second is on first hitting the page.
The small gradient on top that I don't want is the same height as the padding in that div.
I've also noticed that imgs get resized on reloads like this as well and I've solved that by setting the height in css. I can't set the height in css because the height should be dynamic.
Can anyone explain to me why this might be happening and a way to solve it? I would really prefer a non-javascript solution because I already know how I might solve using jquery.
Some Code:
HTML:
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </a>
<div id="logo">
<img src="logo" alt="logo">
</div>
</header>
CSS:
header {
background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
max-height: 122px;
padding: 12px;
position: relative;
display: block;
}
header #logo img {
display: block;
margin: 0 auto;
}
header #settings-gear img {
height: 33px;
}
Well, it's difficult if we can't see a link or example, but the first think that comes to my mind is set the background as image and tell it to fit only the content with background-origin:content-box;. Try put that line into the header properties, and hope it helps. Note that the background-origin property don't work in IE 5, 6, 7 or 8...
I have been working on a project where i have to put together images of excel sheets. It should look like a unique table from all the images, where the last two should be side by side. I have tried to write something, but the space between images and the margins between the last two images are giving me headaches right now. Your help will be very appreciated.
//***CSS file
.crop img
{
height: 791px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 850px;
display: block;
}
.LeftTable
{
float: left;
}
.RightTable
{
float: right;
width: 400px; //when increasing over 400px, the image on right gets closer but goes underneath of the one on left side.
}
//**HTML file
<div class="crop">
<img src="QATables/image1.png">
<img src="QATables/image2.png">
<img src="QATables/image3.png">
<img src="QATables/image4.png">
<div class="LeftTable">
<img src="QATables/image5.png">
</div>
<div class="RightTable">
<img src="QATables/image6.png">
</div>
</div>
I would like to add to MathSquared11235's answer. It always helps to reset margins and padding. Let me say that again... it ALWAYS helps to reset margins and padding. Different browsers have different default margins and paddings, if you don't reset them, it will be impossible to make your website look the same among all browsers. And this could also be the problem you're currently facing as the browser you're using, may "add" unwanted margins or padding. And don't just reset them on a particular element such as suggested "div". I would recommended placing this at the top of your css...
// * { margin:0; padding:0; }
The asterisk (*) simply means "everything". So everything will have a margin of 0 and a padding of 0 until you add it yourself. Yes, you will need to add the wanted margin and padding to every element... but that's a good thing rather than allowing the browsers to individually decide that for you.
I hope this helps.
I'm not sure I completely understand what you're doing, but I've answered the question as best I could. If I misunderstood, please clarify and I'll try again.
Assuming you just want to make sure that the last image lines up perfectly with the second to last image, you can just change the float from right to left, here's a jsfiddle: http://jsfiddle.net/mcabrams/qB9fA/
// relevant code:
.LeftTable
{
float: left;
}
.RightTable
{
float: left;
width: 400px;
}
you need to set .crop{ width: 1700px; } and .right{ float: left; } it goes under because there are no space to put it next to the img of left.
jsfiddle: http://jsfiddle.net/2usCh/
If you are using Internet Explorer, know that it is very glitchy. I mean very glitchy. I read on another SO post which I, unfortunately, cannot find right now, that the cause of your glitch may be newlines in the HTML which IE very helpfully thinks are typographic spaces that you want to put into the text.
Also, you might do
div {margin: 0; padding: 0;}
if your layout permits. It will remove any space around the images.
Hope this helps!
I could find a work around for this if I wanted but it seems wrong and am trying to learn to code in a neater way.
Basically I have a div with 3 images in it, the div is 700px, and each image is 220px,
So thats 660px with two 20px gaps left and right of the centre image, and the outside images going all the way to their end of the div.
Is there a quicker way of doing this without setting up seperate ids for each image?
.contentpictureblock { float:left; }
.contentpictureblock img {
margin-right:20px;
}
<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
</div>
Doing the above^ pushes the third image to the next line, which is understandable. I know I could always make seperate divs for each image, and adjust the margins for each one but Im just wondering is there a quicker one off overflow type command that I could apply to the above? It would mean the right margin would be on all the images but would have no effect on its positioning in the last image.
Thanks for the help.
Use last-child selector:
.contentpictureblock img {
margin-right: 20px;
}
.contentpictureblock img:last-child {
margin-right: 0;
}
Modify the last image with an additional class:
<img src="..." class="last">
CSS rule:
.contentpictureblock img.last {
margin-right: 0;
}
Negative margins on the div.contentpictureblock will also do it. If there's a possibility that you will have more than 3 images, then this is what you will want to do.
div.contentpictureblock { margin-left: -20px; overflow: hidden }