I wrote picture width in property class to put price 15 pixels from the right edge of the picture.
Now right works correctly, but if I remove it, price will be placed at 15px from the right edge of page..
html:
<div class = "property">
<img src = "http://preview.byaviators.com/template/realia/assets/img/tmp/property-small-1.png"/>
<div class = "type">House</div>
<div class = "price">90 000 €</div>
</div>
css:
.property {
position: relative;
width: 270px;
}
.price {
position: absolute;
bottom: 15px;
right: 15px;
}
Can you suggest a way, in which I will avoid writing of picture width and right will work as it should be? Thanks, p.s. code
You can try this https://jsfiddle.net/ht80y82y/1/
CSS
.property {
display: inline-block;
position: relative;
width: auto;
}
div element(.property) has display:block; by default. It means the element width will be inherited from its parent. However, you can solve your problem by giving display:inline-block; and so on.
Jsfiddle
Or change div to span.
Jsfiddle
Related
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
Here's my scenario: I have a few divs that must stack on top of each other. Each div will have a background color (or texture.) Each of the divs has another div nested inside of it. The parent div's color or texture extends the entire width of the screen.
Problem: When adding the second div, it appears above the first.
See what I'm talking about at: http://staging.ontempoideas.com/bvcil
It looks something like this...
HTML:
<div id="1P">
<div id="1C">
</div>
</div>
<div id="2P">
<div id="2C">
</div>
</div>
CSS:
#1P {
position: absolute;
left: 0;
right: 0;
background-color: blue;
}
#1C {
width: 920px;
margin-left: auto;
margin-right: auto;
}
#2P {
position: absolute;
left: 0;
right: 0;
background-color: green;
}
Any thoughts?
To be honest, I'm not sure exactly what you're after from your description, but I put some code here that may help: https://jsfiddle.net/JTBennett/hksxgncv/1/
These are the positions you want to be using here:
position:relative;
position:inherit;
Your two parent divs are set at the same exact absolute position. If you want to clarify anything, I can update it for you.
I've been googling this all morning and can't seem to get it to work:
I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute.
I need the parent DIV's height to stretch with the content of the inner DIV's.
I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.
CSS:
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
position: absolute;
}
#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}
HTML:
<div id="content">
<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->
<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->
<br style="clear:both;">
</div><!-- /content -->
Dark side of the force is a pathway to many abilities some consider to be unnatural.
$(document).ready(function()
{
var objHeight = 0;
$.each($('#content').children(), function(){
objHeight += $(this).height();
});
$('#content').height(objHeight);
});
clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.
Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
Instead, try floating them then have a div with clear: both; after them.
I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!
Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....
Hope this will help someone else.
You do not need position: absolute for this task.
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
float: left;
}
#rightcol {
width: 270px;
position: relative;
margin-left: 510px;
text-align: center;
}
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
I've been googling this all morning and can't seem to get it to work:
I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute.
I need the parent DIV's height to stretch with the content of the inner DIV's.
I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.
CSS:
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
position: absolute;
}
#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}
HTML:
<div id="content">
<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->
<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->
<br style="clear:both;">
</div><!-- /content -->
Dark side of the force is a pathway to many abilities some consider to be unnatural.
$(document).ready(function()
{
var objHeight = 0;
$.each($('#content').children(), function(){
objHeight += $(this).height();
});
$('#content').height(objHeight);
});
clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.
Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
Instead, try floating them then have a div with clear: both; after them.
I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!
Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....
Hope this will help someone else.
You do not need position: absolute for this task.
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
float: left;
}
#rightcol {
width: 270px;
position: relative;
margin-left: 510px;
text-align: center;
}