I just started learning HTML in order to get a summer internship. I'm writing a HTML note page as I go through the tutorials from HTML.net and I have a question about putting a white box around the body of my text. I'm currently working on learning CSS, just finished the basics of HTML5, and I made my page have a blue background, but I would like the body of my text to be white so it's easily read. I have the text body centered at 800px
You can do this in numerous ways. I'll give you one answer, even though I have not seen your code. Hopefully, you can relate this to your own code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
background-color: blue;
}
.mainContent {
background-color: white;
width: 800px;
text-align: center;
}
</style>
</head>
<body>
<div class="mainContent">Show your text here.</div>
</body>
</html>
I'm using CSS to change the background color for different sections of the page. Good luck! I hope this helps!
If you meant the text-color by "body of my text", then it can simply be done as following:
body{
background-color: blue;
color: white;
}
For learning CSS, this sheet should be very helpful: http://overapi.com/css/
I would do it like this:
CSS:
body{
background-color:#your blue here;
}
.bodyText{
background-color:#fff;
width:1000px;
margin:0 auto;
padding:20px;
}
HTML:
<div class="bodyText">
Your text goes in here.
</div>
Obviously, adjust the width, padding, colors, etc. to suit your needs, but this should get you started.
Related
I am trying to design a web form in ASP.NET. In that I am trying to set a background color to different empty divs. Normally a simple html code like below works:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
But if I use this same snippet in ASP.NET, I fail to achieve the desired result. The browser displays nothing. My aspx code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
So how can I set a background color to an empty div in ASP.NET? Any help would be much appreciated. Thanks!
The problem is that your #headerand #nav-barhave percentage heights. You'll see if you change them to pxdimensions, they empty div's still show up. So your problem doesn't have anything with ASP.NET it's just a CSS issue.
If you want the heights to be responsive to the user's screen, you should try the vhtag. This stands for viewport height. So if you have 20vhfor example, it will take up 20% of the users screen height.
See my updated JSfiddle:
http://jsfiddle.net/0mr9z6hy/2/
percentage heights may work differently across browsers
but one problem is you have no height specified on the body so the height is only really the height of the actual content of your page which is not much.
html, body{
height: 100%;
}
Basically I am using the "Tryit Editor" from the W3 website and
this is the code I started out with
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
I wanted to change the background color and background images so that they were only found on a div, not on the whole page. I also wanted to move the div around the page. I was able to make the div with the background elements, but I wasn't able to move it around the page. I used the following code, thinking that
top:150px;
left: 150px;
would have caused the div to change position
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position=fixed;
top:150px;
left: 150px;
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#00dccc;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Alas, the div did not change position. What gives?
Thanks! :]
You have an equals sign rather than a colon in your position declaration which is causing the page to ignore it. Change that and it'll work!
EDIT: Thanks for fixing my awful terminology Pavlo, can't believe I did that :P
Your code is wrong. It should be
position: fixed;
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>
The layout
I really dont have any idea of where to begin to make this with DIVs or with tables specially with the fact that i need a top-backgroud and a botton-background. Please i need orientation with this, if you can make the css with the names i put on the image i will understand the code whitout any explanations. Thanks a lot for any help.
Have look if this is what you were after (TESTED ON SAFARI 5.0)
If yes code is as given below
<html>
<head>
<style type="text/css">
* {margin:0px;padding:0px;border:0px;}
body{background:#e8a7aa;}
#bg-top{height:200px;width:100%;background:#008a2b;display:block;float:left;}
#container{float:left;width:900px;z-index:100;margin-left:150px;margin-top:-700px;}
#header{background:#3d2627;height:180px;}
#content{background:#94101e;height:340px;}
#footer{background:#3d2627;height:180px;}
#bg-bottom{height:200px;width:100%;background:#008a2b;display:block;margin-top:300px;float:left;}
</style>
</head>
<body>
<div id="bg-top"></div>
<div id="bg-bottom"></div>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</head>
Will appreciate any other comments as well, cheers
There are many ways to do this. I'm not a CSS expert but I'll see what I can come up with, probably some one else has a better answer. Assuming you want to fill the entire browser window, I'd start out with three divs.
One for left, one for middle, one for right. You can make them float:left and give width in percentages if you want to fill the window. If you want to center this entire thing, give them absolute widths, put them in a parent div and then center the parent with margin auto
After that, you can just fill the three divs with inner divs. Give them the right widths and heights and they will automatically line up underneath eachother. After that, assign backgrounds to the divs using CSS.
Edit: I forgot to say, there is a clear:left or clear:both style that you can use if after the floating divs, you need to go back to "normal" div behavior
Is this homework? If so, you’re going to need to learn research skills other than “ask Stack Overflow”.
That said:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #dfaaaa;
color: #fff;
font-family: 'Arial', sans-serif;
font-weight: bold;
}
.TOP-Background {
background: url(TOP-background.gif) left top repeat-x;
}
.BOTTOM-Background {
background: url(BOTTOM-background.gif) left bottom repeat-x;);
}
.HEADER,
.Content,
.FOOTER {
width: 900px;
margin: 0 auto;
}
.HEADER,
.FOOTER {
height: 200px;
background-color: #3a2727;
}
.Content {
min-height: 801px;
background-color: #8b1d23;
}
</style>
<title></title>
</head>
<body>
<div class="TOP-Background">
<div class="BOTTOM-Background">
<div class="HEADER">
HEADER: W=900px H=200px
</div>
<div class="Content">
Content: W=900px
</div>
<div class="FOOTER">
FOOTER: W=900px H=200px
</div>
</div>
</div>
</body>
</html>
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough