After a long long while I had to do some frontend, and I have a annoying issue to resolve.
So basically I have 1900x1200 Div wrapper and while the whole thing looks pretty and centered on huge monitors, when I open it on a small/resolution monitor it isn't centered.
I would like the opening position to be in the middle of the whole thing regardless of my resolution.
Any ideas?
The whole thing is driving me nuts and I can't seem to be able to wrap my head around it. :(
(and I'm sorry if I don't make much sense, its 2:25 am here, I'm not a native speaker and my brain is fizzling out)
You could center the div through absolute positioning.
#DivWrapper {
width: 1900px;
height: 1200px;
position: absolute;
left: 50%;
margin-left: -950px;
}
Example: http://jsfiddle.net/AXenC/
If your interface is base on a smaller width than 1900px probably more like a 960 grid, you could center your background in in the body tag and center the wrapper(width of your content ie: 960 px) with the margin auto on the left and right.
body {
padding: 0;
margin: 0;
background: #aeaeae url(../images/back__v_1.jpg) 50%;
}
#wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
}
Related
Apologies if this has been asked before, but I've been checking quite a few other related threads and they've not been exactly what I'm looking for.
So I have a 1280x720 video that I was hoping to make my page's video background. I want it to scale to fit viewport height at all times, but NOT change aspect-ratio.
So this means that if the viewport ends up wider than 16:9, then I can have black-bars/letterboxing on the sides.
But if the viewport is narrower than 16:9, the sides of the video are cropped (I'm fine with this, as all important parts of the vid are in the center).
How would you suggest I do it? It's been driving me crazy.
I had the same issue earlier. This is how I resolved it.
.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}
The code is straight forward.
Well, without a working example it is hard to give a suggestion that will definitely work but here may be something that will send you in the right direction.
Create a wrapper around the video that has an absolute position and use flexbox to center the contents (the video) in the center of the page, then give it a black background. You can do that with something like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}
You may need to play around with the CSS for the video perhaps like this:
video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}
Something like that should give you the results you are looking for, or at least close to them. (I did not test this though)
Hope this at least gives you some ideas if it does not work. In the future, it is best to add your current code to make it easier for us to see what you have actually tried.
There are many discussions about div overlapping when re-sizing the browser's window, but I still didn't find a solution that suits me.
This is the website I'm posting about: http://jsfiddle.net/uXZp2/1/
I used fixed position on the 3 divs:
.box1 {
width: 23%;
display:fixed;
margin: 2% 54%;
}
.box2 {
width: 30%;
position:fixed;
margin: 1% 15%;
}
.box3 {
width: 25%;
position:fixed;
margin: 13% 17%;
}
I saw a discussion talking about making the div's position absolute, but won't this only make things more unstable?
How can I prevent the divs from overlapping?
Is there a way to 'tell' the divs to arrange when I re-size the window, so when the width of the window is small, the divs will arrange vertically? (this will be good for mobile browsing too).
Thanks
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
As an experiment, I've been trying to center a DIV in a BODY tag using percentages in CSS. I think I had it figured out at one point, but thanks to the magic of TopStyle not having a history once you save, I lost it.
So, here is my HTML:
<html>
<head>
<link href="shadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>
And, here is my CSS:
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #EEEEEE;
margin: 10%;
}
div#box
{
position: absolute;
background-color: #FFFFFF;
width: 740px;
min-width: 80%;
min-height: 80%;
border: #CCCCCC thin solid;
}
To answer your immediate questions:
Why am I using absolute positioning on the box?
So that the box will accept 80% as it's height even without content to stretch it.
Why am I width, min-width and min-height like this?
Since I want the box DIV to take up 80% of the available space, it made sense to use minimums. I'm using a pixel width to make sure that no matter how small the area gets, it won't go any thinner than 740px, causing the browser to activate the horizontal scroll bar. In theory, they content height should activate the vertical scroll bar if the content pushes passed 80% of the available area.
Now the trick is to get it dead centered and maintain a 10% space around the box. I've tried applying "margin: 10%;" to BODY, then "padding: 10%;" to BODY, and finally "margin: 10%" to the box DIV. All of those choices gives me the same result: it's centered horizontally but is acting strange vertically. I'm not getting even space on all sides. The only thing that is behaving as wanted is that the box DIV does appear to be using 80% of the available space.
It seems like this should be right. The box DIV is taking up 80%, the margins are taking up 10% on each side (20% vertically and 20% horizontally), making 100%. Not sure why it's not working.
I swear I had this working in a similar manner, and now I've lost it.
Does anyone have an explanation as to why the percentages don't seem to be displaying correctly and what solution I would need?
Thanks!
Try it like this:
*
{
margin: 0;
padding: 0;
}
body { background-color: #EEEEEE; }
div#box
{
position: absolute;
border: #CCCCCC thin solid;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
min-width: 740px;
min-height: 500px;
}
IE will allow for the DIV to shrink below your limits since min-width and min-height do not work.
Remove position:absolute; from #box
Add this to #box - margin:0 auto;
Get rid of the stuff in body
JSFiddle Demo
JSFiddle Edit