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>
`
Related
I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
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%;
Is it possible to use overflow: scroll on a div that has height set to auto?
I have a div with an unordered list inside of it. The amount of items in the list is variable so there is no way I can use a fixed height. The div that contains the unordered list is where the scrollbars need to be, here is my code:
#page {
height: auto; /* default */
overflow-y: scroll;
overflow-x: hidden;
}
As stated, the unordered list is contained within the #page div. The height of the page is assigned by the unordered list's value. Is there a way to make overflow: scroll work on a div with variable height like this or must I use JavaScript to do this?
Thanks
One way of approaching this design...
Suppose that you have the following HTML:
<div class="main">
<div class="inner">
<ul>
<li>Some list items...</li>
...
</ul>
</div>
</div>
The .main block is fitted to the page, for example, by absolute positioning:
.main {
border: 2px dashed blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
The .inner block holds the navigation list that can cause scrolling:
.inner {
border: 2px dotted red;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
overflow-y: scroll;
}
In this example, I constrain the height of the .inner block to fit within .main,
and set overflow-y: scroll, which creates a scroll bar contained within the edges
of the container block.
You may have to adapt this to your mobile platform, but the concept should still apply.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ac4xT/
Simply put, if it has variable height (auto), it will never have overflow in the y axis (vertically), because the div will always grow to fit its contents.
overflow: scroll will force it to present a scrollbar, but it will always be disabled, because the contents will never extend beyond the displayed pane.
If you want vertical scrolling, you have to define a height, either in px, %, or em.
If you do height: 100%, the div will fill the height of the page, and scroll content that extends beyond the window's viewport height.
If you have a header area, try something like this:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 40%;
background-color: #ccc;
}
#body {
position: absolute;
top: 40%;
width: 100%;
height: 60%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>
For a fixed-height header (per the comments), use absolute positioning with a top and botom value to position the scrollable div below it:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 60px;
background-color: #ccc;
}
#body {
position: absolute;
top: 60px;
bottom: 0px;
width: 100%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>
Why not use max-height on the div?
max-height sets the maximum height to which an element can expand. I suppose what you want is the div to never go out of the screen. So you can set a max-height and then overflow: auto;
Here's how I'm doing it and it does work:
#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
<div id="myDiv"></div>
But the problem is when I scroll down the page, the div no longer appears in the center because it is positioned 50% off the top relative to the original view port height, not the current one. So I guess I would have to listen for a document scroll event and update the position of the div dynamically. Any idea how to do that?
Basically the effect I'm after is for the div to always be in the center even when the user scrolls.
or maybe there's even a pure css solution?
Use position: fixed; instead of position: absolute;
The positioning (top, left etc) will remain the same, but in relation to the window, and not the document.
http://jsfiddle.net/jasongennaro/25WAg/
You're going to want position: fixed;.
To achieve the div in the center of the screen, you're going to want left: 50%; margin-left: -50px;
Note that the negative margin-left is half of the container's width
#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}
#container {
width: 90%;
height: 90%;
}
Then for your HTML :
<div id="container">
<div id="myDiv">DATA</div>
</div>
Tell me if it works.