Jump to content

CSS/HTML HELP

Go to solution Solved by zwirek2201,
4 hours ago, bomberblyat said:

<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
		margin-left: -400px;
		left: 500px;
		bottom: 20px;
		position: relative;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
	nav {
		background-color: green;
		color: #FFFFF;
		list-style: none;
		text-align: center;
		padding: 20px 0 20px 0;
		{
.nav > li {
		display: inline-block;
		padding: 0 25px 0 25p;
		}
.nav > li > a {
		color; #FFFFF
		text-decoration: none;
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<nav>
	<a href="#">Kevät</a></h2>
	<a href="#">Kesä</a></h2>
	<a href="#">Syksy</a></h2>
	<a href="#">Talvi</a></h2>
	</nav>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	<td></td>
	</tr>
</table>
</body>
</html>

well this is my last one from today atleast i have next time time to finish this so i could really use some help, i know there is - things but i dont know any else solution at the moment, excuse me for distraction :)

I will not be able to help you with this one because I'm really busy with my work.

 

On top of that I advised you to not use negative values for margins which you did not do, to only enclose the margin in the table which you did not do and to not center the content using margins which you also did not do. I tried helping you with the project/homework, but at this point it is just me writing some code for you. Also, your code has multiple syntax errors (including unclosed tags, hex colors with only 5 characters in the value, misused brackets etc.) and on top of that you are starting to use stuff that you really don't need (like child selectors) which only complicates your code. This is really not a difficult webpage and at this point you should easily be able to do it.

 

My last advice:

 

1. Image

2. Table with menu buttons

3. Header

4. Text

 

Do not put image or text in the table, only menu buttons.

 

Read all of the posts again because they contain solutions for every problem that you're having.

Just now, bomberblyat said:

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

What is the problem? Do they not change colors? Can you post your code?

Try, fail, learn, repeat...

Link to comment
Share on other sites

Link to post
Share on other sites

2 hours ago, zwirek2201 said:

What is the problem? Do they not change colors? Can you post your code?

you got my codes? i think i used those wrong way

Link to comment
Share on other sites

Link to post
Share on other sites

2 hours ago, zwirek2201 said:

What is the problem? Do they not change colors? Can you post your code?

man i think i got it i found actually good video which explains me all, you dont need to fix it ^^

Link to comment
Share on other sites

Link to post
Share on other sites

 

3 minutes ago, bomberblyat said:

you got my codes? i think i used those wrong way

Yes, I got your code, and by the way, please delete the post with unformatted code, because it makes thread unnecessarily long.

 

There are two problems with your code:

- You don't need to put any divs with class names like "a:hover" etc. 

<head>
  <style>
    a {
    color:black;
    }
    
    a:hover {
    color:red;
    }
  </style>
</head>
<body>
  <a href="#">Link</a>
  <a href="#">Link 2</a>
</body>

^ This code is what you need to look at when creating your links. You don't need any class in <a> tag because you're using a selector which will style every link the same.

 

Another problem is that you're using links like this:

<a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>

which essentially means:

- Get style from CSS for "<a>" tag

- Get style from CSS for "h2" class overriding everything

 

To get it to work, you have to switch <a> and <h2> so it first gets all of the <h2> properties and then <a> properties.

 

Here's code:

<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:link {
      color:black;
    }
    a:visited {
      color:red;
    }
    a:hover {
      color:green;
    }
    a:active {
      color:yellow;
    }
  </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">
        <h2 class="h2"><a href="Etusivu.html">Etusivu</a></h2>
        <h2 class="h2"><a href="kokojasijainti.html">Koko ja sijainti</a></h2>
        <h2 class="h2"><a href="ihminen.html">Planeetat</a></h2>
        <h2 class="h2"><a href="palaute.html">Historia</a></h2>
      </td>
    </tr>
    <th class="footer"><h4 class="h4">Site name</h4></th>
  </table>
</body>

 

Try, fail, learn, repeat...

Link to comment
Share on other sites

Link to post
Share on other sites

Just now, zwirek2201 said:

 

Yes, I got your code, and by the way, please delete the post with unformatted code, because it makes thread unnecessarily long.

 

There are two problems with your code:

- You don't need to put any divs with class names like "a:hover" etc. 


<head>
  <style>
    a {
    color:black;
    }
    
    a:hover {
    color:red;
    }
  </style>
</head>
<body>
  <a href="#">Link</a>
  <a href="#">Link 2</a>
</body>

^ This code is what you need to look at when creating your links. You don't need any class in <a> tag because you're using a selector which will style every link the same.

 

Another problem is that you're using links like this:


<a href="Etusivu.html"><h2 class="h2">Etusivu</h2></a>

which essentially means:

- Get style from CSS for "<a>" tag

- Get style from CSS for "h2" class overriding everything

 

To get it to work, you have to switch <a> and <h2> so it first gets all of the <h2> properties and then <a> properties.

 

Here's code:


<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:link {
      color:black;
    }
    a:visited {
      color:red;
    }
    a:hover {
      color:green;
    }
    a:active {
      color:yellow;
    }
  </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">
        <h2 class="h2"><a href="Etusivu.html">Etusivu</a></h2>
        <h2 class="h2"><a href="kokojasijainti.html">Koko ja sijainti</a></h2>
        <h2 class="h2"><a href="ihminen.html">Planeetat</a></h2>
        <h2 class="h2"><a href="palaute.html">Historia</a></h2>
      </td>
    </tr>
    <th class="footer"><h4 class="h4">Site name</h4></th>
  </table>
</body>

 

thanks dude ^^, you  were bit too late but i still respect that you help ^^

 this video helped me soo much

Link to comment
Share on other sites

Link to post
Share on other sites

Just now, bomberblyat said:

thanks dude ^^, you  were bit too late but i still respect that you help ^^

 this video helped me soo much

That's a good direction for you. It's a good idea to find a series of videos on Youtube. 

 

THIS playlist is what helped me go through learning CSS.

Try, fail, learn, repeat...

Link to comment
Share on other sites

Link to post
Share on other sites

1 hour ago, zwirek2201 said:

That's a good direction for you. It's a good idea to find a series of videos on Youtube. 

 

THIS playlist is what helped me go through learning CSS.

Hello my friend this is new task i dont know if my table is f*cked up or something could you please check it ?

<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
		margin-left: -400px;
		left: 500px;
		bottom: 20px;
		position: relative;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<div id="menu">
    <td><h2 class="h2"><a href="#">Kevät</a></h2></td>
	<td><h2 class="h2"><a href="#">Kesä</a></h2></td>
	<td><h2 class="h2"><a href="#">Syksy</a></h2></td>
	<td><h2 class="h2"><a href="#">Talvi</a></h2></td>
	</div>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	</tr>
</table>
</body>
</html>

it should look like this https://gyazo.com/f3dd87b26acf1dc35e77971e1efabb52

thanks already ^^

Link to comment
Share on other sites

Link to post
Share on other sites

8 minutes ago, bomberblyat said:

Hello my friend this is new task i dont know if my table is f*cked up or something could you please check it ?


<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
		margin-left: -400px;
		left: 500px;
		bottom: 20px;
		position: relative;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<div id="menu">
    <td><h2 class="h2"><a href="#">Kevät</a></h2></td>
	<td><h2 class="h2"><a href="#">Kesä</a></h2></td>
	<td><h2 class="h2"><a href="#">Syksy</a></h2></td>
	<td><h2 class="h2"><a href="#">Talvi</a></h2></td>
	</div>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	</tr>
</table>
</body>
</html>

it should look like this https://gyazo.com/f3dd87b26acf1dc35e77971e1efabb52

thanks already ^^

Well, at this point. I told you everything you need to know about styling links, tables etc and what you have is pretty close to what you're supposed to have. There are some small mistakes that break the layout, but I believe you will be able to find them if you work on it. Remember to keep your code clean and check for any unclosed tags in html and unnecessary selectors in CSS, it will make your work way easier.

 

 The only thing that I can tell you is that your table should contain only one row with menu and the rest should be positioned within the body. Remember to never use negative values for margins  and to not use margin if you want to center something. Use CSS align properties. When you think your page looks good, make the window smaller and see what breaks and fix it.

 

Go through all of the posts that I and others wrote and you should be good ;) Consider it a review of what you've already learned.

Try, fail, learn, repeat...

Link to comment
Share on other sites

Link to post
Share on other sites

24 minutes ago, zwirek2201 said:

Well, at this point. I told you everything you need to know about styling links, tables etc and what you have is pretty close to what you're supposed to have. There are some small mistakes that break the layout, but I believe you will be able to find them if you work on it. Remember to keep your code clean and check for any unclosed tags in html and unnecessary selectors in CSS, it will make your work way easier.

 

 The only thing that I can tell you is that your table should contain only one row with menu and the rest should be positioned within the body. Remember to never use negative values for margins  and to not use margin if you want to center something. Use CSS align properties. When you think your page looks good, make the window smaller and see what breaks and fix it.

 

Go through all of the posts that I and others wrote and you should be good ;) Consider it a review of what you've already learned.

im trying it put it just becames messy and i feel so frustarated that i need to delete whole code and make new whole code and i used like 1-3h to that code

Link to comment
Share on other sites

Link to post
Share on other sites

51 minutes ago, zwirek2201 said:

Well, at this point. I told you everything you need to know about styling links, tables etc and what you have is pretty close to what you're supposed to have. There are some small mistakes that break the layout, but I believe you will be able to find them if you work on it. Remember to keep your code clean and check for any unclosed tags in html and unnecessary selectors in CSS, it will make your work way easier.

 

 The only thing that I can tell you is that your table should contain only one row with menu and the rest should be positioned within the body. Remember to never use negative values for margins  and to not use margin if you want to center something. Use CSS align properties. When you think your page looks good, make the window smaller and see what breaks and fix it.

 

Go through all of the posts that I and others wrote and you should be good ;) Consider it a review of what you've already learned.

<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<ul class="nav">
  <li><a href="Kevät">Kevät</a></li>
  <li><a href="Kesä">Kesä</a></li>
  <li><a href="Syksy">Syksy</a></li>
  <li><a href="Talvi">Talvi</a></li>
</ul>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	</tr>
	<tr>
	<td>TEXT HERE</td>
	</tr>
</table>
</body>
</html>

this is best what i can do atm xD

Link to comment
Share on other sites

Link to post
Share on other sites

1 hour ago, zwirek2201 said:

Well, at this point. I told you everything you need to know about styling links, tables etc and what you have is pretty close to what you're supposed to have. There are some small mistakes that break the layout, but I believe you will be able to find them if you work on it. Remember to keep your code clean and check for any unclosed tags in html and unnecessary selectors in CSS, it will make your work way easier.

 

 The only thing that I can tell you is that your table should contain only one row with menu and the rest should be positioned within the body. Remember to never use negative values for margins  and to not use margin if you want to center something. Use CSS align properties. When you think your page looks good, make the window smaller and see what breaks and fix it.

 

Go through all of the posts that I and others wrote and you should be good ;) Consider it a review of what you've already learned.

<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
		margin-left: -400px;
		left: 500px;
		bottom: 20px;
		position: relative;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
	nav {
		background-color: green;
		color: #FFFFF;
		list-style: none;
		text-align: center;
		padding: 20px 0 20px 0;
		{
.nav > li {
		display: inline-block;
		padding: 0 25px 0 25p;
		}
.nav > li > a {
		color; #FFFFF
		text-decoration: none;
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<nav>
	<a href="#">Kevät</a></h2>
	<a href="#">Kesä</a></h2>
	<a href="#">Syksy</a></h2>
	<a href="#">Talvi</a></h2>
	</nav>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	<td></td>
	</tr>
</table>
</body>
</html>

well this is my last one from today atleast i have next time time to finish this so i could really use some help, i know there is - things but i dont know any else solution at the moment, excuse me for distraction :)

Link to comment
Share on other sites

Link to post
Share on other sites

4 hours ago, bomberblyat said:

<!DOCTYPE html>
<html>
<head>
<title>tht12</title>
<style>
	body {
		width: 900px;
		background-color: #F1D01F;
	}
	.header {
		margin-left: 450px; 
	  }
	.kuva {
		position: relative;
		display: block;
    }
	#menu {
		height: 40px;
		background-color: green;
		margin-left: 450px;
		position: absolute;
		text-align: center;
		width: 900px;
	}
	h2 {
		color: black;
		margin-left: -400px;
		left: 500px;
		bottom: 20px;
		position: relative;
	}
	.p {
		color: black;		
		text-align:left;
		margin-left:500px;
		margin-right:-500px;
		margin-top: 0px;
		font-family: sans-serif;
    }
	#maintable {
		width: 900px;
		background-color: #F1D01F;
		margin-left: 450px;
	}
	tablecell {
		width: 400px;
	}
	nav {
		background-color: green;
		color: #FFFFF;
		list-style: none;
		text-align: center;
		padding: 20px 0 20px 0;
		{
.nav > li {
		display: inline-block;
		padding: 0 25px 0 25p;
		}
.nav > li > a {
		color; #FFFFF
		text-decoration: none;
</style>
</head>
<body>
<table id="maintable" border>
  <tr>
    <div class="header">
    <div class="image">
    <img src="kevat.jpg">
	<th></th>
	</div>
	</div>
	</tr>
	<tr>
	<nav>
	<a href="#">Kevät</a></h2>
	<a href="#">Kesä</a></h2>
	<a href="#">Syksy</a></h2>
	<a href="#">Talvi</a></h2>
	</nav>
	</tr>
	<tr>
	<td class="tablecell"><h2 class="h2">Kevät</td>
	<td></td>
	</tr>
</table>
</body>
</html>

well this is my last one from today atleast i have next time time to finish this so i could really use some help, i know there is - things but i dont know any else solution at the moment, excuse me for distraction :)

I will not be able to help you with this one because I'm really busy with my work.

 

On top of that I advised you to not use negative values for margins which you did not do, to only enclose the margin in the table which you did not do and to not center the content using margins which you also did not do. I tried helping you with the project/homework, but at this point it is just me writing some code for you. Also, your code has multiple syntax errors (including unclosed tags, hex colors with only 5 characters in the value, misused brackets etc.) and on top of that you are starting to use stuff that you really don't need (like child selectors) which only complicates your code. This is really not a difficult webpage and at this point you should easily be able to do it.

 

My last advice:

 

1. Image

2. Table with menu buttons

3. Header

4. Text

 

Do not put image or text in the table, only menu buttons.

 

Read all of the posts again because they contain solutions for every problem that you're having.

Try, fail, learn, repeat...

Link to comment
Share on other sites

Link to post
Share on other sites

10 hours ago, zwirek2201 said:

I will not be able to help you with this one because I'm really busy with my work.

 

On top of that I advised you to not use negative values for margins which you did not do, to only enclose the margin in the table which you did not do and to not center the content using margins which you also did not do. I tried helping you with the project/homework, but at this point it is just me writing some code for you. Also, your code has multiple syntax errors (including unclosed tags, hex colors with only 5 characters in the value, misused brackets etc.) and on top of that you are starting to use stuff that you really don't need (like child selectors) which only complicates your code. This is really not a difficult webpage and at this point you should easily be able to do it.

 

My last advice:

 

1. Image

2. Table with menu buttons

3. Header

4. Text

 

Do not put image or text in the table, only menu buttons.

 

Read all of the posts again because they contain solutions for every problem that you're having.

thanks dude i actually made it ! + i made 3 more pages and 1 page with image map thing, now i need to do 1 task anymore then this h*ll is over

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×