This question already has answers here:
Move onmouseover images to the left?
(2 answers)
Closed 5 years ago.
Here is my page: http://www.ostmoconstruction.com/portfolio.php
If I hover over the first image in each row, the resulting image is the full size of the div and therefore, pushes the second image outside of visibility.
I would like the same thing to happen when I hover over the second image. Perhaps it would push the first image outside the left side of the div layer and display only the second image. I tried setting the positioning to absolute onhover and left: 0; and this seemed to work, but also seemed unstable and left the title of the first image in tact (sometimes conflicting with the title of the second).
Any ideas?
I have the one solution Conflicting Title you can try :
p a {
background:#FFFFFF;
}
I ended up making the image's position absolute and wrapping it in a relatively positioned div layer then gave both negative left margins to align then correctly. The absolute positioning allowed my to bring it to the left and the relative positioning allowed my to push the other image outside of the container div. More info here: Move onmouseover images to the left?
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
Given the following example, https://jsfiddle.net/mzv4nxo8/,
I want to position the image in the top right corner over the div rectangle, like I've shown in the example. This works fine as long as the div container does not overflow.
However, when you start scrolling, the image moves as well since the image is set to position: absolute. I want it to stay "anchored" to its initial position (i.e. before you start scrolling). The text inside the div rectangle needs to stay in the center position.
How do I accomplish that?
position: absolute positions the element according the the closest parent that has the position property different from the default value static.
Add this to your css and it will work
div {
position: relative;
}
I guess you can also use your .content selector
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 2 years ago.
I'm just playing around with the border/content box CSS properties in the very early stages of learning.
Trying to make the two boxes line up next to one another- I've achieved it with using the float left and right properties.
However, when I use display inline, it causes an overlap with the above block element h1. I've displayed it as a table here, so the background colour I've set on it only spans the width of the content, but that shouldn't change the fact that it is still a block element.
More than the overlap, display: inline on the div causes the boxes to shrink in size as well.
Can anyone explain why this is happening?
Please see the code here: https://jsfiddle.net/gouvrze1/
Only block elements respect width and height rules. Inline elements just flow with their text content. The overlap is caused by the padding and the fact that the divs are further down in the DOM, so they're drawn after and on top of previous elements.
Try changing your divs to display: inline-block instead.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is there a pesky little space between <img> and other elements? [duplicate]
(2 answers)
Remove white space below image [duplicate]
(9 answers)
Closed 5 years ago.
Take for example this fiddle: https://jsfiddle.net/ou33muc2/
<div class = "overallDiv">
<div id="example"><img src = "http://writingexercises.co.uk/images2/randomimage/slimy.jpg" style="width:100vw; opacity: 0.5;"/></div></div>
I fail to understand why there is no gap between the div surrounding the image and the image on the top, left and right, but there is a gap on the bottom as shown by the red border.
Moreover, how can I remove this, so that the div fits snugly around the whole image?
Edit: I know it might seem a bit pointless having a div around a div around an image, but this is a scaled down problem where the question still applies, so please ignore the practicalities of it.
Because the image is vertically aligned at the baseline - where text usually would be placed. And there's space below the baseline, for letters with "descenders" like j, g, p etc.
To avoid that, just add line-height: 0; to the container:
https://jsfiddle.net/5czathrh/1/ (edit: updated)
It's the text descender space (the area below the "baseline"). If you set display: block on the image you can lay it out with more traditional margin/etc values.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
I have 3 input fields and one of them I want a caption to go under. I have the input fields inside their own div and each divs are set to inline-block. As of now the middle input box raises higher than the left and right ones because of the caption below it. I am trying to push the input box down a little, but the other input boxes keep moving down with it, even though they're inside their own divs. I usually would do this with a table, but I am trying to understand divs more and positioning them.
Can someone please point me in the right direction?
I tried putting a child div in each and the input in each child div, and then setting the child div relative to the parent div, but it keep behaving the same way - each time I give a margin-top on either the div or the input field the other input fields move too, and nothing (that I know of) is set to make this happen other than defaulted this way.
Use:
vertical-align: top;
Fiddle:
https://jsfiddle.net/ot2ojahb/
If you want to move them all down, add a padding-top to the div
I am attempting to position an image in the lower right hand corner of a div without using absolute positioning. I don't want to use absolute positioning because the text wrap then fails (as I have float right applied to the image, and I want to have text wrap applied). If I place the image inside the div, I have to place it after a closing p tag to get it to somewhat work. I don't want to use this method as the bottom of the image and the end of the text does not line up at the bottom.
any ideas?
.bottom-right-img{position:relative;width:203px;height:277px;float:right;margin-left:15px;}
.right-col{position:relative;width:410px;margin-top:15px;text-indent:15px;margin-right:61px;}
https://jsfiddle.net/qoy8tz7x/1/
Based on your jsfiddle, would the following work? I changed the position to bottom-right.
.bottom-right-img{position:bottom-right;width:203px;height:220px;float:right;margin-left:15px;}
.right-col{position:relative;width:410px;margin-top:15px;text-indent:15px;margin-right:61px;}