I tried to create HTML document with one layer in center like that:
<body>
<div id="background">
LONG TEXT HERE
</div>
</body>
and I set
html, body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: #color1;
}
and
#background {
width: 80%;
height: 100%;
position: absolute;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #color2;
top: 0px;
bottom: 0px;
}
But somehow if the text exceed height of the display and when I scroll down there is no background. I have checked in FireBug it looks like if the whole document is only the size of the initial window.
I need to make it 100% height. Could you please help me?
Remove height: 100%; and position: absolute;
It will work. Like below
#background {
width: 80%;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #093;
top: 0;
bottom: 0;
}
If the text is longer than the page, you will need to set the overflow property in CSS - otherwise elements will expand to fit their contents.
For example:
overflow: hidden;
Although this would make some text invisible, so you may want to use auto not hidden depending on what you are doing.
Related
I declared a global width. But I want one specific element to go over that limit but it doesn't seem to work. It is a text with a background image. I just want the background image to go over that limit but when I widen the element, the text goes over the width aswell.
I tried to manually extend the width of the element by width:150% but the texts goes over the limit aswell
html, body {
font-size: 1em;
background: transparent;
display: block;
width: 1222px;
margin: 0 auto;
}.wrapperbody {
background-image:url("background.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
margin-top: 10%;
}
<div class="wrapperbody">
<div>
<h1>test</h1>
</div>
</div>
I tried to expand the background image of a text but the whole text gets expanded.
One should never compose the page that way, the width should be declared to sections instead. That is the reason you cannot set the background proper way and you will get more troubles later on.
Anyhow, if you still choose to keep such layout, than you gotta do some tricks as following:
html,
body {
font-size: 1em;
background: transparent;
display: block;
width: 200px;
margin: 0 auto;
}
.wrapperbody {
margin-top: 10%;
position: relative;
}
.wrapperbody > * {
position: relative;
z-index: 1;
}
.wrapperbody::before {
position: absolute;
z-index: 0;
content: '';
display: block;
top: 0;
left: calc((100vw - 200px) / -2);
right: calc((100vw - 200px) / -2);
bottom: 0;
background: none red;
}
<div class="wrapperbody">
<div>
<h1>test</h1>
</div>
</div>
Also on this JSFiddle
Once again, please consider changing the layout.
Ok, i thought of starting afresh following some confusions in my previous similiar post. Here, I am trying to know the exact "reason" as to why exactly my outer container div ("container" , pink) is not automatically expanding vertically to fit the content div ("content" , red) (which automatically expands vertically with length of text). I am looking a reason more than the solution, because the reason will help me understand the concept more deeply. Please copy dummy text loremipsum... several times in the "content" div so that it overflows from page
Screenshot
here is the code:
html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: 600px;
left: 0px;
position: relative;
right: 0px;
background-color: rgba(216,86,112,0.5);
margin: auto;
height: 100%;
}
.content {
height: auto;
width: 200px;
background-color: rgba(255,0,0,1);
position: absolute;
top: 0px;
bottom: auto;
left: 0px;
right: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
/* Paste dummy text here more than a page */
</div>
</div>
</body>
</html>
The problem is the following:
Instead of using
.container {
height: 100%;
}
try:
.container {
height: auto;
}
and instead of
.content {
position: absolute;
}
use
.content {
position: relative;
}
Here's why
When an element is set to be 'position: absolute' it wont collapse with any other element, that's why your container doesn't expand at all.
When an element is set to be 'Height:100%' it takes the height of its container, in your case the cointainer is the body which means it will take 100% percent of your screen (in your case), but your content is way higher than the screen and that's why it overflows your content.
Hope you understand....
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
I have the following html:
<body>
<h1>Something</h1>
<img id="myid" src='images/bigimage.png'/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-font">SOMEThiNG ELSE</p>
</div>
</div>
</body>
And the CCS for it is:
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: url(images/body-background.png) top no-repeat;
min-height: 860px;
height: 860px;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
color: white;
visibility: hidden;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
min-width: 1336px;
height: 860px;
width: 1336px;
}
#myid{
position: absolute;
left: 50%;
right: 50%;
margin-left: -1280px;
margin-right: -1280px;
z-index: 1004;
}
#fast-back {
position: relative;
margin-left: 15%; /*it moves even using pixel*/
top: 272px;
z-index: 99999;
text-align: center;
width: 126px;
}
However, when I resize the browser window, the "fast-back" div moves to the right.
How can I prevent this behaviour?
Thanks!
Looking at #fastback CSS rule, you are using percentage instead of pixels on margin-left. Change it to pixels as unit of measure.
If you are using percentage as unit of measure, the left margin of the element, in your case, will move in relation to the viewport.
And if you are using pixels, on the other hand, the margin stays on the same location, even if the browser is resized.
Update
The solution is remove the width of the #container. See the following link.
http://jsfiddle.net/jlratwil/LB8rf/1/
The reason why the first solution does not work because the width of the container is set to 1336 pixels and centered aligned via margin: 0 auto. If the browser viewport width reaches beyond 1336 pixels during resize, the #fastback element will move.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.