I am working on a Lightbox (tutorial), a div container which opens on a click.
This div container isn´t displayed and is located under the click element.
Now i tried to center it vertical but withouth success.
Found some other questions here on Stackoverflow, but no one worked for me, like this.
$(window).resize(function() {
$(".modal-box").css({
top: (($(window).height() - $(".modal-box").outerHeight() / 2) + $(window).scrollTop() + "px")
});
});
The problem is: At the beginning the div is almost out of the bottem screen and divs below gone out of top screen.
I would have each div in the middle of the screen, no matter of the position.
As #Rakesh commented on the question, this can be done with CSS alone; see this fiddle https://jsfiddle.net/xc2vrghx/1/
You have to use 2 div's.
Outer one with full 100% width/height, absolutely positioned, display set to table & alignments to center & middle - like this:
display: table;
min-width: 100%;
min-height: 100%;
position:absolute;
The the inner div (which is your centered container) must have css display set to table-cell, and give center & middle alignments to this container:
display: table-cell;
vertical-align: middle;
text-align: center;
place whatever you want inside this; fiddle example contains additional html inside this middle container to show as example.
CSS display property's table & table-cell values are playing the magic role here. http://colintoh.com/blog/display-table-anti-hero is a very good article to understand
Related
I'm trying do this to long time, but... no luck. The question itself is a little simple.
I need make a div to begin on the left side of screen and ending on the end of a col-xx-x div, which in turn is inside a row div, which in turn is inside a container div.
I've already done it with jQuery, but I'm searching for a way to do that using only HTML and CSS.
I made a image to a better understanding:
(The red square is the div that i want, but it's obvious)
Note: Notice that on my image I used a col-md-6 div, but the col is indeterminate (col-xx-x), I used 6 only to draw.
Here is a fiddle with the code using jQuery:
https://fiddle.jshell.net/b8xcp6j7/
You can adjust .box element width to 200%, set position to relative, left to -100%
.box {
width: 200%;
border: 4px solid red;
padding: 15px;
position:relative;
left:-100%;
}
jsfiddle https://fiddle.jshell.net/6a0uac4y/2/
I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.
This is demo: Demo
The demo will work only on webkit browsers, (chrome or safari)
There are four box, each have a title. When users clicks to expand the div. The div is made to expand. Initially the title is in left, but when the div is expanded the title must move to center with animation.I have made the div to align center using padding, but there is a problem, that for varying text-width the padding has to be changed to make the title properly centered. Please take a look at the code, you will understand it better
Remove the padding, center the title on the h3 and try to animate the width of the title between auto and 100%; Use the nowrap to make sure the title stays on one line.
h3 {
text-align: center;
width: auto;
white-space: nowrap;
...
}
Then animate to
.expand h3 {
width: 100%;
}
I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/
The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/
I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.
Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.
I would say funk all the extra css and use a table layout
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.