Hey guys i need help with some css i have some images that expand when i hover over them but it pushes everything away at the same time
<style>
.box
{
width: 750px;
height: 1000px;
border:1px solid green;
}
.enlarge-onhover {
width: 125px;
height: 125px;
}
.enlarge-onhover:hover {
width: 225px;
height: 225px;
}
</style>
I dont want it to do that i want it to just overlap the rest of the images and to expand on a left click rather than hover
One way you can do this is to use Absolute positioning.
The problem is, as you're hovering, your changing the sizes (width and height), so it will move everything across and re-render the page.
You could use javascript (jquery to do this for you) if you wanted it to happen onclick.
You would have to put position: absolute; on your image for it not to disturb other elements.
$(".enlarge-onhover").click(function() {
$(this).css({width: 255, height: 255});
});
If you just want it to happen on hover then just add position: absolute; to your image's css.
If you are not using jquery and just pure javascript you can achieve the same thing by doing;
var img = document.getElementById("myImg");
img.addEventListener("click", function() {
img.style.width = "255px";
img.style.height = "225px";
}, false);
The above assumes of course that your image has an id of myImg.
As well as positioning the images along the X and Y axes, you can also set Z axis to make elements appear one on top of another.
I think the solution is to increase the z-index of the element on hover as
z-index: 50;
You will need to reset the z-index to 0 once the user un-hovers
This when combined with setting the position of the hovered/enlarged image to look like the thumbnail is enlarging, will do the trick for you.
You can read more about z-index here:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I'm having some trouble getting a specific look that I am after.
I have the basic Wordpress Twenty-Fifteen theme applied and I'm trying to get a 200px wide red bar to appear down the right hand side of the screen.
The bar is made of a 200x1px image that is repeated.
The problem is:
A.) If I set this as a "Background-image" then the repeat works, but
I cannot get the image on top.
B.) If I set the image as an IMG
inside of a DIV, then I can get the image on top, but not to repeat.
Can anyone help me combine these 2 into one result, repeated image-y and image on top?
You can see my site here: http://u64.ca/
Try this, add it to your css.
This will affect everything the comes directly inside the #main tag.
#main > * {
margin-right: 200px;
}
Or you could apply a border right to the .site-content and lose the background iamge.
.site-content {
border-right: 189px solid #db0f12;
}
I'd use a pseudo-element something like:
main {
position:relative;
}
main:after {
content: "";
width: 189px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #DB0F12;
}
I might me using the terms absolute and relative wrong, but hopefully you get what I mean. I want to give my footer some "bottom: 10px" so that it stays at the bottom of the page, no matter if the page's content is more or less than 100% of the browser window. I tried positioning it absolute but it will be positioned relative to the browser window then, not the body.
This is an example: http://public-demo.webflow.com
Any ideas? Thank you :)
add this to the body
position: relative
and add this to the footer
position: absolute
This way the footer will be positioned accordingly to the body
It would be good if you set the bottom to 0px.
If you want to fix this kind of problem, you can inspect your element with Mozilla, and play your code there.
FOOTER TO STICK BOTTOM IF CONTENT IS SMALLER THAN THE VIEWPORT and BEHAVE NORMAL IN OTHER CASE
You'll need a tiny JS for that.
$(function () {
var bht = $('body').height();
var wht = $(window).height();
if (bht < wht) {
$('#footer').css("position", "absolute");
$('#footer').css("bottom", "10px");
}
});
Check this fiddle - http://jsfiddle.net/3N4L9/4/
FOOTER TO STICK TO BOTTOM IN ANY CASE
This will generate same output as required :
Like page 1 : http://jsfiddle.net/3N4L9/1/
Like page 2 : http://jsfiddle.net/3N4L9/2/
It'll keep footer on the bottom of page irrespective of content and scroll.
.fixedFooter{
width:100%;
position:fixed;
bottom:10px;
}
That should work
.footer-text {
background-color: rgba(0, 0, 0, 0.49);
bottom: 10px;
color: white;
left: 0;
margin-top: 10px;
position: absolute;
right: 0;
text-align: center;
z-index: 999;
}
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
Can this be done?
EDIT
Okay so clearly my original question was extremely confusing. Here is a picture;
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
The easiest way is simply using CSS:
height: 100vh;
Where 'vh' stands as vertical height of the browser window.
Responsive to resizing of brower and mobile devices.
Give body,HTML & main DIV height 100%. write like this:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
The answer from #sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
Normally, I need the same structure as you design:
1. the content should stay inside the container without overflow scroll, and
2. the container should resize as 100% while the browser is resizing.
So the basic way of doing it is:
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
html, body {
width: 100%;
height: 100%;
}
NOTE: there could a margin/padding issue for some browser (as user agent stylesheet):
which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}
<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>
Add overflow:auto to the wrapper element.
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.