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 :)
Related
I'm not one to usually ask, but I cannot seem to get this done using CSS/CSS3.
Note, i'll be happy even with a not-so-supported CSS3 style, like resize.
The jsFiddle for it.
The current unresizable code:
HTML:
<div id="boxes">
<a id="about1" class="aboutbox" href="/property-for-sale">
</a>
<a id="about2" class="aboutbox" href="/why-cyprus"> </a>
<a id="about3" class="aboutbox" href="/why-zantis"> </a>
<span class="stretch"> </span>
</div>
CSS:
#boxes {
padding: 70px 0 70px 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.aboutbox {
padding: 0;
margin: 0;
display: inline-block;
*display: inline;
zoom: 1;
width: 320px;
height: 225px;
vertical-align: top;
text-align: left;
background-size: auto auto;
}
#about1 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
If you resize the html panel, you'll see that they float as expected. I'm using a common method to distribute them equally along the parent div. I'm also using CSS to create a image button with hover effects (don't ask about the nature of the graphics ..).
I'd like to get these to resize accordingly when the html panel is resized; i.e. get the actual button to scale down and remain in one line.
I've got a working solution with jQuery, but spent my time getting this without it and got nowhere. Any ideas?
tia.
Aspect ratio
The main issue here is maintaining the relative dimensions of the images (the aspect ratio). A couple potential ways to do this without using JavaScript or jQuery are as follows:
Using foreground images (img tags).
Using calc() to make the height of the image wrapper be a fixed % of its width.
I didn't have much luck with calc(). The closest I got was attempting to make the height a fixed % of the viewport width (using the vw unit). It didn't seem very promising. I can't entirely rule out a solution being possible using calc(), but so far the only obvious CSS solution for maintaining the aspect ratio requires the use of foreground images.
Updated Demo
Hover state for foreground images
Achieving the hover effect using foreground images is fairly simple. Add a pair of images to each image wrapper, and apply the :hover pseudo-class to the wrapper to turn each image on or off as needed.
<a class="aboutbox" ...>
<img class="off" src="..." alt=""/>
<img class="on" src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox img.on { display: none; }
.aboutbox:hover img.on { display: inline-block; }
Justifying images
The trickiest part of justifying the images is that there needs to be some whitespace between the image wrappers (in the HTML source code) for the justification to have a chance of working, for the same reason that words in a sentence need to have whitespace between them (otherwise, they'll be treated as a single word).
But whitespace between inline-block elements in the HTML source code causes 3-4px of horizontal spacing to be added between the elements (with no CSS solution available for avoiding it that's truly cross-browser and safe). That extra space, although necessary for the justification to work, is mostly likely unwanted visually and may prevent all of the images from fitting on the same line in some cases.
Here's an initial demo with a crude solution: limiting the width of each image to 31%, to allow enough room (on most screen sizes) for the whitespace between the image wrappers.
The other issue with justifying the images is that, as with text, justifying images only works if the content spans at least 2 lines. One workaround for this is to add a span tag at the end of the content with display:inline-block and width:90%. The initial demo demonstrates this.
#media queries
It's worth noting that the justification is only needed when the screen is wide enough to allow extra space between the images. #media queries can be used to only apply the justification on large screens. On small screens, the image wrappers can be floated so that there's no extra space between them.
Updated demo using #media queries
One solution is to replace the background image with an actual image. And use css to control what image is displayed, and to resize based on the containing elements. So you wrap each link in a div, which re-sizes based on your boxes container. Using css you set the image url using the content: selector.
http://jsfiddle.net/CPNbS/6/
Your resulting html looks something like:
<div id="boxes">
<div class="link" id="about1">
<a class="aboutbox" href="/property-for-sale"><img /></a>
</div>
<div class="link" id="about2">
<a class="aboutbox" href="/why-cyprus"><img /></a>
</div>
<div class="link" id="about3">
<a class="aboutbox" href="/why-zantis"><img /></a>
</div>
</div>
and the css:
.link{width:30%;height:100%;border:1px solid green;display: inline-block;
*display: inline;
zoom: 1;}
.link a{padding: 0;
margin: 0;
display:block;
width: 100%;
height:100%;
vertical-align: top;
text-align: left;
background-size: auto auto;}
.link a img{max-width:100%;}
#about1 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
You could also use a responsive design technique by including media queries. But this is more for different devices rather than re-sizing, so does not look as 'fluid'.
Hope this helps...
To do this with background images as you've set it up, you have to get rid of the width setting on the each item, and size the background image with background-size: 100% 100%; To maintain the height to width proportion of the .aboutboxes, use the intrinsic ratio method here with a percentage based padding-bottom. More here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
.aboutbox {
position: relative;
padding-bottom: 70.3125%;
display: block;
width: auto;
height: 0;
background-size: 100% 100% !important;
}
If you'd like you can include a max-width or padding on the wrapper to limit how far they stretch.
Updated your fiddle here: http://jsfiddle.net/carasin/s4pUe/11/
Just be aware of some limited IE support of background-size: http://caniuse.com/#feat=background-img-opts
#boxes {
white-space: nowrap;
}
boxes a{
display:inline-block;
width: 33%;
background-size: cover;
}
but I'd rather use img tag see http://jsfiddle.net/Vicky_007/GZMvT/14/
and you can also emulate table:
#boxes {
display: table;
width: 100%;
table-layout:fixed;
}
#boxes a{
display:table-cell;
background-size: cover;
}
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. :)
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!
<div id="top">
*height: auto;
min-height: 100%;*
<div id="content">
*min-height: 500px;*
</div>
<div id="middle">
*css ???*
</div>
</div>
<div id="footer">
</div>
This code works nice when the screen size is normal. But in full screen mode, the footer goes to the bottom of the page (wanted behaviour) but the ''middle'' div must increase its height to get the footer. I mean, the 3 elements (content, middle and footer) must be continuous.
Which css rules should I use to do this behaviour?
Thanks in advance!
UPDATE.
I've used a couple css rules and works, but don't in IE8 (works in IE9, Chrome, FF3 e FF4). The relevant CSS is:
Top{ height: auto; }
Content{ min-height: 100%; }
Middle{ overflow: auto; padding-bottom: 130px; }
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }
You might try CSS Media Queries with max or min-height. Examples here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
and documentation here: http://www.w3.org/TR/css3-mediaqueries/
height:100%; should be all that is needed to make it take up the available space.
The Bad News: To be honest, mate, I don't think this is possible with this exact specification. It would take some very clever css at any rate. However, tables would work nicely. I'm completely against the idea, but if this design requirement is a must, then perhaps you should go the route.
The Good News: Depending on why it is you need them to be fluid, we could maybe give the desired effect. If it's just for backgrounds to match up, we could probably do that. Update your post with more information and I'll (hopefully) update mine with an answer.