Here is the HTML code
.Box {
position: absolute;
bottom: 60px;
right: 0px;
left: 65px;
display: block;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
When I view this box on larger resolution (2560*1440) it expands both right side and left side. I tried using the width attribute which fixes the box from right side but the fix width hinders the responsiveness and the box width doesn't change with the length of the text within.
How can I make this Box div stay in same position in any screen size using either CSS or Javascript, also making it responsive as per the length of the content in it?
Just need to remove the right and max-width and then the width will adjust based on the content.
.Box {
position: absolute;
bottom: 60px;
left: 65px;
display: block;
background-color: #fedd2d;
padding: 15px;
opacity: 0.8;
}
right:0; seems to be in the way. it will pull container all the way to right side, but max-width is set too, so it stops at 60% of width as set. You rules are not coherent together.
since absolute, display is not really needed.
unless i missunderstand and max-width is in the way , ... or else ?
.Box {
position: absolute;
bottom: 60px;
left: 65px;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
`
I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle
You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/
I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/
Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!
I'm coding an image overlay w/ jQuery, and I got it working (somewhat). If you hover over the first image, it successfully appears; however, if you hover over the second one, it doesn't even work. I don't even know what the problem is! I think it has to do with unique IDs or whatever. I tried classes, and it didn't work.
Here is the fiddle :: http://jsfiddle.net/PFWcz/7/
$(document).ready(function () {
$('.overlay-link').mouseover(function () {
$(this).find('.overlay').fadeIn(200);
}).mouseleave(function () {
$(this).find('.overlay').fadeOut(200);
});
});
There are a few issues. As esqew pointed out, you're using the same IDs, which must be unique.
Addressing that, you'll still see the "same" overlay in your fiddle (http://jsfiddle.net/PFWcz/7/), but it's actually not - you're just now seeing a positioning issue.
Take a look at this fiddle:
http://jsfiddle.net/PFWcz/10/
You'll notice that when you hover over the first image, the red overlay is "1", and when you hover over the second image, the overlay is "2".
Previously (with the "helloooooo" text), the red overlays appeared the same (because of the content and positioning)...
Address the ID and position issues, and it should work.
Here's a fiddle demonstrating fixed position and ID:
http://jsfiddle.net/PFWcz/16/
The main changes is giving the container (<div>) positioning:
div {
float: left;
margin: 30px;
position: relative;
}
Also, I removed offsets (left, top) and floats, applying those to the parent container. A quick, simple fix.
You need to make your overlay-link elements your containers from which child elements inherit positions.
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
Your overlay-link class needs to have position: relative and will define the position and size of it and its children:
.overlay-link {
position: relative;
display: block;
width: 292px;
height: 219px;
margin: 30px;
}
Any child inside needs to have position: absolute and its width and height set to 100% of the container:
img {
position: absolute;
border-radius: 2px;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.overlay {
background-color: rgba(223, 71, 71,0.70);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
display: none;
text-align:center;
}
Now when you hover over an element, it will create the overlay over that element and not the other one as you were experiencing earlier.
Jsfiddle: http://jsfiddle.net/PFWcz/14/
You're using the same id, which must be unique. Use the class attribute.
As some of the answered already said there is issue with the id's, I don't want to repeat. Since you have a multiple place where you want to show some text on rollover, using class would be a better solution/way to go ahead with.
Here is the change I did in the fiddle:
.overlay-link { /*This class is added. Since an absolute positioned element places itself relative to its parent who is either a relative positioned element or an absolute positioned element. I made the parent of the .overlay div relative.*/
position: relative;
background-color: #ff0;
}
.overlay {
position: absolute;
background-color: rgba(223, 71, 71,0.70);
left: -322px; /*Positioning the .overlay element based on its parents left*/
width: 292px;
height: 219px;
border-radius: 2px;
top: 30px;
display: none;
text-align:center;
}
.overlay i { /*There is no .shot element in the DOM. I replaced it by .overlay*/
background-color: #df4747;
border-radius: 999px;
padding: 10px;
width: 60px;
height: 60px;
color: #fff;
font-size: 30px;
top: 80px;
left: 116px;
position: absolute;
display: block;
}
This is based on my understanding. Let me know if it works.
Here, this is what you want
Fiddle: http://jsfiddle.net/D33Yk/
$(window).on('load',function () {
$('.overlay-link').mouseover(function(){
var overlay = $(this).children('.overlay');
var img = $(this).children('img');
$(overlay).css('left',$(img).offset().left);
$(overlay).css('top',$(img).offset().top);
$(overlay).css('width',$(img).width());
$(overlay).css('height',$(img).height());
$(overlay).fadeIn(200);
}).mouseleave(function(){
$(this).children('.overlay').fadeOut(200);
});
});
Because you had the overlay positioned absolutely in CSS, both overlays always covered the first image. I now set the left, top, width and height in JS, so the overlays cover their respective image.
I also changed this in CSS:
.overlay {
display: none;
position: absolute;
background-color: rgba(223, 71, 71,0.70);
border-radius: 2px;
text-align:center;
}
removed the top, left, width, height
...and this in HTML (I changed both, but I only show one since they are identical):
<div>
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
</div>
changed all the id's to classes, and removed id where it was not necessary
I have 2x Divs and 1x Img with the following CSS
#StageDiv {
position: absolute;
left: 50%;
margin-left: -200px;
}
#LogoDiv {
position: absolute;
margin-top: 135px;
left: 50%;
margin-left: -500px;
}
#logoimg {
/* max-width: 75%; /* */
width: 1000px; /* */
}
inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes
http://jsfiddle.net/3KLUW/1/
Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.
Thoughts?
Edit:
window.onresize=function(){
var img = document.getElementById('logoimg');
var width = img.offsetWidth;
var div = document.getElementById('LogoDiv');
div.style.marginLeft= "-" + width/2 + "px";
};
still would be interested in a CSS solution
If you can get away with a wrapper div for the whole logo:
<div id="logo">
<div id="StageDiv">...</div>
<div id="LogoDiv">
<img id="logoimg" src="..." />
</div>
</div>
Then you can set the width and max-width on it, and use margin: auto to center it on the page:
#logo {
width: 1000px;
max-width: 75%;
margin: auto;
position: relative;
}
And positioning the other elements become much easier:
#LogoDiv {
top: 135px;
position: absolute;
}
#StageDiv {
text-align: center;
}
#logoimg {
width: 100%;
}
The margin: auto and text-align: center together give us the automatic margin you wanted.
Updated fiddle: http://jsfiddle.net/3KLUW/2/
The canvas will need to be scaled though, as you said on the question.
I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;