I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
Related
THERE IS AN EDIT AT THE BOTTOM - look for "===== EDIT ===="
I am putting a fixed division at the top of the page. No problem with positioning it, but a problem comes up when I test the page by scrolling up and down.
Everything is fine with Chrome and IE but FF has a problem. The problem is that lines are "lost" under the fixed division. That is, the page is scrolled too far.
Here is the test page The entire source for the page is at the bottom of this question.
The division on the test page has width: 80%; margin-left: 50px; and opacity: 0.5 This allow you to see the lines underneath the division.
Go to the test page and highlight the last line at the bottom of the viewport. Highlighting the last line makes it easy to spot when you PgDn.
Now PgDn (or click the scroll bar - the bar, not the slider)
You can repeat the highlighting and PgDn and it should behave the same way.
With Chrome and IE, the highlighted line will still be visible, more importantly the lines following it will be visible.
With FF, the highlighted line, and one or two of the lines after it, winds up underneath the fixed division. The lines after the highlighted line are lost - not visible.
I've see this done successfully on other sites but I can't figure out what they are doing to make it work.
This page works correctly with FF, Chrome, and IE. There are others but I can't seem to find them right now.
Here is a page with the same problem as my test page It is different in that it "floats" the division until it is scrolled to the top and then it "fixes" it at the top. I've done this same float/fix thing and it also has the problem with FF. The test page I pointed you at, above, simply fixes the division to start with.
The funny thing about that page which has the same problem as mine is that it is a demo of how to put a fixed division at the top of the page and it doesn't work for FF
Another page with the problem of losing lines under the fixed division is yahoo.com. Lines are lost under the fixed division pretty much as is happening on my test page, but yahoo "loses" more lines than my test page.
Does anyone have any idea how to fix a division at the top and not lose lines underneath the division, lines which should be visible after the scroll? My test works for Chrome and IE but not for FF.
AND - wasn't there a code snippet link on the question page which you could use to provide demonstration code? I don't see it on this page where I'm typing the question.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scroll Test</title>
</head>
<body style="margin-top: 0px;">
<div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
<div>
<script type="text/javascript">
for (i = 0; i <201; i++) {
document.writeln("*** " + i + "*************************************************************************************<br>");
}
</script>
</div>
</body>
</html>
By the way - the division (with the pink background) at the right hand side of this page has a problem when it get's fixed to the top of the viewport - the top is cut off. The only way to see the top is to scroll back up to the top of the page. This happens in FF, IE, and Chrome.
Where should I report this problem - about the "ask question page" - and provide the details?
===== EDIT ====
Thanks to user3137702, who told me to change the division to 100%. When I did that, the scrolling worked but initially when the page is loaded, lines #1 and #2 were under the fixed division.
I had the body set to margin: 0px; I changed that to margin-top: 50px; to make the first lines visible. I wasn't worried about the other margins - left, right, bottom, that's why I just changed the margin: 0px; to margin-top: 50px; - easiest to type.
but that through me back into the original error. After playing with it for a while, I found that unless margin-left: 0px; is set on the body tag, the scrolling won't work.
So, the complete solution is to have the fixed division set to width: 100%; and the body set to margin-left: 0px; and margin-top: nnpx, where nn is the height of the fixed division.
I'll add some JavaScript to set the body top margin based on the height of the fixed division so I don't have to mess around with it if the height of the fixed division changes.
I originally had width: 80px; on the division because I want the fixed division to show as less that the body width and centered.
I took the code that solves the problem and added a second division under the fixed division. The fixed division has background-color: transparent; and width: 100%. The nested div is where the content is and is set to width: 80% margin-left: auto; margin-right: auto to center it.
Now the it displays as I want it to and it scrolls properly.
Here's the new definition of the body down to the close of the fixed division's tag:
<body style="margin: 0px; margin-top: 50px;">
<div style="width: 100%; background-color: transparent; top: 0px; position: fixed;">
<div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
Contents of the child division within the fixed division
</div>
</div>
<div>
Here is a page incorporates all of the changes
Again, thank you user3137702, I'll select your answer.
Hold everything
I just played with the fixed page and have found that IE, FF, and Chrome all start to have problems with the scrolling as the viewport becomes shorter - as would happen if you resize the browser window or pull up something like FireBug.
I'm not going to spend any time figuring out the size that causes the browsers to start misbehaving, it would be a waste of time. Suffice to say IE and Chrome start having problems at larger heights than does FF. But the sizes are something that it is unlikely anyone will ever encounter. The viewport has to get pretty short to start the problems.
I can't explain exactly why it's happening, but it's the width that's messing up firefox; If you set the width of your fixed div to 100%, it works as you would expect.
<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I sometimes "protect" a custom UI control by placing a transparent div over the top of it. e.g. I have made an interactive data grid, and when I want to disable it, such as when I bring up a dialogue in front of it, I append a transparent div to the grid's outer container, with height and width stretched, so that it is not possible to click on anything. In the contrived example below, someFunction() will not get called when clicking where 'Blah' is, because the span will be covered by a transparent protector.
HTML:
<div class="control">
<span class="clickable-example" onclick="someFunction()">Blah</span>
<div class="protector"></div>
</div>
CSS:
.control {
position: absolute;
width: 100px;
height: 20px;
}
.clickable-example {
z-index: 0;
}
.protector {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
z-index: 1;
background: transparent;
}
However, I have noticed that in Internet Explorer (even 10), this doesn't work. It seems that a div with background set to transparent (either explicitly with CSS, or implicitly by not setting it at all), the div does not block what is underneath it. I thought this is wrong, but I can't actually see from the spec that it is wrong. The spec simply says that what is underneath will "shine through". It doesn't say whether or not the background should act like a piece of glass.
I've reverted to using a fully transparent image instead of the transparent div, but I wondered whether anyone has any further info on this. (The fact that it works with a transparent image proves that it's not a z-index problem).
Update: I have found out that this is a very specific problem with <div>'s with the combination of overflow: hidden and anchors. There seems to be no solid way around it. I now deleted the overflow: hidden. This solves my anchor problem, but creates extra space below my columns. This is not such a big problem, but if anyone knows how to get rid of the overflow without using overflow: hidden, suggestions would be really welcome. End update
I have a fairly simple website with a header in a <div> over two columns. The header and the columns are in one container. The header is NOT fixed; when scrolling down, the header goes out of view.
Now, my problem is with the anchors I want to add in the right column. The anchor itself works properly; when I click on the link on the top of my page, it jumps to <h2> just fine. It puts the title in the top of the screen just like I want it to. The problem is, however, that when I scroll back to the top, the upper part of my content in the columns has shifted behind the header. At first I thought it shifted all the way up to the top of the page, but now I see that that is not the case. I don't understand what the amount of pixels corresponds to. The columns themselves seem to keep the proper length; there is now extra empty space below the text.
I have read several questions of others on this website, but they all dealt with fixed headers, and their problem was that the anchor tag itself disappeared behind the header. I have tried the solutions proposed to this problem, but that causes my anchor tag to appear too low on the page and doesn't solve the problem that the upper part of my columns ends up behind the header.
Does anyone know how to fix this...?
My HTML for the page-setup:
<div id="container">
<div id="header">
</div>
<div id="columns">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
</div>
My CSS for the header and the columns:
#header {
width: 738px ;
height: 298px ;
padding: 0px ;
position: relative;
}
#container {
width: 738px ;
margin-left: auto ;
margin-right: auto ;
margin-top: 0px ;
margin-bottom: 0px ;
padding: 0px ;
}
#columns {
position: absolute;
margin-top: 0px;
margin-bottom: 0px ;
width: 738px ;
background: #b43232 url(fauxcolumns.jpg) ;
overflow: hidden ;
}
#leftcolumn {
float: left;
width: 254px ;
margin-top: 0px ;
padding: 0px ;
}
#rightcolumn {
margin-left: 254px ;
margin-top: 0px ;
padding: 0px ;
}
And, finally, my HTML for the anchor:
Text
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>
So, to summarize: the anchor works, but when I scroll back to the top, the upper part of my content has now shifted behind the header. So I guess I want the content of my columns to align with the top of the column, instead of in some random place behind the header, but I can't imagine how to do it. Setting top or margin-top to either #columns or both columns separately doesn't work. I can't think of anything else...
Anyone have any ideas?
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.