<div id="container" style="float:left;">
<img src="{{ p.sizes.2.url }}" width="200" height="auto">
<div class="trans_caption" style="position:absolute;background-color:#cccccc;">
Picture Caption
</div>
</div>
How do I overlay the caption on top of the picture...but aligned on the bottom? Also, I want the caption width to be the same as the container. I tried to do width:100%, but it didn't work...
Is that what you are looking for?
Just set position:relative in your main div - it will allow to position inner div relatively to the main div, and set bottom:0 in your inner div to position it on the bottom. Small hack with float:left and width:100%, without float width:100% doesn't seem to work properly.
<div style="position: relative; width: 200px;">
<img src="" />
<div style="position: absolute; bottom: 0;">
<!-- caption text here -->
</div>
</div>
<style>
div#container {
position: relative;
float: left;
}
div#container div {
position: absolute;
bottom: 0;
background: #ccc;
}
</style>
<div id="container">
....
You need to set position: relative on #container. That will make the absolute positioning relative to the edges of that container div.
Add bottom: 0; to .trans_caption to make the baseline (not the exact bottom) of the text aligned with the bottom of the picture. Increase that number if you want to move the text higher up.
Add width: 100% to .trans_caption to make it as wide as its container.
If you want to center the caption, add text-align: center; to .trans_caption.
Note that the auto value for an image's height attribute is not valid.
It's best to keep the CSS separate from the HTML markup, in a separate file. What we have now would be (try it out):
#container {
float:left;
position:relative;
}
.trans_caption {
background-color:#cccccc;
bottom:0;
position:absolute;
text-align:center;
width:100%;
}
Absolute positioning means that the element will be positioned at a specific spot on the last parent that is not positioned with the default, position: static.
Relative positioning is the same as static, except:
The Left, Right, Top, and Bottom nudge the positioning from their normal "static" position, and
Absolutely positioned elements will be positioned inside it.
All of that is to say that if you position your container as relative, the absolute positioning of the trans_caption will be in affect relative to your container, where now it is positioned relative to a more higher level container.
Also, absolute positioning will place your element at top: 0; left: 0; unless otherwise specified. You need to position your caption at bottom:0; to force it to the bottom of your container.
Your trans_caption will normally default to 100% width because <div> is a block-displayed element, so it makes sense that it didn't do anything with the example you've provided. This isn't the case with absolutely positioned items, however, so keep that line. If you then center the text within that <div> by styling it with text-align: center;, it should look the way you expect.
I think what you want to do is set the css background property on the container.
Something like this
<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>
Related
How is it possible to make a glass-pane (e.g. with hourglass) on an HTML element E, only within E's boundaries?
By glass-pane we mean, say a semi-transparent that has an hourglass, overlapping just the area in the E element boundaries. When the glass-pane is active anything in its background is inaccessible.
We tried using the uibModal lib, but it spreads all over the window, while we need to overlap only a specific element.
Thank you,
Rami
The trick here is using the mighty z-index property and some opacity.
Let's suppose you have a lateral element with 300px of width and 100vh of height:
<aside style="width:300px; height:100vh; float:right; z-index:1;"> </aside>
Now, all you have to do is to insert a div in it with position:absolute (to not interfere with the other objects of your div) and an higher value of z-index:
<aside class="parent">
<div class="pane"></div>
</aside>
CSS:
.parent{
width:300px; /*or your width/height settings...*/
height:100vh;
float:right; /*just for the example, you can set your div wherever you want*/
z-index:1;
}
.pane{
height:100vh; /*needed to fill your parent div*/
width: 300px;
z-index:2;
position:absolute;
opacity: 0.6; /*pane effect*/
}
This way, you'll end having a "watermark" on your div not clickable, and with a pane effect.
I am still new to web so this is kinda tricky for me. I have a class greenApple01
.greenApple01 {
width: 256px;
height: 256px;
background-image: url("fingertwisterimages/newimages/spritesheet_greenApple.png");
border: 1px solid red;
position: absolute;
top: 290px;
right: 130px;
}
And I have another div yellowApple03.
Now what I want to achieve is this:
How can I position yellowApple03 based on greenApple01's position? Also, I am developing for mobile and can you give me ideas on how to utilize media queries?
There will be no chance to position elements relative to each other if they're positioned absolutely as they are removed from normal flow.
If you have planned to align the elements vertically at the middle in the same line, you could simply display them as inline-block and then give vertical-align: middle; declaration to them for vertical alignment.
.greenApple01, .yellowApple03 {
display: inline-block;
vertical-align: middle;
}
You could play with margin if you want to add some spaces between those elements. For instance, assuming .yellowApple03 is placed after the .greenApple01:
.yellowApple03 { margin-left: 100px; }
Also mind the gap between inline-block elements which increases the actual space between elements and may causes a trouble.
absolute and relative positioning are very powerful and misunderstood concepts in CSS.
http://plnkr.co/edit/nzhONbfFRG17R44EHI5C?p=preview
In a nutshell, if you absolute position something, it will become bounded within the closest parent level element with a position other than default.
Eg 1.
<body>
<div class='parent'>
<div class='apple1' style='position:absolute'></div>
<div class='apple2' style='position:absolute'></div>
</div>
</body>
In this case the 2 apples will both be positioned relative to the body
Eg 2.
<body>
<div class='parent' style='position:relative'>
<div class='apple1' style='position:absolute'></div>
<div class='apple2' style='position:absolute'></div>
</div>
</body>
In this case the 2 apples will both be positioned relative to the div with the 'parent' class because it has a position value.
So, to solve what you want to do, just make sure your yellow apple is a child element of your green apple. That way your yellow apple will be positioned in relation to wherever your green apple is being shown.
<body>
<div class='content'>
<div class='greenApple01' style='position:absolute'>
<div class='yellowApple03' style='position:relative'></div>
</div>
</div>
</body>
I am having two IMGs on top of each other within a DIV like so:
<div class="container">
<img src="somepic.jpg" class="layer" />
<img src="otherpic.jpg" class="layer" />
</div>
With the following style:
DIV.container {
width: 400px;
height: 400px;
overflow: hidden;
z-index: 999;
display: block;
}
IMG.layer {
position: absolute;
}
Afterwards, I am casting some Dojo effects onto the images to fade one over the other and to scale them up, so that they will become larger than the DIV, which works all fine. But although I set overflow to hidden, I am seeing the entire images overlapping all the time.
So, how can I force the images to hide their overflow?
set the container to
position:relative;
That should make it work :)
Container should have css property position set to relative.
If it has this property set, the absolute positioned element inside the container will count position relatively from the container position and so it will not overflow it.
Nice day,
JB
I have several divs within a larger divs. Is it possible to position all these divs relative to the top left corner of the parent div? This will make positioning easier for certain tasks as all the inner divs' coordinates will be relative to the same reference point. At the moment using position: relative just offsets its position from where it would be at without being affected by position: relative.
Set the parent/containing div to position:relative. Then, set the child divs to postion:absolute. The children will then be positioned absolutely, but relative to the containing div, not relative to the overall page.
Here's an example: http://jsfiddle.net/jfriend00/GgNsH/.
HTML:
<div id"otherStuff" style="height: 100px; background-color: #777;"></div>
<div id="container">
<div id="child1" class="child"></div>
<div id="child2" class="child"></div>
<div id="child3" class="child"></div>
</div>
CSS:
#container {position: relative;}
.child {position: absolute; height: 10px; width: 10px; background-color: #777;}
#child1 {top: 10px; left: 10px}
#child2 {top: 30px; left: 30px}
#child3 {top: 50px; left: 50px}
Each child will be positioned at it's top/left value from the top/left corner of the container.
It works because that's how position: absolute works. It positions the element relative to the first positioned parent (a parent that has a position value of relative, absolute or fixed) or if no parents are positioned, then it uses the top/left corner of the document as the reference. This is not a trick, but how it's documented to work and it's extremely useful.
I have the image position fixed inside div and code is gven below
#content{
margin-top:100px;
width:900px;
color:#009;
border:1px solid red;
overflow:hidden;
display:block;
}
img {
float:left;
position:fixed;
top:140px;
padding:50px;
}
#text{
display:block;
border:1px solid green;
width:500px;
height:1200px;
float:right;
overflow:scroll;
}
#footer{
clear:both;
width:600px;
height:300px;
border:2x solid blue;
color:#939;
}
HTML is
<div id="content" >
<img src="bar.jpg" width="46" height="639" />
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>
<div id="footer">
Footer text
</div>
</body>
Now when i scroll down then image comes out of the content div box.
IS there any way so that even if i scroll the image bar should stay inside the div box.
The screen shot shows my problem
First Screen is ok without scrolling
alt text http://img293.imageshack.us/img293/8640/bar1k.png
But when i scroll the text full then it covers my footer as well
alt text http://img36.imageshack.us/img36/4393/bar2z.png
I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box
so you want that blue bar to stay within the red box, right?
if that's the case you need to have the css for the blue box as
img {
position: absolute;
top:140px;
left:50px;
}
and also the container has to have
#content{
...
position: relative;
}
position: relative will make the blue bar absolutely positioned with respect to #content rather than the document object.
position: fixed positions your image relative to browser window
If you want to position it relative to the parent div, you should use position: absolute
position: fixed
Generates an absolutely positioned
element, positioned relative to the
browser window. The element's position
is specified with the "left", "top",
"right", and "bottom" properties
In other words you can't "fix" your image inside of div only relative to browser window.
Follow-up:
If you want that image to always be on the same place in the background do it with CSS:
body {background: transparent url(bar.jpg) bottom left no-repeat;
background-attachment:fixed}
from what i see, just remove the position: fixed from your img tag styles
img {
float:left;
padding:50px;
}
I dont know if is just because you made a quick demo to show us, but never apply a style to a tag, its better to use ID's or Classes
if you want to keep a margin of 140 pixels from the top of the div containing the image, use:
img {
margin-top: 140px;
}