<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>
<div id="content"></div>
CSS
#show01{
margin-top:14px;
position: relative;
height:auto;
border:thin solid blue;
}
#show01 img {
position: absolute;
max-width:70%;
}
#content{
background:#999;
height:45px;
}
img must be position:absolute because they are subject of jquery slide show.
but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.
So, how can I keep img position:absolute and show01 to have height as the img inside.
I cannot define div show01 height in pixels, because of keeping responsive layout.
fiddle is here
This is semi-hack(ish).. but you could set a margin for #show01.
Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.
Example
Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..
Related
I have thumbnail DIVS that are simply an image with the product name below. Here's the code:
<div class="thumbs">
<img src="IMAGE" />
<div>Product Name</div>
</div>
The CSS is below:
.thumbs {
float:left; width:210px; height:200px; text-align:center;
}
.thumbs div {
}
.thumbs img
{
max-height: 115px;
max-width: 100%;
}
Originally I had the images at 115px height so every row had the same height images and the text below was aligned correctly. Some of the images became too wide so I had to make a restriction on the max-width.
Problem: Since the image heights vary ... the text below the thumbnail varies in vertical placement. I want the text to be on the same line across the rows.
Example page:
http://test.pillarsoflifebook.com/banquettes/designer-banquettes/
*Note the first 3 thumbnails are the same height .. thus the names below them are aligned
Any thoughts?
You could solve this by wrapping the images in a div (or setting your anchor to display: block) and setting a max-height or height on that wrapper, and setting it to overflow: hidden.
Here's a jsFiddle example that will force the thumbnail blocks to always display the same regardless of the size of the image.
Edit: Updated example with some of your images.
Edit2: To vertically align the image inside the anchor, set the line-height of the anchor equal to its height (in this case line-height: 115px;), and set vertical-align: middle; on the img itself. Updated example including this fix here.
If you are using CSS3, you can use css3 translate property.
This Re-sizes based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
.thumbs {
width:210px;
height:200px;
position:relative;
display:inline-block;
overflow:hidden;
}
.thumbs > .thumbs img {
position:absolute;
top:50%;
min-height:100%;
display:block;
left:50%;
-webkit-transform: translate(-50%, -50%);
min-width:100%;
}
Example: http://jsfiddle.net/shekhardesigner/aYrhG/
Answer from CSS: How can I set image size relative to parent height?
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.
I am trying this:
there is a picture element Which is wrapped inside a container div
<div id="container">
<div id="a">
<img src="b.jpg" alt="b" />
</div>
</div>
Now I want to place the child elements such a way that the top and left of the picture is always 25% of the height & width of the container div. How can I achieve this?
If that is the only requirement, you can just do it by adding a padding on the inner div.
According to W3C, it those percentages should refer to the dimensions of the outer div.
Like margin properties, percentage values for padding properties refer
to the width of the generated box's containing block
http://www.w3.org/TR/CSS2/box.html
For the height, it will only work if your inner div is the only element inside your outer div (because the inner div will determine the height of the other). So for you example, it'll work.
Try this:
#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}
Here's a working fiddle: jsFiddle
Try:
#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }
Live demo: jsFiddle
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).