CSS/HTML HELP

bomberblyat · May 24, 2017

On 23.5.2017 at 5:06 PM, zwirek2201 said:

No problem glad to help

we meet once again so i have to do page like this

https://gyazo.com/3899dfa6e36d9752f934a2eab694b5cb but i dont know how do i add that background image, thanks once again

<html>
  <head>
    <style>
	body {
			width: 960px;
			background-color: black;
	}
	.header {
			background-image: url (/tht11/aurinkokunta.jpg);
	}
	h2 {
		color: yellow;
	}
    </style>
  </head>
  <body>
  <table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <td id="header"> <h2 class="h2">Aurinkokunta</h2></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

zwirek2201 · May 24, 2017

41 minutes ago, bomberblyat said:

we meet once again so i have to do page like this

https://gyazo.com/3899dfa6e36d9752f934a2eab694b5cb but i dont know how do i add that background image, thanks once again


<html>
  <head>
    <style>
	body {
			width: 960px;
			background-color: black;
	}
	.header {
			background-image: url (/tht11/aurinkokunta.jpg);
	}
	h2 {
		color: yellow;
	}
    </style>
  </head>
  <body>
  <table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <td id="header"> <h2 class="h2">Aurinkokunta</h2></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

Hello there
Two things:
- If you want an image to be a background image of your website, place it in the body tag. It will be under all of the elements of the page.

- In the background-image tag, your path to the image file should be enclosed in quotation marks

Your code should look something like this:

body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
}

Also, your picture is likely going to be repeated over and over again until it reaches the end of the page. You probably want your image to fill the whole width of the page, so it should not repeat itself horizontally. If you want your background image to repeat vertically, you can set background-repeat property to y-repeat (it will only repeat itself vertically) or no-repeat (it will not repeat itself in any direction). Here's an example with no-repeat:

body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
}

Also, your image is going to be positioned on the left edge of the body, so you have to position it at the top of the page (it is going to center it automatically) like so:

body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
  background-position: top;
}

If your background-image is wider or narrower than the 960 pixels, you have to change its size using:

body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
  background-position: top;
  background-size: 960px auto;
}

The first value in background-size is width, the second is height. Since you don't want to set specific height because it would affect image's aspect ratio, you can set it to auto and it will sort itself out.

Also, I've noticed that you have problems with CSS classes and ids. Let me explain:

Id and class have almost the same role. They are CSS selectors and allow you to specify visual properties of elements of your website. The main difference between an id and a class is that id can be used to identify only one element of page. Classes can be used multiple times in one page.

You can use Id to specify properties of a big element of your page that you know is going to appear only once on the page (such as top section or footer). Classes are used for elements that are used multiple times on one page (like buttons, paragraphs, headers etc.)

The difference is small, but important:

#myId {
/* This is an Id */
}

.myClass {
/* This is a Class */
}

and in html:

<div id="myId">
  [...]
</div>

<div class="myClass">
  [...]
</div>

If you create a class (like you did with header class), but try to reference it in html using id selector, it is not going to work. If you want to read more about Ids and Classes, this article is pretty good:

Class and ID Selectors

Hope it helps

bomberblyat · May 24, 2017

13 minutes ago, zwirek2201 said:
Hello there
Two things:
- If you want an image to be a background image of your website, place it in the body tag. It will be under all of the elements of the page.

- In the background-image tag, your path to the image file should be enclosed in quotation marks

Your code should look something like this:
body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
}
Also, your picture is likely going to be repeated over and over again until it reaches the end of the page. You probably want your image to fill the whole width of the page, so it should not repeat itself horizontally. If you want your background image to repeat vertically, you can set background-repeat property to y-repeat (it will only repeat itself vertically) or no-repeat (it will not repeat itself in any direction). Here's an example with no-repeat:
body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
}
Also, your image is going to be positioned on the left edge of the body, so you have to position it at the top of the page (it is going to center it automatically) like so:
body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
  background-position: top;
}
If your background-image is wider or narrower than the 960 pixels, you have to change its size using:
body {
  width: 960px;
  background-color: black;
  background-image: url ("/tht11/aurinkokunta.jpg");
  background-repeat: no-repeat;
/*background-repeat: y-repeat;     If you want it to repeat vertically */
  background-position: top;
  background-size: 960px auto;
}
The first value in background-size is width, the second is height. Since you don't want to set specific height because it would affect image's aspect ratio, you can set it to auto and it will sort itself out.

Also, I've noticed that you have problems with CSS classes and ids. Let me explain:

Id and class have almost the same role. They are CSS selectors and allow you to specify visual properties of elements of your website. The main difference between an id and a class is that id can be used to identify only one element of page. Classes can be used multiple times in one page.

You can use Id to specify properties of a big element of your page that you know is going to appear only once on the page (such as top section or footer). Classes are used for elements that are used multiple times on one page (like buttons, paragraphs, headers etc.)

The difference is small, but important:
#myId {
/* This is an Id */
}

.myClass {
/* This is a Class */
}  
and in html:
<div id="myId">
  [...]
</div>

<div class="myClass">
  [...]
</div>
If you create a class (like you did with header class), but try to reference it in html using id selector, it is not going to work. If you want to read more about Ids and Classes, this article is pretty good:

Class and ID Selectors

Hope it helps

<html>
  <head>
    <style>
	body {
			width: 960px;
			background-color: black;
	}
	#headerlogo
				{
			background-image: url (/tht11/aurinkokunta.jpg);
			background-repeat: no-repeat;
			background-position: ;
			
			I DONT KNOW WHY THAT div class="header" doesnt work
                  (im sorry im so confused i started css yesterday these all divs and class etc things makes me crazy and its hard to understand english guides about them :/ but that what u have understanded is kinda like this div id= constructive div class = style, ill try read that your linked thing im saying this again im really thankful to you !
	}
				
	.header
			font-family: arial;
			
	h2 {
		color: yellow;
	}
    </style>
  </head>
  <body>
  <table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
  <div id="headerlogo">
  <div class="header">
    <td> <img src="aurinkokunta.jpg" alt="aurinkokunta.jpg"><h2 class="h2">Aurinkokunta</h2></td>
	</div>
	</div>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

zwirek2201 · May 24, 2017

4 minutes ago, bomberblyat said:


<html>
  <head>
    <style>
	body {
			width: 960px;
			background-color: black;
	}
	#headerlogo
				{
			background-image: url (/tht11/aurinkokunta.jpg);
			background-repeat: no-repeat;
			background-position: ;
			
			I DONT KNOW WHY THAT div class="header" doesnt work
                  (im sorry im so confused i started css yesterday these all divs and class etc things makes me crazy and its hard to understand english guides about them :/ but that what u have understanded is kinda like this div id= constructive div class = style, ill try read that your linked thing im saying this again im really thankful to you !
	}
				
	.header
			font-family: arial;
			
	h2 {
		color: yellow;
	}
    </style>
  </head>
  <body>
  <table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
  <div id="headerlogo">
  <div class="header">
    <td> <img src="aurinkokunta.jpg" alt="aurinkokunta.jpg"><h2 class="h2">Aurinkokunta</h2></td>
	</div>
	</div>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

I don't know exactly what you're trying to achieve using divs. Div is just a container that holds some different elements. When it comes to Ids and classes, I would just recommend you were using classes for everything. There is no difference between id and a class and it makes things more confusing.

I cleaned your code from everything that was broken or weird. Please copy the code I'm posting on your machine and use it to go further. It's going to make everything easier.

<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }
    
    h2 {
      color: yellow;
    }
    
    .header {
      font-family: arial;
      text-align:center;
    }
  </style>
</head>
<body> 
  <div class="header">
    <h2>Aurinkokunta</h2>
  </div>
</body>

In the code you have a background image that should have correct width and should be placed in the center of the body and your header with a yellow title. Based on what you sent in the screenshot, you need to create a table with two columns and some text.

bomberblyat · May 24, 2017

10 minutes ago, zwirek2201 said:
I don't know exactly what you're trying to achieve using divs. Div is just a container that holds some different elements. When it comes to Ids and classes, I would just recommend you were using classes for everything. There is no difference between id and a class and it makes things more confusing.

I cleaned your code from everything that was broken or weird. Please copy the code I'm posting on your machine and use it to go further. It's going to make everything easier.
<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }
    
    h2 {
      color: yellow;
    }
    
    .header {
      font-family: arial;
      text-align:center;
    }
  </style>
</head>
<body> 
  <div class="header">
    <h2>Aurinkokunta</h2>
  </div>
</body>
In the code you have a background image that should have correct width and should be placed in the center of the body and your header with a yellow title. Based on what you sent in the screenshot, you need to create a table with two columns and some text.

okay this is my last question for you today so you dont need to use your alltime to me, is this going correct? and how do i place the text to center of image like on the picture

<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }
    
    h2 {
      color: yellow;
    }
    
    .header {
      font-family: arial;
      text-align:center;
    }
  </style>
</head>
<body> 
<table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <td> <div class="header">
    <h2>Aurinkokunta</h2> <img src="aurinkokunta.jpg"></td>
	</div>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

zwirek2201 · May 24, 2017

2 hours ago, bomberblyat said:

okay this is my last question for you today so you dont need to use your alltime to me, is this going correct? and how do i place the text to center of image like on the picture


<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }
    
    h2 {
      color: yellow;
    }
    
    .header {
      font-family: arial;
      text-align:center;
    }
  </style>
</head>
<body> 
<table>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <td> <div class="header">
    <h2>Aurinkokunta</h2> <img src="aurinkokunta.jpg"></td>
	</div>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>

Should work now I hope this is what you needed.

<html>
  <head>
    <style>
      body {
        width: 960px;
        text-align:center;
        background-color: black;
        background-image: url("/tht11/aurinkokunta.jpg");
        background-repeat: no-repeat;
        background-size: 960px auto;
        background-position: top;
      }

      .header {
        position: relative;
        text-align: center;
      }

      .image{
        position: relative;
        display: block;
      }

      .text{
        position: absolute;
        top: 0; right: 0;
        bottom: 0; left: 0;
        text-align: center;
        vertical-align:middle;
      }

      .text h2 {
        color: yellow;
        display: inline-table;
        vertical-align:middle;         
      }
    </style>
  </head>
  <body> 
    <table>
      <tr>
        <th colspan="2"></th>
      </tr>
      <tr>
        <td> 
          <div class="header">
            <div class="image">
              <img src="aurinkokunta.jpg">
              <div class="text">
                <h2>Aurinkokunta</h2>
              </div>
            </div>
          </div>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

bomberblyat · May 25, 2017

12 hours ago, zwirek2201 said:

Should work now I hope this is what you needed.


<html>
  <head>
    <style>
      body {
        width: 960px;
        text-align:center;
        background-color: black;
        background-image: url("/tht11/aurinkokunta.jpg");
        background-repeat: no-repeat;
        background-size: 960px auto;
        background-position: top;
      }

      .header {
        position: relative;
        text-align: center;
      }

      .image{
        position: relative;
        display: block;
      }

      .text{
        position: absolute;
        top: 0; right: 0;
        bottom: 0; left: 0;
        text-align: center;
        vertical-align:middle;
      }

      .text h2 {
        color: yellow;
        display: inline-table;
        vertical-align:middle;         
      }
    </style>
  </head>
  <body> 
    <table>
      <tr>
        <th colspan="2"></th>
      </tr>
      <tr>
        <td> 
          <div class="header">
            <div class="image">
              <img src="aurinkokunta.jpg">
              <div class="text">
                <h2>Aurinkokunta</h2>
              </div>
            </div>
          </div>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

<html>
  <head>
    <style>
      body {
				width: 960px;
				text-align:center;
				background-color: black;
				background-image: url("/tht11/aurinkokunta.jpg");
				background-repeat: no-repeat;
				background-size: 960px auto;
				background-position: top;
      }

      .header {
				position: relative;
				text-align: center;
				margin-left: 200px;
      }

      .image{
				position: relative;
				display: block;
      }

      .text{
				position: absolute;
				top: 0; right: 0;
				bottom: 0; left: 0;
				text-align: center;
				vertical-align:middle;
      }

      .text h2 {
				color: yellow;
				display: inline-table;
				vertical-align:middle;
		
      }
	  .p {
				color: black;
				margin-left: 200px;
				margin-top: -70px;
			
				
		}
		.tablecell {
				background-color: white;
				vertical-align: middle;
				position: relative;
		}
		h2 {
				color: black;
				margin-left: 50px;
				width: 10;
				top: 200px;
		
			
			}
		h1 {
				color:yellow;
			}
			
			.tablecell2 {
					background-color: white;
					width: 200px;
					height: 200px;
				}
				
	
			
    </style>
  </head>
  <body border="1"> 
    <table>
      <tr>
        <th colspan="2"></th>
      </tr>
      <tr>
        <td> 
          <div class="header">
            <div class="image">
              <img src="aurinkokunta.jpg">
              <div class="text">
                <h1>Aurinkokunta</h1>
              </div>
            </div>
          </div>
        </td>
      <td></td>
      </tr>
      <tr>
          <td class="tablecell">
		<p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä. <br>Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.<br>
		<br>
		Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt<br> asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia<br> planeettakuntia.
		</td>
			 <th class="tablecell2">
            <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
            <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
            <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
            <a href="palaute.html"><h2 class="h2">Historia</h2></a>'
			</th>
      </tr>
    </table>
  </body>
</html>

im doing something wrong with columns

example of what it should look like

https://gyazo.com/ba73250cae8ecc46c4df07f7f2131fdf

i think im getting bit better on css but still alot to learn, i promise you instantly see alot errors on my code

zwirek2201 · May 25, 2017

1 hour ago, bomberblyat said:

im doing something wrong with columns

example of what it should look like

https://gyazo.com/ba73250cae8ecc46c4df07f7f2131fdf

i think im getting bit better on css but still alot to learn, i promise you instantly see alot errors on my code

The biggest issue that you're having is that you're setting negative margins. You should NEVER set negative margin unless there is no other way to get something to work. Your text was not positioned properly because of negative margins. Another problem in your paragraph was that you were setting line breaks on your own. HTML will do line breaks automatically for you so you don't have to do it. Below working code. Please compare your code and my code to see what and why I changed something

<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image{
      position: relative;
      display: block;
    }

    .text{
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }
    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
    }
    .tablecell {
      background-color: white;
      position: relative;
    }
    .h2 {
      color: black;
      text-align:left;
      margin-left:10px;
      vertical-align:top;
      font-size:20px;
      margin-top:5px;
      margin-bottom:0px;
    }

    h1 {
      color:yellow;
    }

    a {
      color:black;
      text-decoration:none;
    }


    .tablecell2 {
      background-color: white;
      width: 200px;
      vertical-align:top;
      padding-top:10px;
    }
         </style>
</head>
<body border="1"> 
  <table>
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien, komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä. Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus, Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

bomberblyat · May 25, 2017

22 minutes ago, zwirek2201 said:

The biggest issue that you're having is that you're setting negative margins. You should NEVER set negative margin unless there is no other way to get something to work. Your text was not positioned properly because of negative margins. Another problem in your paragraph was that you were setting line breaks on your own. HTML will do line breaks automatically for you so you don't have to do it. Below working code. Please compare your code and my code to see what and why I changed something


<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image{
      position: relative;
      display: block;
    }

    .text{
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }
    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
    }
    .tablecell {
      background-color: white;
      position: relative;
    }
    .h2 {
      color: black;
      text-align:left;
      margin-left:10px;
      vertical-align:top;
      font-size:20px;
      margin-top:5px;
      margin-bottom:0px;
    }

    h1 {
      color:yellow;
    }

    a {
      color:black;
      text-decoration:none;
    }


    .tablecell2 {
      background-color: white;
      width: 200px;
      vertical-align:top;
      padding-top:10px;
    }
         </style>
</head>
<body border="1"> 
  <table>
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien, komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä. Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus, Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

oh i see ^^ thank you once again my friend !

bomberblyat · May 25, 2017

1 hour ago, zwirek2201 said:

The biggest issue that you're having is that you're setting negative margins. You should NEVER set negative margin unless there is no other way to get something to work. Your text was not positioned properly because of negative margins. Another problem in your paragraph was that you were setting line breaks on your own. HTML will do line breaks automatically for you so you don't have to do it. Below working code. Please compare your code and my code to see what and why I changed something


<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image{
      position: relative;
      display: block;
    }

    .text{
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }
    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
    }
    .tablecell {
      background-color: white;
      position: relative;
    }
    .h2 {
      color: black;
      text-align:left;
      margin-left:10px;
      vertical-align:top;
      font-size:20px;
      margin-top:5px;
      margin-bottom:0px;
    }

    h1 {
      color:yellow;
    }

    a {
      color:black;
      text-decoration:none;
    }


    .tablecell2 {
      background-color: white;
      width: 200px;
      vertical-align:top;
      padding-top:10px;
    }
         </style>
</head>
<body border="1"> 
  <table>
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien, komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä. Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus, Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

and by the way how do i size the colum to be under image not to go over like the white part?? width or height doesnt work

zwirek2201 · May 25, 2017

6 minutes ago, bomberblyat said:

and by the way how do i size the colum to be under image not to go over like the white part?? width or height doesnt work

I don't really understand what you mean. Could you provide a screenshot with more information? Which column do you want to resize and what image do you mean?

aithos · May 25, 2017

Just a thought... you probably shouldn't be doing his homework for him. He won't learn if you're giving him the answers, because even though you're explaining things he obviously isn't really reading (or at least not understanding) the concepts you're explaining. One of the most important skills for any aspiring software developer is the ability to quickly learn how to do new things and to be able to solve problems without assistance. CSS is one of the most basic aspects of web development and there are numerous resources (W3Schools) with in-browser tutorials available.

As for classes vs IDs, unless I missed it I don't think you ever really explained why/when you'd use each.

OP:

A CSS class (.myClass) is for when you have one or more elements that you want to have consistent styles throughout a website. You create a class in order to re-use the code so that you don't have to duplicate it, because that makes it much harder to manage later when you have to modify it and have the same code in several locations. Example: you have a basic style for a grid with alternating row colors, font, header, etc that will be used multiple pages. You can then create a class such as .grid-default and simply assign the class to each grid.

An ID (#myGrid) is for when you have a one-off situation where you need to make style changes to a single control. For example, say you have one particular grid where you need to add special styles that aren't included in your .grid-default class and you KNOW that you won't be adding those styles to anything else. You would then create them using the ID so that they don't affect the other grids. Alternatively, if you are diligent with the order in your CSS file you can use IDs to override class settings... but I don't recommend doing that as it makes reading the code (and therefore maintenance) harder.

Also...

This:

<div class="header">
  <div class="image">
    <img src="aurinkokunta.jpg">
    <div class="text">
      <h1>Aurinkokunta</h1>
    </div>
  </div>
</div>

Can be written like this:

<div class="header image">
  <img src="aurinkokunta.jpg">
  <div class="text">
    <h1>Aurinkokunta</h1>
  </div>
</div>

There is no reason for the extra div, you can assign multiple classes to one element by separating them with spaces.

For that matter, your classes there are redundant...

This:

.header 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
}

.image 
{
  position: relative;
  display: block;
}

Can be written like this:

.header-image 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
  display: block;
}

When you design classes you want as few lines of code as possible, so combine things whenever possible. If you find later that there is a need for another div or a separate class then you can always break those out, but once you end up with several dozen unnecessary classes or elements it is MUCH harder to refactor and consolidate. Especially when you have deadlines or multiple people working on the same application. Get in good habits now or you're going to have a hard time managing your code later.

bomberblyat · May 25, 2017

15 minutes ago, aithos said:
Just a thought... you probably shouldn't be doing his homework for him. He won't learn if you're giving him the answers, because even though you're explaining things he obviously isn't really reading (or at least not understanding) the concepts you're explaining. One of the most important skills for any aspiring software developer is the ability to quickly learn how to do new things and to be able to solve problems without assistance. CSS is one of the most basic aspects of web development and there are numerous resources (W3Schools) with in-browser tutorials available.

As for classes vs IDs, unless I missed it I don't think you ever really explained why/when you'd use each.

OP:

A CSS class (.myClass) is for when you have one or more elements that you want to have consistent styles throughout a website. You create a class in order to re-use the code so that you don't have to duplicate it, because that makes it much harder to manage later when you have to modify it and have the same code in several locations. Example: you have a basic style for a grid with alternating row colors, font, header, etc that will be used multiple pages. You can then create a class such as .grid-default and simply assign the class to each grid.

An ID (#myGrid) is for when you have a one-off situation where you need to make style changes to a single control. For example, say you have one particular grid where you need to add special styles that aren't included in your .grid-default class and you KNOW that you won't be adding those styles to anything else. You would then create them using the ID so that they don't affect the other grids. Alternatively, if you are diligent with the order in your CSS file you can use IDs to override class settings... but I don't recommend doing that as it makes reading the code (and therefore maintenance) harder.

Also...

This:
<div class="header">
  <div class="image">
    <img src="aurinkokunta.jpg">
    <div class="text">
      <h1>Aurinkokunta</h1>
    </div>
  </div>
</div>
Can be written like this:
<div class="header image">
  <img src="aurinkokunta.jpg">
  <div class="text">
    <h1>Aurinkokunta</h1>
  </div>
</div>
There is no reason for the extra div, you can assign multiple classes to one element by separating them with spaces.

For that matter, your classes there are redundant...

This:
.header 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
}

.image 
{
  position: relative;
  display: block;
}
Can be written like this:
.header-image 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
  display: block;
}
When you design classes you want as few lines of code as possible, so combine things whenever possible. If you find later that there is a need for another div or a separate class then you can always break those out, but once you end up with several dozen unnecessary classes or elements it is MUCH harder to refactor and consolidate. Especially when you have deadlines or multiple people working on the same application. Get in good habits now or you're going to have a hard time managing your code later.

ookay, thanks

bomberblyat · May 25, 2017

1 hour ago, zwirek2201 said:

I don't really understand what you mean. Could you provide a screenshot with more information? Which column do you want to resize and what image do you mean?

https://gyazo.com/f3a6bb5eddfc385ba5606b6c5fb340ed

ps. sorry for late response

zwirek2201 · May 25, 2017

23 minutes ago, aithos said:
Just a thought... you probably shouldn't be doing his homework for him. He won't learn if you're giving him the answers, because even though you're explaining things he obviously isn't really reading (or at least not understanding) the concepts you're explaining. One of the most important skills for any aspiring software developer is the ability to quickly learn how to do new things and to be able to solve problems without assistance. CSS is one of the most basic aspects of web development and there are numerous resources (W3Schools) with in-browser tutorials available.

As for classes vs IDs, unless I missed it I don't think you ever really explained why/when you'd use each.

OP:

A CSS class (.myClass) is for when you have one or more elements that you want to have consistent styles throughout a website. You create a class in order to re-use the code so that you don't have to duplicate it, because that makes it much harder to manage later when you have to modify it and have the same code in several locations. Example: you have a basic style for a grid with alternating row colors, font, header, etc that will be used multiple pages. You can then create a class such as .grid-default and simply assign the class to each grid.

An ID (#myGrid) is for when you have a one-off situation where you need to make style changes to a single control. For example, say you have one particular grid where you need to add special styles that aren't included in your .grid-default class and you KNOW that you won't be adding those styles to anything else. You would then create them using the ID so that they don't affect the other grids. Alternatively, if you are diligent with the order in your CSS file you can use IDs to override class settings... but I don't recommend doing that as it makes reading the code (and therefore maintenance) harder.

Also...

This:
<div class="header">
  <div class="image">
    <img src="aurinkokunta.jpg">
    <div class="text">
      <h1>Aurinkokunta</h1>
    </div>
  </div>
</div>
Can be written like this:
<div class="header image">
  <img src="aurinkokunta.jpg">
  <div class="text">
    <h1>Aurinkokunta</h1>
  </div>
</div>
There is no reason for the extra div, you can assign multiple classes to one element by separating them with spaces.

For that matter, your classes there are redundant...

This:
.header 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
}

.image 
{
  position: relative;
  display: block;
}
Can be written like this:
.header-image 
{
  position: relative;
  text-align: center;
  margin-left: 200px;
  display: block;
}
When you design classes you want as few lines of code as possible, so combine things whenever possible. If you find later that there is a need for another div or a separate class then you can always break those out, but once you end up with several dozen unnecessary classes or elements it is MUCH harder to refactor and consolidate. Especially when you have deadlines or multiple people working on the same application. Get in good habits now or you're going to have a hard time managing your code later.

I like to believe that he is honest enough to understand that he will not learn if he just copy pastes my code. I would like to tell him what he's doing wrong, but on forum this kind of "conversation" could take hundreds of posts. If he doesn't look at my code and his code and tries to understand what I changed and why I did it then he obviously will not learn, but that one is on him

bomberblyat · May 25, 2017

Just now, zwirek2201 said:

I like to believe that he is honest enough to understand that he will not learn if he just copy pastes my code. I would like to tell him what he's doing wrong, but on forum this kind of "conversation" could take hundreds of posts. If he doesn't look at my code and his code and tries to understand what I changed and why I did it then he obviously will not learn, but that one is on him

i have saved every copy of these codes made by me and you and i have looked what i have done wrong etc coz its really useful for me ^^

zwirek2201 · May 25, 2017

26 minutes ago, bomberblyat said:

https://gyazo.com/f3a6bb5eddfc385ba5606b6c5fb340ed

ps. sorry for late response

At the moment I don't know how to fix that. There is some kind of problem with aligning the whole page, but I don't know at the moment. I will try to help you in a couple of hours if I can

bomberblyat · May 26, 2017

20 hours ago, zwirek2201 said:

At the moment I don't know how to fix that. There is some kind of problem with aligning the whole page, but I don't know at the moment. I will try to help you in a couple of hours if I can

<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image{
      position: relative;
      display: block;
    }

    .text{
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }
    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
	  font-family: sans-serif;
    }
    .tablecell {
      background-color: white;
      position: relative;
	  float: left;
	  margin-left: 190px;
    }
    .h2 {
      color: black;
      text-align:left;
      margin-left:0px;
      vertical-align:top;
      font-size:20px;
      margin-top:5px;
      margin-bottom:0px;
	  margin-left: 00px
	  
    }

    h1 {
      color:yellow;
	  margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      margin-bottom:0px;
	  font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none;
	  
    }


    .tablecell2 {
      background-color: white;
      width: 144px;
	  height: 170px
      vertical-align:top;
      padding-top:90px;
	  float: right;
    }
	
         </style>
</head>
<body> 
  <table>
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

i fixed it ! but now only problem is those h2 text placement

example pic : https://gyazo.com/0799ddabc7638c93ced5ac3fb2966ab8

and rest of page i trust i can do alone ! ^^

zwirek2201 · May 26, 2017

27 minutes ago, bomberblyat said:


<head>
  <style>
    body {
      width: 960px;
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image{
      position: relative;
      display: block;
    }

    .text{
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }
    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
	  font-family: sans-serif;
    }
    .tablecell {
      background-color: white;
      position: relative;
	  float: left;
	  margin-left: 190px;
    }
    .h2 {
      color: black;
      text-align:left;
      margin-left:0px;
      vertical-align:top;
      font-size:20px;
      margin-top:5px;
      margin-bottom:0px;
	  margin-left: 00px
	  
    }

    h1 {
      color:yellow;
	  margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      margin-bottom:0px;
	  font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none;
	  
    }


    .tablecell2 {
      background-color: white;
      width: 144px;
	  height: 170px
      vertical-align:top;
      padding-top:90px;
	  float: right;
    }
	
         </style>
</head>
<body> 
  <table>
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

i fixed it ! but now only problem is those h2 text placement

example pic : https://gyazo.com/0799ddabc7638c93ced5ac3fb2966ab8

and rest of page i trust i can do alone ! ^^

Hi!

While you did kind of fix it, you just set the left margin of the table to 190px so it looked like it was centered, but if you changed your display size, it would be off center. I fixed it though (it turned out to be the width of the body that was causing it to be off center).

I fixed the h2 placements as well so now the table looks like on the screen shot.

<head>
  <style>
    body {
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image {
      position: relative;
      display: block;
    }

    .table {
      width:960px;
      margin: 0 auto;
      border-spacing:0px;
    }

    .text {
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }

    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
      font-family: sans-serif;
    }

    .tablecell {
      background-color: white;
      position:relative;
    }

    .h2 {
      color: black;
      text-align:left;
      font-size:20px;
      margin:5px;
    }

    h1 {
      color:yellow;
      margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none; 
    }

    .tablecell2 {
      background-color: white;
      width: 160px;
      vertical-align:top;
      padding-top:30px;
    }
  </style>
</head>
<body> 
  <table class="table">
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

bomberblyat · May 26, 2017

7 hours ago, zwirek2201 said:

Hi!

While you did kind of fix it, you just set the left margin of the table to 190px so it looked like it was centered, but if you changed your display size, it would be off center. I fixed it though (it turned out to be the width of the body that was causing it to be off center).

I fixed the h2 placements as well so now the table looks like on the screen shot.


<head>
  <style>
    body {
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image {
      position: relative;
      display: block;
    }

    .table {
      width:960px;
      margin: 0 auto;
      border-spacing:0px;
    }

    .text {
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }

    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
      font-family: sans-serif;
    }

    .tablecell {
      background-color: white;
      position:relative;
    }

    .h2 {
      color: black;
      text-align:left;
      font-size:20px;
      margin:5px;
    }

    h1 {
      color:yellow;
      margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none; 
    }

    .tablecell2 {
      background-color: white;
      width: 160px;
      vertical-align:top;
      padding-top:30px;
    }
  </style>
</head>
<body> 
  <table class="table">
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

thanks alot !

bomberblyat · May 28, 2017

On 26.5.2017 at 9:43 PM, bomberblyat said:

thanks alot !

<head>
  <style>
    body {
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image {
      position: relative;
      display: block;
    }

    .table {
      width:960px;
      margin: 0 auto;
      border-spacing:0px;
    }

    .text {
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }

    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
      font-family: sans-serif;
    }

    .tablecell {
      background-color: white;
      position:relative;
	  float:left;
	  margin-left: 150px
    }

    .h2 {
      color: black;
      text-align:left;
      font-size:20px;
      margin:5px;
    }

    h1 {
      color:yellow;
      margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none; 
    }

    .tablecell2 {
      background-color: white;
      width: 160px;
      vertical-align:top;
      padding-top:85px;
	  float: right;
	  margin-right:24px;
    }
	.footer {
  position: absolute;
  right: 00;
  bottom: 180;
  left: 113;
  height:10px;
  margin-left: 130px;
  margin-right: 117px;
  vertical-align:middle;

}
h4 {
	color: white;
	 vertical-align:top;
	 background-color: grey
}
a:visited {
    color: red;
}
a:link {
    color: green;
}
  </style>
</head>
<body> 
  <table class="table">
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
	  <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
     </td>
      <td class="tablecell2">
        <li><a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a></li>
        <li><a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a></li>
        <li><a href="ihminen.html"><h2 class="h2">Planeetat</h2></a></li>
        <li><a href="palaute.html"><h2 class="h2">Historia</h2></a></li>
      </td>
    </tr>
	<th class="footer"><h4 class="h4">Site name</th>
	</tr>
  </table>
</body>

1 thing need to do anymore link visited styling to links and no clue how that happens ( if you wonder why there is <li> i heard you need that to style links)

bomberblyat · May 28, 2017

On 26.5.2017 at 2:24 PM, zwirek2201 said:

Hi!

While you did kind of fix it, you just set the left margin of the table to 190px so it looked like it was centered, but if you changed your display size, it would be off center. I fixed it though (it turned out to be the width of the body that was causing it to be off center).

I fixed the h2 placements as well so now the table looks like on the screen shot.


<head>
  <style>
    body {
      text-align:center;
      background-color: black;
      background-image: url("/tht11/aurinkokunta.jpg");
      background-repeat: no-repeat;
      background-size: 960px auto;
      background-position: top;
    }

    .header {
      position: relative;
      text-align: center;
      margin-left: 200px;
    }

    .image {
      position: relative;
      display: block;
    }

    .table {
      width:960px;
      margin: 0 auto;
      border-spacing:0px;
    }

    .text {
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      text-align: center;
      vertical-align:middle;
    }

    .text h2 {
      color: yellow;
      display: inline-table;
      vertical-align:middle;

    }

    .p {
      color: black;		
      text-align:left;
      margin-left:5px;
      margin-right:5px;
      font-family: sans-serif;
    }

    .tablecell {
      background-color: white;
      position:relative;
    }

    .h2 {
      color: black;
      text-align:left;
      font-size:20px;
      margin:5px;
    }

    h1 {
      color:yellow;
      margin-left:20px;
      vertical-align:top;
      font-size:50px;
      margin-top:150px;
      font-family: sans-serif;
    }

    a {
      color:black;
      text-decoration:none; 
    }

    .tablecell2 {
      background-color: white;
      width: 160px;
      vertical-align:top;
      padding-top:30px;
    }
  </style>
</head>
<body> 
  <table class="table">
    <tr>
      <th colspan="2"></th>
    </tr>
    <tr>
      <td> 
        <div class="header">
          <div class="image">
            <img src="aurinkokunta.jpg">
            <div class="text">
              <h1>Aurinkokunta</h1>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tablecell">
        <p class="p">Aurinkokunta on Auringon ja kaikkien aurinkoa   kiertävien kappaleiden, kuten planeettojen, kuiden, meteoroidien,<br> komeettojen sekä pikkuplaneettojen, kuten asteroidien ja transneptunisten kohteiden muodostama järjestelmä.<br> Pyöreitä pikkuplaneettoja kutsutaan kääpiöplaneetoiksi.
          <br><br>
          Aurinkokuntamme planeetat ovat Auringosta poispäin lukien Merkurius, Venus, Maa, Mars, Jupiter, Saturnus,<br> Uranus ja Neptunus. Aikaisemmin planeettoihin kuulunut Pluto luokiteltiin kääpiöplaneetaksi ja plutoidiksi<br> 2000-vuosikymmenen loppupuolella. Pluton kohtalo ei ole ainutlaatuinen sillä myös ensimmäisina löydetyt <br>asteroidit Ceres, Pallas, Juno ja Vesta luettiin 1800-luvun alussa planeettojen joukkoon. Aurinkokunnan iäksi on<br> saatu noin 4,6 miljardia vuotta. Myös muilla tähdillä on havaittu omia eksoplaneettojen muodostamia planeettakuntia.
        </p>
      </td>
      <td class="tablecell2">
        <a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>
        <a href="kokojasijainti.html"><h2 class="h2">Koko ja sijainti</h2></a>
        <a href="ihminen.html"><h2 class="h2">Planeetat</h2></a>
        <a href="palaute.html"><h2 class="h2">Historia</h2></a>
      </td>
    </tr>
  </table>
</body>

1 thing need to do anymore link visited styling to links and no clue how that happens ( if you wonder why there is <li> i heard you need that to style links)

zwirek2201 · May 28, 2017

39 minutes ago, bomberblyat said:

1 thing need to do anymore link visited styling to links and no clue how that happens ( if you wonder why there is <li> i heard you need that to style links)

You don't need <li> to style links. <li> tag is a "List Item" tag and it has nothing to do with links.

To style a link in CSS, you use selector "a" like this:

a {
  color:black;
  text-decoration:none;
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

a:link (or just a) - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

To style for more than one state, you have to use more than one selector like so:

a:link {
  color:black;
}

a:visited {
  color:red;
}

a:hover {
  color:green;
}

a:active {
  color:yellow;
}

I this example an unvisited link is going to be black and visited link is going to be red. When you hover over a link, it is going to turn green and while it's active (while you click it) it's going to be yellow.

bomberblyat · May 28, 2017

2 minutes ago, zwirek2201 said:
You don't need <li> to style links. <li> tag is a "List Item" tag and it has nothing to do with links.

To style a link in CSS, you use selector "a" like this:
a {
  color:black;
  text-decoration:none;
}
In addition, links can be styled differently depending on what state they are in.

The four links states are:

a:link (or just a) - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

To style for more than one state, you have to use more than one selector like so:
a:link {
  color:black;
}

a:visited {
  color:red;
}

a:hover {
  color:green;
}

a:active {
  color:yellow;
}
I this example an unvisited link is going to be black and visited link is going to be red. When you hover over a link, it is going to turn green and while it's active (while you click it) it's going to be yellow.

ok thanks ill try it when i get to home ^^

bomberblyat · May 29, 2017

19 hours ago, zwirek2201 said:
You don't need <li> to style links. <li> tag is a "List Item" tag and it has nothing to do with links.

To style a link in CSS, you use selector "a" like this:
a {
  color:black;
  text-decoration:none;
}
In addition, links can be styled differently depending on what state they are in.

The four links states are:

a:link (or just a) - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

To style for more than one state, you have to use more than one selector like so:
a:link {
  color:black;
}

a:visited {
  color:red;
}

a:hover {
  color:green;
}

a:active {
  color:yellow;
}
I this example an unvisited link is going to be black and visited link is going to be red. When you hover over a link, it is going to turn green and while it's active (while you click it) it's going to be yellow.

sadly i didnt get it working i tried to google examples but i didnt find

Sign In

CSS/HTML HELP

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites