My problem is having a fixed navigation at the top of the page and setting the rest of the document to margin: 0 auto; so that when the page is expanded, everything stays in the center. Is there a way to have the fixed header stay fixed at the center of the page when the page expands and contracts as well as it moving up and down as the page scrolls or no?
.container {
max-width: 1200px;
height: 1200px;
position: relative;
border: 0px;
text-align: center;
left: 30px;
}
.header {
width: 1200px;
height: 140px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
left: 50%;
top: 0px;
z-index: 1;
}
Your nav has a fixed width? Your HTML/CSS code would be wishfull.
But having to guess, I think this might help:
.header {
position: fixed;
width: 400px;
left: 50%;
margin-left: -200px; /* 50% of the elements width */
}
.content {
width: 400px;
margin: 0 auto;
}
Demo.
Related
I am trying to place a video on my page, which has to be responsive (16:9 all the time). I found a lot of examples, which are basically the same (applying 56.25% padding at the bottom). However, as soon as I apply a max-height and max-width to the iframe (because I don't want it to fill out the entire page), the content underneath starts to move away (because of the padding).
https://jsfiddle.net/12npu2zu/
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
Is there a way to keep it from doing that? The maximum width is 1000px and the maximum height is 563px (16:9).
Is this what are you looking for, i just wrapped all this in one more div and added same style.
<div class="video-holder">
<div id="video-container">
<iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen> </iframe>
</div>
<p>This should stay right underneath the video</p>
</div>
CSS:
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
.video-holder{
display: inline-block;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
https://jsfiddle.net/326w5jqj/
So what I ended up doing was placing a transparent image in the container. Then I applied this CSS to all the items:
#video-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
img {
display: block;
opacity: 0;
width: 100%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
See it yourself: https://jsfiddle.net/12npu2zu/2/
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
Please what do I have to add or change here to reduce the footer-bg to a pixel with width: 100; and height: 18;?
I'll be glad if this is looked on now as I need this help now.
Gracias.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100%;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
You can apply your dimensions using
width: 100px;
height: 18px;
http://jsfiddle.net/f9p6xbrn/2/
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100px;
height: 18px;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
Simple enough. If you want the green bar to be centered and take up 960px, do this. My changes are at the bottom.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
padding-bottom: 0;
min-height: 43px;
width: 960px;
margin: 0 auto;
}
If you want to set your footer to 100% and have it match the rest of your content, you would have to create some sort of container to put all your content including the footer in. Then set that container to a width of 960px with margin: 0 auto.
In IE9 This Page element section#tcs-website-content shows 990px width with CSS width: 100% where all parent elements have width of 100% thus having browser width which is 1024px
I have no experience with IE9 whatsoever, so I don't know what is the problem I need to look at.
CSS (LESS) for the elements:
html, body {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
background: none;
font-family: 'muliregular','oswaldregular',Arial;
}
#viewport {
display: none;
position: relative;
float: left;
width: 100%;
height: 100%;
overflow-y: hidden;
background: none;
}
#tcs-website-content {
position: absolute;
z-index: 100;
top: 120px;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
overflow-y: auto;
#bundle .box-sizing();
& .inner-content {
width: 960px;
margin: 0 auto;
}
}
If you want to be sure it covers the whole width, I would add the following definition to #tcs-website-content:
right: 0;
I have a page that needs to stretch and resize with with window and I've managed to do that but I need that the "inner div" (#pgContent) stretch if the window is resized to higher dimensions but that it doesn't shrink more than, let's say for example 800 x 600 px.
As I have it now it stretches well but it also shrinks more than I want!
It's working as I want in width but not in height!?
Here's a visual example:
My CSS:
* {
margin: 0;
padding: 0;
outline: 0;
}
/*| PAGE LAYOUT |*/
html, body {
height: 100%;
width: 100%;
/*text-align: center;*/ /*IE doesn't ~like this*/
cursor: default;
}
#pgWrapper {
z-index: 1;
min-height: 100%;
height: auto !important;
/*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
#pgContent {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 50px;
overflow: hidden;
background: #CCC;
}
#footWrapper {
z-index: 2;
height: 50px;
min-width: 940px;
position: absolute;
left: 30px;
right: 30px;
bottom: 0px;
background: #C00;
}
/*| END PAGE LAYOUT |*/
And the HTML:
<body>
<div id="pgWrapper">
<div id="pgContent">
This DIV should stretch with window but never lower than for example 800px x 600px!<br />
If window size is lower then scrollbars should appear.
</div>
</div>
<div id="footWrapper">
<div id="footLft"></div>
<div id="footRgt"></div>
</div>
</body>
If someone could give me a help on this I would appreciate.
Thanks in advance.
The second min-height will overwrite the first one.
Use a height of 100% and min-height of 680px;
#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
I belive height auto is messing with your stretching, commenting it out made your styles behave much better. Of course it might be down to different browsers
#pgWrapper {
z-index: 1;
min-height: 100%;
/*height: auto !important;*/
min-height: 680px;
/* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
Working sample:
http://jsfiddle.net/QqMeC/4/
Have you tried using the following in #pgWrapper
overflow: auto;
DEMO: http://jsfiddle.net/jonocairns/LA8hg/