Want to add text on a page having background color
We have begun to learn the basics in html and css now. Were commissioned to create a page where we showed up most of what we had learned so far.
My problem is that I will have a white "fields", where I write the text. Have tried with background-color, but then there will be gaps in the white area, it is not even. Have attached a picture of how it looks.
Here is the css and html tags:
HTML Code:
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http : / / www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
<title>Photo</ title >
<link href="Foto.css" rel="stylesheet" type="text/css" />
<LINK REL = "SHORTCUT ICON"
HREF = "Camera.png"
</style>
<style type="text/css">
body (
background-image: url(images/background.jpg);
font-family: Arial, Helvetica, sans-serif;
color: # EDEDED;
)
</style>
</head>
<body>
<center>
<H1 class = "header" class = "margin"<strong>PHOTO</ strong> </ h1>
</ center>
<p> <h4>Hi! And welcome to my page about photography.</ h4> <br/>
<h4>On this page I'll write a bit about photography, and showcase some pictures I've taken myself!</ h4> </ p>
HTML Code:
@ Charset "UTF-8";
/ * CSS Document * /
h1
(
font-family:Arial, Helvetica, sans-serif;
color:# 333;
font-size:99px;
font-size: large;
background-color:# FFF;
margin-left:450px;
margin-right:450px;
)
h1.header
(
font-size:xx-large;
)
h1.background color
(
background-color: # FFF;
)
h1.margin
(
margin-top:30px;
margin-bottom:30px;
margin-left:30px;
margin-right:30px;
)
h4
(
font-family: "Gill Sans";
color:# 000;
background-color:# FFF;
margin-right:375px;
margin-left:375px;
)
Re: Want to add text on a page having background color
Add something like this in your page:
HTML Code:
<div id="bgtekst">
Your text here
</div >
then create a css rule for this, make it so high to long you want to add color white background.
Re: Want to add text on a page having background color
I think I understood what you meant now. You want the center section shall have a specific height that is not so that it follows the text. Then has transformed virtually the entire file, but I'll try to explain what I have done and why.
Can start with a small introduction:
When you use the website code that most often divisions thus <div> tag. This one then combines with css. Design the most in the CSS file that makes it much clearer to you have many more opportunities.
This should be clearly must be pasted into Dreamweaver or wordpad due very long comments
HTML Code:
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Photo </ title>
<link href="Foto.css" rel="stylesheet" type="text/css" />
<link REL="SHORTCUT ICON" HREF="Camera.png" />
</head>
<body>
<div id="header"> <! - the opening tag for the division ID = header. This means that you have a header ID in the css file ->
<h1> PHOTO </ h1> <! - h1 tag, ONLY use 1 as per the document (only H! them and not others) to design it in the CSS file ->
</div> <! - How to end a division ->
<div id="title_innhold"> <! - the opening tag for the division ID = title_innhold. The ID in the css file ->
<p>! And welcome to my page about photography. </ P> <! - </ P> ie paragraphs / passages that they say makes a paragraph ->
</ div> <! - How to end a division ->
<div id="innhold"> <! - the opening tag for the division ID = content. This means that you have a innold ID in the css file ->
<p> on this page I'll write a bit about photography, and showcase some pictures I've taken myself! </ p> <! - Another section ->
<p> General information here in oh yes </ p> <! - If you have a new paragraph in the text, use a new paragraph like this. ->
</ div> <! - How to end a division ->
</ body> <! - Attention! So you forgot and end the HTML file that is fyfy ->
<! - REMEMBER: All HTML tags that open SHALL also lured there when some exception is that <br> (a line break) / line feed, etc. ->
HTML Code:
@ Charset "UTF-8";
/ * CSS Document * /
body (/ * body is then generally what happens in the whole document meant your default font, color, etc. * /
background-image: url (images / Background.jpg) / * This is when the BG picture your beautiful rightly done! * /
background-color: # 000000 * / Since I have not had your picture I created a background color instead it can be deleted * /
font-family: Arial, Helvetica, sans-serif; / * This is when the different text types you want and use * /
color: # EDEDED / * This is when the general color you want the text on the page * /
) / * End Detection tag for CSS * /
h1 (/ * opening Tag for h1 * /
font-size: 24px; / * defines the font size in pixels * /
/ * Here you can also add your own font color, etc. that is applicable on H1 * /
) / * End Detection tag for CSS * /
/ * ----- ----- Website structure * /
# Header (/ * opening tag for the header * /
background-color: # 000000 * / bekgrunnsfarge header for this lies with your background try keep this in the same color otherwise you have to change anything there. * /
text-align: center; / * The text is in the center of the area defines * /
margin: auto; / * centers the header box header so the division is in the middle * /
) / * End Detection tag for CSS * /
# Title_innhold (/ * opening Tag * /
background-color: # 666666; / * BG color for the content * /
width: 600px / * width of page * /
height: auto * / auto height set by how many lines of text that you have * /
margin: auto; / * centers the box, so title_innhold division comes in the middle * /
text-align: center; / * centers text not the actual website but the actual box called title_innhold * /
) / * End Detection tag for CSS * /
# Content (/ * opening Tag * /
background-color: # 666666; / * BG color for the content * /
width: 590px / * width of the page NOTE: this is 10px less than title_innhold because I have used padding * /
height: 500px / * height is 500px no matter how much text you have. Do you get a lot of text set it to auto! as in overskrift_innhold * /
margin: auto; / * centers the box, so the content division is at the center * /
padding: 5px; / * Padding this means that the text comes 5px were from all sides so it is not quite up to the side or top / bottom * /
) / * End Detection tag for CSS * /
- You had the CSS in both the HTML file and CSS file now, everything in the CSS file.
- Have removed some of the HTML "designed" to replace it with the use of CSS.
- Changed structure to form Divisions (how the design is built up)
- NOTE! CSS is case-sensitive thinking at this link:
<link href="Foto.css" rel="stylesheet" type="text/css" />
Big F in photo. Remember that the file also has a large F then. This is true even when all the divisions in the CSS and HTML file (ID).
Re: Want to add text on a page having background color
CSS stands generally not the case, the exception paths.
It also mentions as an example, the CSS, but HTML.
The link in the document to retrieve the CSS file is HTML, and the path is case-sensitive.
changes in <body> tag in HTML, it can be nice to use:
Quote:
<! - H1 tag, ONLY use 1 as per the document (only H! them and not others) to design it in the CSS file ->
Re: Want to add text on a page having background color
CSS stands generally not the case, the exception paths. It also mentions as an example, the CSS, but HTML. The link in the document to retrieve the CSS file is HTML, and the path is case-sensitive.
Quote:
changes in <body> tag in HTML, it can be nice to use:
body, html {
}
Yeah, sure this is also okay. Although I have never had use for and do this. Also I would recommend not to use h1, h2, h3 in so many different texts that you have right now.
