Center Large Webpage in Browser [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Center contents of webpage
I have a webpage that is 1640px wide, the main content is centered in the page and is 900px wide. I need to have the webpage center horizontally in the browser window no matter what the users screen or browser size is. Is this possible with javascript, jquery, or css? I dont have any real experience with java so could someone point me in the right direction or do they have a code sample? Thanks for the help!
here is a link to the page to help. Webpage link
the problem i might be having is becuase the header and footers are outside on my container and run the entire width of my webpage.

I found your problem... Your code is doing what you want it to do. You need to remove the css that says width:1680px; from your html,body
instead make it say: width:100%;
hope that helps!

The code looks like this:
#container { width: 1640px; margin: 0 auto; max-width: 100%; background-position: center 0;}

You need to use a relative measurement - i.e 100% percents - and not a fixed number - i.e. 1680px. That way your wrapper will take the entire width of that specific screen no-matter what the resolution is, and the content will be centered:
#wrapper {
width:100%;
}
#content {
width:900px;
margin:0 auto;
}

Related

How do I crop an image for screen size rather than resizing it in a web page? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I'm developing a web page and the top section of this page has a tiny column in the right side, and to the left of it an image which is occupying the rest of the section and causing my problem.
The issue is that the image extends beyond the device's screen size missing up the layout of the page. Now I don't want to resize it to fit, but rather crop the extra width from the image according the screen size, so that it look the same but you can't horizontally scroll through the page which is what I'm experiencing right now.
I don't really know if that makes sense but if you have any idea on how to solve this please write it here and I will try it.
To crop the image without resizing it you have to apply overflow: hidden; to the parent element.
To counter the padding of the parent element you have to set a negative margin that equals the padding of the parent.
div {
padding: 20px;
overflow: hidden;
}
img {
margin: -20px;
}
/* for demonstration purpose only */
div {
border: 1px solid red;
}
img {
display: block;
}
<div>
<img src="https://via.placeholder.com/900x200.jpg">
</div>
You change your img tag for a div with background of the img (I suppose you have img tag, you didn't specify). The div then won't exceed the boundaries regardless the img inside it.
<div id="img"></div>
<style>
#img {
background: url("your img");
}
</style>
// Use this instead of <img src="your img">

How to give a site a side scroll bar when resizing window instead of allowing all elements to bundle or stack up together?

I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.

Do we have anything in CSS/3 to dynamically set height based on width? [duplicate]

This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 years ago.
For example we have a div that we want to always keep in shape-ratio(aspect ratio), does CSS/3 have this kind of feature that I don't know about?
Container is 100px wide.
example:
width: 100%;
height: 100%-of-width;
result: div size is 100px wide and 100px high.
example 2:
width: 80%
height: 60%-of-width;
result: div size is 80px wide and 48px high.
Do we have anything like that?
Css already has auto, and vw and stuff like that, there is plenty of hacks but no decent solution yet, or I'm simply not aware of them, any one? We are in 2016 and still no way to overcome the absolute hack with padding. I could simply solve this with JS, but that's different story.
EDIT:
padding-bottom is not solution, it's work around that forces you to position inner elements in absolute.
vw is based on screen, it's not appropriate.
You can actually use calc and use the same base value on it.
div {
background-color: red;
width: 100vw;
height: calc(100vw * 0.5);
}
<div></div>

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

CSS Dynamic Margin on Window Resize

Can I dynamically ensure that the content always remains centered in the window pane on this website?
Right now it uses a static margin-left on the .items class, and it uses jquery tools.
http://andstones.ca/newsite/
Can I do it in just CSS or CSS and Javascript?
Thanks,
Kory
I didn't quite see what part you were talking about as it looks like most of it works just fine.
For auto-centering, you should use auto for margins:
margin: 0 auto;
Put that one whatever div you want centered.
Lets say that you want to center a container with 900px wide, the most cross browser way that I've used is:
div#container{
width:900px;
position:relative;
left:50%;
margin-left:-450px;
}
This goes to the center of the x axis and stays there regardless of other elements of that page!
Of course that this only works with a fixed width and not a dynamic one!
If i remember correctly, you have to use the following in IE
text-align: center;
Even to center a div

Categories