I am attempting to write a simple 404 (Page not Found) error page for my website: bazingamanphdgaming.t15.org. This is my code so far:
<html>
<head>
<title>404 - Not found</title>
<style>
#title {
position:fixed;
top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%
}
#link {
position:fixed;
top:45%;
font-size:20px;
text-align:center;
width:100%
}
</style>
</head>
<body style="background-color:black">
<div id="title"><b>404 - Page not found</b></div>
<div id="link"><br />
<a style="color:white" href="http://bazingamanphdgaming.t15.org">
Return to the BazingaManPHD Gaming home page.
</a>
</div>
</body>
</html>
However when I reduce the browser window's width the bold text in the #title goes over the link going back to the homepage. This is a screenshot:
Of course to fix this problem I would need to put a min-width property on the #title like so:
<div id="title" style="min-width:200px"><b>404 - Page not found</b></div>
I am using 200px as an example there, but it doesn't seen to work, whatever size I put it as. Any help would be appreciated.
Simply add this to your CSS:
#title {
white-space: nowrap;
/* rest of your styles */
}
This will prevent the text in #title from wrapping.
You could enable vertical align by setting display:table and display:table-cell to the containers.
html,body{
width:100%;
height:100%;
}
body{display:table}
.page {
background:black;
display:table-cell;
vertical-align:middle;
text-align:center;
width:100%;
height:100%;
}
.title {
color:white;
font-size:40px;
}
.link {
font-size:20px;
color:white;
}
<div class="page">
<div class="title">404 - Page not found</div>
<a class="link" href="http://bazingamanphdgaming.t15.org">Return to the BazingaManPHD Gaming home page.</a>
</div>
This way it will center whatever you put into it.
Demo at http://jsfiddle.net/gaby/f6c1wupL/1/
here is a fiddle to take a look.
Basically there were a couple problems in your css.
Setting the position of elements to fixed takes them out of the natural flow.
If your thinking about the page as a piece of paper these fixed elements are floating above the paper wherever you place them.
By putting them relative you are putting them onto the piece of paper so the position of other elements can have an effect on their position. i.e bumping them out of the way.
by marking them relative the 'top' selector no longer works instead to move the items down the page give them a margin-top to offset them from the the bounds of the body(it's parent element).
#title {
position:relative;
margin-top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%;
http://jsfiddle.net/crnc6ht5/
Related
I want to create a div which contains an image and text on it. Something similar to http://wearyoubelong.com/ How do I go about doing this? I am using Zerb Foundation Framework. As of now I have tried using position : absolute on the text, but that seems to break at a lot of places. Can you please advice me on how to go about this?
Let say you have a sample HTML like this
HTML
<div id="container">
<div id="content">
<h1>Here goes some content</h1>
<p>Description about the product.
Some more desription about the product.</p>
</div>
</div>
CSS
#container
{
background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
background-repeat:no-repeat;
height:400px;
width:400px;
}
#content
{
position:absolute;
height:auto;
width:auto;
top:150px;
left:100px;
}
#content h1
{
color:Yellow;
font-weight:bold;
font-size:22px;
}
#content p
{
color:Red;
}
Just gave the main div #container a background-image , positioned div #content to absolute and then using top and left property float it according to your needs.
Live Demo
Hope this helps.
Edited to set #container div's height and width to auto
Updated Demo
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
Why not wrap your content in a div, and set the properties to that?
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.
css
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/
HTML
<div id="wrapper">Test me!</div>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div .
This is what you are looking for.
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is:
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
I've dealt with divs collapsing on their content when using float positioning (e.g. solving with overflow:hidden), but am trying to learn absolute/relative positioning and can't figure out why the container div is collapsing. My test case:
<html>
<head>
<style type="text/css">
body {
background-color:#eee;
}
#content {
margin:0 auto;
position:relative;
border:1px solid red;
width:800px;
display:block;
background-color:white;
}
#header {
border:1px solid black;
background-color:#777;
color:white;
width:800px;
position:absolute;
left:0;
top:0;
}
#leftcol {
position:absolute;
border:1px solid black;
background-color:#ddd;
width:200px;
top:100px;
left:0;
}
#rightcol {
position:absolute;
top:100px;
left:205px;
border:1px solid black;
background-color:#ddd;
width:500px;
}
</style>
<title>CSS Positioning Example 1</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>The Awesome Website</h1>
</div>
<div id="leftcol">
<h2>About</h2>
<p>
This website is so awesome because it was made by someone
and that is really all there is to it. There.
</p>
</div>
<div id="rightcol">
<p>This is where I'm going to put some real body text so that it goes
on and on for a while and so I can get a sense of what happens when
the text in the paragraph keeps going and the box containing it keeps
going on as well.
</p>
</div>
</div>
</body>
</html>
What's going on here? Why does the red-bordered content div collapse even though it contains the other divs?
It is because all of its content is styled as position:absolute. This takes those elements out of flow and (layout-wise) it's like they don't even exist. Consider using position:relative to position the content.
You really need to read these articles at A List Apart
CSS Positioning 101
CSS Floats 101
Your question is why the div with red borders don't expand to it's content. As Joseph said the problem is that you take the elements out of the document flow. Positioning an element absolutely make the element's position independent from it's parent and siblings.
I fixed your code using CSS float property. Take a look here.
I highly recommend you read those articles.
I have a doosie of a layout problem that looks like a browser bug.
It manifests only in FF3 (haven't tested ff2).
It only shows up on the first load of the page. If I resize the window it behaves properly.
It goes away when I put a border on the problem element, and comes back when I take the border off.
No other properties change.
Here is an image of the problem:
Firebug's DOM inspector thinks that the footer spans the whole width in both cases. It seems like it's only the text-align:center that's not correctly respecting the full width.
*Update: taking off text-align:center does not solve it. The text runs flush up against the left side of the screen (correct) or the purple box (incorrect).
The 1px purple border you can see in the screen is #centerHolder, the child of a different element and should not affect the layout of the footer, though it clearly does.
*Update: Shrinking the height of the purple box to 85%, where it couldn't possibly be in the way, doesn't change the problem at all. The text still thinks the purple box is in the way.
Thanks for your comments and ideas.
HTML:
<div id="container">
<div id="centerHolder"></div>
</div>
<p id="footer">
Copyright ©2009 Lala Corporation
<a class="link" onclick="ContactUs_OnClick(); return false;" href="#">Contact Us</a>
</p>
CSS:
#container{
position:relative;
height:96%;
min-height:600px;
width:100%;
min-width:975px;
max-width:1300px;
margin:0 auto;
z-index:2;
}
#centerHolder {
float:left;
margin-left:245px;
width:10%;
z-index:1000;
}
#footer {
border:1px solid green;
margin:0;
padding-top:5px;
position:relative;
text-align:center;
z-index:1;
}
You need clear: both; on your #footer, it's not clearing your floated div #centerHolder
I think there's something else going on with your page that you're not finding. Like a possible DIV tag that is not properly closed. FireFox will close tags for you if they are left open but not where you want them to. The border correcting this issue seems to be forcing the DOM to realize that the object should span wider. See the code below that I've taken directly from your example and test it. It works perfect on my install of FF 3.5.5.
Note: A quick way to locate improperly closed TAGS is to rename your HTML to an XML file extension and open it with FF. It should parse the file correctly. If not it will point to where a TAG was left open.
<html>
<head>
<style>
#container{
position:relative;
height:96%;
min-height:600px;
width:100%;
min-width:975px;
max-width:1300px;
margin:0 auto;
z-index:2;
}
#centerHolder {
float:left;
margin-left:245px;
width:10%;
z-index:1000;
}
#footer {
/*border:1px solid green;*/
margin:0;
padding-top:5px;
position:relative;
text-align:center;
z-index:1;
}
</style>
</head>
<body>
<div id="container">
<div id="centerHolder">Here's some text</div>
</div>
<p id="footer">
Copyright ©2009 Lala Corporation
<a class="link" onclick="ContactUs_OnClick(); return false;"
href="#">Contact Us</a>
</p>
</body>
</html>
Let me know if you find something. Always interested to know what you find.