I've got this gallery I'm currently building, and I'm trying to work out how to get my images to fill their containers.
I don't mind if they're cropped a little, I just would like them to fill the the full height and width of their parent element .thumb.
My HMTL looks like this:
<ul class="thumbs">
<li class="thumb">
<img src="/img.jpg">
</li>
...
</ul>
And my CSS like this:
.thumbs .thumb {
background: red;
height: 33.5294118%;
float: left;
width: 50%;
overflow: hidden;
z-index: 0;
}
I've got a demo set up over here: http://codepen.io/realph/pen/hjvBG
If anyone could point me in the right direction, I'd really appreciate it.
Thanks in advance!
Try adding .thumb a to your .thumb img definition (so the a element is 100% width as well) - you may also have to make one or both (a/img) tags display: block and height 100% as well
You can try adding a class to the img element, like:
<img src="/img.jpg" class="img-class">
and the css.
.img-class{ width:100%; height: 100%; }
Related
For website:
http://68.50.243.1/wunhopkuendo/
I am trying to make the image carousel show UNDER the green banner on the top left. If I set z-index on the carousel to -1, the left/right buttons don't work. However if I set z-index to 999999 on the banner, it does not appear over the carousel. How can I accomplish this? Thanks!
JS Fiddle located:
http://jsfiddle.net/3ZSBh/
Just add position: relative for the image.
<a class="brand" href="#">
<img src="http://68.50.243.1/wunhopkuendo/img/logo.png"
style="z-index: 99; position: relative;" />
</a>
The reason behind this is, the z-index works only on positioned elements, that are not static.
Fiddle: http://jsfiddle.net/3ZSBh/1/
The 'z-index' tends to work on elements that have the same type of position applied.
http://jsfiddle.net/CqnH4/1/
You can apply the following to your CSS:
.navbar {
position:relative;
z-index:999;
height: 50px;
background:#ff0;
}
#content{
position:relative;
z-index:1;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
This would keep the navbar on top of the content...of course, you don't need to specify a z-index of 999...you could simply go with a value of 2.
I have two banner images, each of them has the same height but different width. Each one of them is nested in <a> tag (to make the images open a link) and the <a> tags are nested in <div> tag.
My problem is, I need these two images to sit next to each other and automatically adjust to the width of the <div> tag so that they fill exactly 100% of the <div> width, keeping the ratio of the individual image widths the same. The div tag is fluid (it resizes with the size of the screen) and I'd like these two images to be automatically adjusting so that they always fill exactly 100% of the div width. How do i do this using css.
Here is my html:
<div class='banner'>
<a class='mainBanner' href='Help.php?title=Help'><img src='banner1.png' alt='mainBanner' /></a>
<a class='openAccount' href='Profile.php?title=Registration'><img src='banner2.png' alt='openAccount' /></a>
As long as your images are not dynamic (ie. you know the widths in advance), you could do it like this:
<div class='banner'>
<a class='mainBanner' href='#'><img src='http://placekitten.com/200/200' alt='mainBanner' /></a>
<a class='openAccount' href='#'><img src='http://placekitten.com/300/200' alt='openAccount' /></a>
</div>
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a:first-child {
width: 40%; /* this image is 200px wide */
}
.banner a:last-child {
width: 60%; /* this image is 300px wide */
}
.banner a img {
width: 100%;
height: auto;
}
The combined widths of the sample images is 500px, so your percentages are 200 / 500 = .4 or 40% for the first and 300 / 500 = .6 or 60% for the second.
I would use percentage and float the images like so DEMO http://jsfiddle.net/kevinPHPkevin/6H4cV/
.clear {
clear:both;
width:100%;
}
.banner {
width:100%;
background:#000;
}
.mainBanner img{
width:70%;
background:#ff0;
display:block;
float:left;
}
.openAccount img {
width:30%;
background:#ccc;
display:block;
}
You'll have to use (or simulate) tables! :D
I didn't touch much of your html. I removed the white-space between the 2 <a> and I enclosed it in another div (with the class derp).
CSS :
div.derp {display:table; border:1px solid green;width:100%}
div.banner {background:light-blue;border:1px solid blue;display:table-row}
a {display:table-cell;border:1px solid red;}
img {display:block;width:100%}
And I made a demo too!
I would use:
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a img {
width: 100%;
height: auto;
}
this way the two image width can have always different widths, as long as they have the same hight.
demonstration - resize result display to see the effect.
Hope it helped you!
height the same, different widths?
ok, so if you now two widths of this images too just make the percent and float left. For example if one image is 200px wide and another 300px wide just give 40% and 60% for both a (don't forget to add them also display block or even display inline block without float left) and give width 100% for both img's. if you don't know the width, you need to use javascript unfortunately.
very pseudocode because I am really tired.
a1.width = img1.width/(img1.width+img2.width)*100+%
a2.width = img2.width/(img1.width+img2.width)*100+%
and of course a - display:block and img's width:100%.
or something like this if you would like I can write it tomorrow but I am not sure is this answer you are looking for, so I am not doing it now.
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
i am trying to code an html with 2 divs inside a div.
There is a parent div with no width or height.. the width is the browser width and the height is not specified.
I want inside this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it.
Now i was trying to make it like this:
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
</div>
and the css like this:
#calendar {
margin: 0 auto;
position: relative;
overflow: hidden;
}
#calendar #list {
background: #f00;
position: absolute;
width: 250px;
left: 0;
top: 0;
}
#calendar #grid {
background: #0f0;
position: absolute;
left: 250px;
top: 0;
right: 0;
}
now the problem is, the parent div doesnt resize when i add content to the children divs
I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.
Thank you in advance,
Daniel!
Here's my solution -> http://tinkerbin.com/Z8mJmItU
Float the #list with its given width, then give #grid the same margin-left.
Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.
You need to specify a height if you are going to use absolute. Then it should work.
EDIT
use
position: relative;
on the child elements.
EDIT 2
Perhaps this post would help with what you are after? Div width 100% minus fixed amount of pixels
Don't use positioning, use float ... with your current method the parent will collapse and the only way to determine the required height of the parent, would be to calculate the height of the highest child element (typically, with JavaScript).
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
<div class="clear"></div>
</div>
... and the CSS ...
#calendar {
margin: 0 auto;
position: relative;
}
#calendar #list {
background: #f00;
float:left;
width: 250px;
}
#calendar #grid {
background: #0f0;
margin-left: 250px;
}
.clear{
clear:both;
}
This way the #calendar will adjust in height to the tallest child element. Also remember to remove the overflow rule.
... the above for the sake of being brief, you should probably look at using clearfix (by adding a class to #calendar) - read more here.