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).
Bookmarks