I am developing an html page on Windows platform. I find when the resolution (or size, in pixels) of browser (display) is larger than the page size, the page will be aligned to the left of the browser, and I want to align the page to the center (middle) of the browser when the page size is smaller than browser.
Any ideas how to implement this and how to find the root cause why aligned to left? The html page is big and not convenient to paste html code here.
thanks in advance,
George
First of all, you'll want to wrap your page content in a block (this block will be centered):
<div id="body">
<!-- your page content here -->
</div>
Then you'll want to style it as being centered. Due to a little disparity in how Firefox and IE handle centering a block, you'll have to do 2 things to center this block.
1. Set the body as centering everything (for IE):
body {
text-align: center;
}
2. Set the left and right margins of your interior block as 'auto'; and
3. Since centering text inherits to its child nodes, you want to set it back to left-alignment (unless, you do want all your text to be centered.. blah!):
#body {
margin: 0px auto;
text-align: left;
width: 800px; /* set this width to how wide you want your content to be */
}
Any ideas how to implement this and
http://dorward.me.uk/www/centre/
how to find the root cause why aligned to left?
… because that is the default.
<style>
body
{
width:800px;
margin:auto;
}
</style>
you simply need to add, text-align: center; to your body to cover legacy browsers and add:
text-align: left;
margin: 0 auto;
to your first container div ... this will be centered horizontally in all browsers, no matter how old.
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix.
<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
}
</style>
Which disables scrolling all together.
What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.
First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)
So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:
max-width: 100%;
Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/
If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.
<style type="text/css">
body {
min-width: 96px;
max-height: 200%;
overflow-x: hidden;
background-color: #FF0; /**/
}
</style>
try this put some content in it
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I have a very simple question I believe. I have a footer.php that I put on my main page and all subpages (to make it easier so I can change the footer in one location). And I am trying to make it so the footer remains at the center of the fixed-width no matter what size the browser window is. For example, I want my pages to be 950px width and the footer always be in the center, so that even when I resize the browser to as small as it goes, it simply COVERS the footer, rather then moving it with the resized window. Much like apple.coms footer.
Thank you for your help
You just need to set the width of your footer and then give it a margin:0 auto where 0 stands for the top and bottom margins and auto is for the left and right.
In your markup:
<div id="footer-container">
<div id="footer">
Footer stuff
</div>
</div>
And in your CSS:
#footer-container {
/* centering for IE */
text-align: center;
}
#footer {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
}
Edit: I was putting this comment on some of the other solutions, but deleted them because I didn't want to copy/paste on all of them. Just please be aware that margin: auto doesn't work in older versions of IE, so if you want to have the footer aligned in the middle, you'll need to do some nesting, like I have in this one.
Simply set the width: 950px, and margin-left:auto; margin-right:auto;.
With the left/right margins at auto, the <div> will be centered. Once the size of the browser gets down to the point where scrolling is needed, the browser will not shrink your <div>, it will just require left/right scrolling, which is needed for your content anyway.
I think you could solve it with a little bit of CSS:
html & php:
<div id="footer">
<?php include("footer.php"); ?>
</div>
CSS:
#footer {
margin: 0 auto;
text-align: center;
}
Hope this helps! :)