0

	body,td,th {
	font-family: Arial;
	font-size: 100%;
	color: #51b2bd;
	}
	body {
	font-family: Palatino Linotype;
	background-color: #1febad;
	}
	
	a:visited {
	text-decoration: none;
	color: #6A0F1B;
	}
	a:hover {
	text-decoration: underline;
	color: #2323D9;
	}
	a:active {
	text-decoration: none;
	color: #2323D9;
	}
	a[class="link"] {
	text-align: left;
	color: yellow;
	}
	
	#encabezado {
	background-color: blue;
	font-size: 125%;
	background-color: #4eb6a7;
	text-align: center;
	//border: 1px solid red;
	width: 100%;
	height: 25%;
	}
	h1 {
	text-decoration: underline;
	text-align: center;
	font-size: 190%;
	color: black;
	}
	.foto0 { 
	padding: 1%; 
	margin: 10px;  
	float: left; 
	width: 35%;
    }
      .foto01 { 
    top:0px;
    right:0px;
	padding: 1%; 
	margin: 10px;  
	float: right; 
	width: 150px;
    }
	#menu {
	float: left;
	background-color: #4eb6a7;
	font-size: 160%;
	color: white;
	text-align: left;
	width: 20%;
	height: 965%;
	}
	#contenido {
	float: center;
	font-size: 120%;
	color: #090963;
	text-align: left;
	width: 95%;
	height: auto;
	}
	table {   
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 70%;  
    margin-left:auto;
    margin-right:auto;    
    width: 30%; 
    text-align: center;   
    border-collapse: collapse; 
    }
	th {    
	font-size: 150%;     
	font-weight: normal;     
	padding: 3%;     
	background: #f9ff46;
    border-top: 4px solid #aabcfe;    
    border-bottom: 1px solid #fff; 
    color:  #93948d; 
    }
	td {    
	padding: 10px;     
	background: #6ee1da;     
	border-bottom: 1px solid #fff;
    color: #394e4f;    
    border-top: 5px solid transparent;
    }
    table#cabecera{
	 border: 0px;
	 width: 10%;
	 height: auto;
	 background-color: #000000;
	 }
	 .azul{
    background-color:#4eb6a7;
    }
	table#final{
	 border: 0px;
	 width: 80%;
	 height: 99%;
	 background-color: #4eb6a7;
	 }
	 .rojo{
	padding: 5px;     
	background: #6ee1da;     
	border-bottom: 1px solid #fff;
    color: #394e4f;    
    border-top: 5px solid transparent;
    } 
	 
	 h2 {
	text-align: center;
	font-size: 200%;
	color: #F33910;
	}
	h3 {
	text-align: left;
	font-size: 135%;
	color: #525117;
	}
	h4 {
	text-align: center;
	font-size: 150%;
	color: #082657;
	}
	h5 {
	margin: 10px;
	text-align: left;
	font-size: 150%;
	color: #581845  ;
	}
	h6 {
	margin: 10px;
	text-align: center;
	font-size: 150%;
	color: #581845  ;
	}
	#video {
	margin-left: 45px;
	 width: 75%;
	 height: auto;
	 text-align: center;
	 }
	 
	.foto1 { 
	padding: 0%; 
	margin: 4%; 
	border: 3px solid black; 
	float: center; 
	width: 70%;
    }
    .foto2 {
	margin-left: 200px; 
	border: 2px solid black; 
	float: center; 
	width: 45%;
	height: auto;
    }
    .foto3 { 
	margin-left: 300px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
    }
    .foto4 {  
	margin-left: 300px;
	margin-top: 20px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
    }
    .foto5 { 
	margin: 50px; 
	border: 2px solid black; 
	float: left; 
	width: 500px;
    }
    .foto6 { 
	margin: 50px; 
	border: 2px solid black; 
	float: right; 
	width: 450px;
    }
    .foto7 { 
	margin-left: 50px; 
	border: 2px solid black; 
	float: center; 
	width: 250px;
	height: auto;
    }
   .foto8 { 
	margin-left: 200px; 
	border: 2px solid black; 
	float: center; 
	width: 50%;
	height: auto;
    }
    .foto9 { 
	margin-left: 400px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
	height: auto;
    }
    .foto10 { 
	margin-left: 400px; 
	border: 2px solid black; 
	float: center; 
	width: 20%;
	height: auto;
    }
    
form {
 
  margin: 0 auto;
  width: 25%;

  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90%;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 75%;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;

  height: 5em;

  resize: vertical;
}
#boton {
    background-color:#4C316D;
    border-radius: 10%;
    box-shadow: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 100%;
    font-weight: 600;
    line-height: 1.612;
    display: inline-block;
    outline: 0;
    text-align: center;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
}
#boton1 {
    background-color: #4C316D;
    border-radius: 10%;
    box-shadow: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 100%;
    font-weight: 600;
    line-height: 1.612;
    display: inline-block;
    outline: 0;
    padding:0 7 0 7;
    text-align: center;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
}
    
	
	#pie {
	background-color: blue;
	font-size: 150%;
	background-color: #295056;
	text-align: left;
	//border: 1px solid red;
	margin-top: 10%;
	width: 100%;
	height: 40%;
	}
	
<html>
	<head><title>GYMBODYFIT</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" type="text/css" href="primera.css">
		<link rel="icon" href="favicon.ico">
		</head>
		<body>
			<div id="encabezado">
			<table id="encabezado">
				<tr>
					<<td class="azul"><img class="foto0" src="imagen0.gif" alt="foto 0"></td><td class="azul"><h1>GYMBODYFIT</h1></td><td class="azul"><img class="foto01" src="imagen01.jpg" alt="foto 01"></td>
				</tr>
				</table>
			</div>
			<div id="menu">
				<ul>
				<li><a href="Inicio.html">Inicio </a></li>
				</ul>
				<ul>
				<li><a href="Como funciona tu cuerpo.html">Como funciona tu cuerpo</a></li>
				</ul>
				<ul>
				<li><a href="Alimentacion.html">Alimentacion</a></li>
				</ul>
				<ul>
				<li><a href="Ejercicio.html">Ejercicios</a></li>
				</ul>
				<ul>
				<li><a href="Experiencias propias y consejos.html">Experiencias propias y consejos</a></li>
				</ul> 
			</div>
			
			<div id="contenido">
				 
				<h2>Inicio </h2>
				<p>En esta pagina web voy a dar consejos para la gente que empieza de nuevo o va un poco perdida me centrare en diferentes aspectos que lleva el ejercicio fisico como puede ser la alimentacion ,los ejercicios ....
				lo que explicare y pondre esta puesto de mi punto de vista y lo que e aprendido has ahora .</p>
				<p>Este es tu turno para transformarte en lo que quieres ser no lo abandones y sigue que nada en este mundo es imposible, si te duele y te cuesta te hace mas fuerte </p>	
				<p><img class="foto1" src="imagen1.jpg" alt="foto 1"></p>
			</div>
			<div id="pie">
			<table id="final">
				<tr>
					<td class="rojo">Para mas informacion os dejo el link de unos youtubers muy buenos que te ayudara</td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCb1TOrjCWjxnAomfr6n_bpQ" target="blank">THE FITNESS BOY</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCm9MSDgaj9fg9q-zMqZ01Ow" target="blank">UlissesWorld</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/user/OfficialJeffSeid" target="blank">Jeff Seid</a></td>
					</tr>
					<tr>
					<td class="rojo">Aqui os dejo mis redes sociales para que no te pierdas nada </td><td class="rojo"><a href="https://es-es.facebook.com/"><img class="foto10"  src="imagen10.png" alt="foto 10" /></a></td><td class="rojo"><a href="https://www.instagram.com/"><img class="foto10" src="imagen101.jpg" alt="foto 10" /></a></td><td class="rojo"><a href="https://twitter.com/"><img class="foto10"  src="imagen102.png" alt="foto 10" /></a></td>
				</tr>
			</table>
			</div>
		</body>
</html>

1

3 respuestas 3

0

Que tal puedes puedes intentar esto:

#menu {
    float: left;
    background-color: #4eb6a7;
    font-size: 160%;
    color: white;
    text-align: left;
    width: 22%;
    height: 541px; 
    margin-top: 0px; 
}

remplace el porcentaje por pixeles adaptándolo a la altura de tu contenido, a demas use un margin-top para acomodarlo en la parte de arriba de tu otro div. No se si la razón por la que tenias el porcentaje era para que fuera responsive.

De ser esa la razon puedes usar @media (este te ayuda a modificar tus estilos dependiendo el ancho de tu ventana):

 @media screen and (min-width: 480px) {
   #menu{height: 341px; }
}

puedes ver mas detalle en: mediaqueries

0

Hola, te comparto tu código un poco modificado, en cuanto a los ajustes de menú que solicitas, espero te ayude en la estructura de tu página ¡Saludos!

body,
td,
th {
  font-family: Arial;
  font-size: 100%;
  color: #51b2bd;
}

body {
  font-family: Palatino Linotype;
  background-color: #1febad;
}

a:visited {
  text-decoration: none;
  color: #6A0F1B;
}

a:hover {
  text-decoration: underline;
  color: #2323D9;
}

a:active {
  text-decoration: none;
  color: #2323D9;
}

a[class="link"] {
  text-align: left;
  color: yellow;
}

#encabezado {
  background-color: blue;
  font-size: 125%;
  background-color: #4eb6a7;
  text-align: center;
  //border: 1px solid red;
  width: 100%;
  height: 25%;
}

h1 {
  text-decoration: underline;
  text-align: center;
  font-size: 190%;
  color: black;
}

.foto0 {
  padding: 1%;
  margin: 10px;
  float: left;
  width: 35%;
}

.foto01 {
  top: 0px;
  right: 0px;
  padding: 1%;
  margin: 10px;
  float: right;
  width: 150px;
}

#menu {
  float: left;
  background-color: #4eb6a7;
  color: #fff;
  text-align: left;
  width: 20%;
  height: 100%;
  margin: 0 10px 0 0;
}

#menu a {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
}

#contenido {
  float: center;
  font-size: 120%;
  color: #090963;
  text-align: left;
  width: 95%;
  height: auto;
}

#contenido p {
    margin: 0;
}

table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 70%;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  text-align: center;
  border-collapse: collapse;
}

th {
  font-size: 150%;
  font-weight: normal;
  padding: 3%;
  background: #f9ff46;
  border-top: 4px solid #aabcfe;
  border-bottom: 1px solid #fff;
  color: #93948d;
}

td {
  padding: 10px;
  background: #6ee1da;
  border-bottom: 1px solid #fff;
  color: #394e4f;
  border-top: 5px solid transparent;
}

table#cabecera {
  border: 0px;
  width: 10%;
  height: auto;
  background-color: #000000;
}
table#encabezado tr td {
    width: 30%;
}

.azul {
  background-color: #4eb6a7;
}

table#final {
  border: 0px;
  width: 80%;
  height: 99%;
  background-color: #4eb6a7;
}

.rojo {
  padding: 5px;
  background: #6ee1da;
  border-bottom: 1px solid #fff;
  color: #394e4f;
  border-top: 5px solid transparent;
}

h2 {
  text-align: center;
  font-size: 200%;
  color: #F33910;
}

h3 {
  text-align: left;
  font-size: 135%;
  color: #525117;
}

h4 {
  text-align: center;
  font-size: 150%;
  color: #082657;
}

h5 {
  margin: 10px;
  text-align: left;
  font-size: 150%;
  color: #581845;
}

h6 {
  margin: 10px;
  text-align: center;
  font-size: 150%;
  color: #581845;
}

#video {
  margin-left: 45px;
  width: 75%;
  height: auto;
  text-align: center;
}

.foto1 {
  margin: 10px;
  border: 3px solid black;
  float: center;
  width: 70%;
}

.foto2 {
  margin-left: 200px;
  border: 2px solid black;
  float: center;
  width: 45%;
  height: auto;
}

.foto3 {
  margin-left: 300px;
  border: 2px solid black;
  float: center;
  width: 30%;
}

.foto4 {
  margin-left: 300px;
  margin-top: 20px;
  border: 2px solid black;
  float: center;
  width: 30%;
}

.foto5 {
  margin: 50px;
  border: 2px solid black;
  float: left;
  width: 500px;
}

.foto6 {
  margin: 50px;
  border: 2px solid black;
  float: right;
  width: 450px;
}

.foto7 {
  margin-left: 50px;
  border: 2px solid black;
  float: center;
  width: 250px;
  height: auto;
}

.foto8 {
  margin-left: 200px;
  border: 2px solid black;
  float: center;
  width: 50%;
  height: auto;
}

.foto9 {
  margin-left: 400px;
  border: 2px solid black;
  float: center;
  width: 30%;
  height: auto;
}

.foto10 {
  margin-left: 400px;
  border: 2px solid black;
  float: center;
  width: 20%;
  height: auto;
}

form {
  margin: 0 auto;
  width: 25%;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

label {
  display: inline-block;
  width: 90%;
  text-align: right;
}

input,
textarea {
  font: 1em sans-serif;
  width: 75%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 5em;
  resize: vertical;
}

#boton {
  background-color: #4C316D;
  border-radius: 10%;
  box-shadow: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 600;
  line-height: 1.612;
  display: inline-block;
  outline: 0;
  text-align: center;
  text-decoration: none;
  width: auto;
  white-space: nowrap;
}

#boton1 {
  background-color: #4C316D;
  border-radius: 10%;
  box-shadow: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 600;
  line-height: 1.612;
  display: inline-block;
  outline: 0;
  padding: 0 7 0 7;
  text-align: center;
  text-decoration: none;
  width: auto;
  white-space: nowrap;
}

#pie {
  background-color: blue;
  font-size: 150%;
  background-color: #295056;
  text-align: left;
  margin-top: 30px;
  width: 100%;
  height: 40%;
}
<html>

<head>
  <title>GYMBODYFIT</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="primera.css">
  <link rel="icon" href="favicon.ico">
</head>

<body>
  <div id="encabezado">
    <table id="encabezado">
      <tr>
        <<td class="azul"><img class="foto0" src="imagen0.gif" alt="foto 0"></td>
          <td class="azul">
            <h1>GYMBODYFIT</h1>
          </td>
          <td class="azul"><img class="foto01" src="imagen01.jpg" alt="foto 01"></td>
      </tr>
    </table>
  </div>
  <div id="menu">
    <ul>
      <li><a href="Inicio.html">Inicio </a></li>
    </ul>
    <ul>
      <li><a href="Como funciona tu cuerpo.html">Como funciona tu cuerpo</a></li>
    </ul>
    <ul>
      <li><a href="Alimentacion.html">Alimentacion</a></li>
    </ul>
    <ul>
      <li><a href="Ejercicio.html">Ejercicios</a></li>
    </ul>
    <ul>
      <li><a href="Experiencias propias y consejos.html">Experiencias propias y consejos</a></li>
    </ul>
  </div>

  <div id="contenido">

    <h2>Inicio </h2>
    <p>En esta pagina web voy a dar consejos para la gente que empieza de nuevo o va un poco perdida me centrare en diferentes aspectos que lleva el ejercicio fisico como puede ser la alimentacion ,los ejercicios .... lo que explicare y pondre esta puesto
      de mi punto de vista y lo que e aprendido has ahora .</p>
    <p>Este es tu turno para transformarte en lo que quieres ser no lo abandones y sigue que nada en este mundo es imposible, si te duele y te cuesta te hace mas fuerte </p>
    <p><img class="foto1" src="imagen1.jpg" alt="foto 1"></p>
  </div>
  <div id="pie">
    <table id="final">
      <tr>
        <td class="rojo">Para mas informacion os dejo el link de unos youtubers muy buenos que te ayudara</td>
        <td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCb1TOrjCWjxnAomfr6n_bpQ" target="blank">THE FITNESS BOY</a></td>
        <td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCm9MSDgaj9fg9q-zMqZ01Ow" target="blank">UlissesWorld</a></td>
        <td class="rojo"><a class="link" href="https://www.youtube.com/user/OfficialJeffSeid" target="blank">Jeff Seid</a></td>
      </tr>
      <tr>
        <td class="rojo">Aqui os dejo mis redes sociales para que no te pierdas nada </td>
        <td class="rojo">
          <a href="https://es-es.facebook.com/"><img class="foto10" src="imagen10.png" alt="foto 10" /></a>
        </td>
        <td class="rojo">
          <a href="https://www.instagram.com/"><img class="foto10" src="imagen101.jpg" alt="foto 10" /></a>
        </td>
        <td class="rojo">
          <a href="https://twitter.com/"><img class="foto10" src="imagen102.png" alt="foto 10" /></a>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

0

Buenas amigo espero esto sea mas o menos lo que buscas saludos.

la idea es poner el menú en position:fixed para que este fijo siempre en la pagina en la pagina y después ponerle un alto de 100% y listo.

*{
margin:0px;
padding:0px;
}
body,td,th {
	font-family: Arial;
	font-size: 100%;
	color: #51b2bd;
	}
	body {
	font-family: Palatino Linotype;
	background-color: #1febad;
	}
	
	a:visited {
	text-decoration: none;
	color: #6A0F1B;
	}
	a:hover {
	text-decoration: underline;
	color: #2323D9;
	}
	a:active {
	text-decoration: none;
	color: #2323D9;
	}
	a[class="link"] {
	text-align: left;
	color: yellow;
	}
	
	#encabezado {
	background-color: blue;
	font-size: 125%;
	background-color: #4eb6a7;
	text-align: center;
	//border: 1px solid red;
	width: 100%;
	height: 25%;
	}
	h1 {
	text-decoration: underline;
	text-align: center;
	font-size: 190%;
	color: black;
	}
	.foto0 { 
	padding: 1%; 
	margin: 10px;  
	float: left; 
	width: 35%;
    }
      .foto01 { 
    top:0px;
    right:0px;
	padding: 1%; 
	margin: 10px;  
	float: right; 
	width: 150px;
    }
	#menu {
	float: left;
	background-color: #4eb6a7;
	font-size: 160%;
	color: white;
	text-align: left;
  
  /*codigo nuevo*/
  width: 400px;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  margin:0px !important;
	}
  	#menu a {
    padding:10px;
    display:block;
    text-decoration: none;
    }
	#contenido {
	float: center;
	font-size: 120%;
	color: #090963;
	text-align: left;
	width: 95%;
	height: auto;
	}
	table {   
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 70%;  
    margin-left:auto;
    margin-right:auto;    
    width: 30%; 
    text-align: center;   
    border-collapse: collapse; 
    }
	th {    
	font-size: 150%;     
	font-weight: normal;     
	padding: 3%;     
	background: #f9ff46;
    border-top: 4px solid #aabcfe;    
    border-bottom: 1px solid #fff; 
    color:  #93948d; 
    }
	td {    
	padding: 10px;     
	background: #6ee1da;     
	border-bottom: 1px solid #fff;
    color: #394e4f;    
    border-top: 5px solid transparent;
    }
    table#cabecera{
	 border: 0px;
	 width: 10%;
	 height: auto;
	 background-color: #000000;
	 }
	 .azul{
    background-color:#4eb6a7;
    }
	table#final{
	 border: 0px;
	 width: 80%;
	 height: 99%;
	 background-color: #4eb6a7;
	 }
	 .rojo{
	padding: 5px;     
	background: #6ee1da;     
	border-bottom: 1px solid #fff;
    color: #394e4f;    
    border-top: 5px solid transparent;
    } 
	 
	 h2 {
	text-align: center;
	font-size: 200%;
	color: #F33910;
	}
	h3 {
	text-align: left;
	font-size: 135%;
	color: #525117;
	}
	h4 {
	text-align: center;
	font-size: 150%;
	color: #082657;
	}
	h5 {
	margin: 10px;
	text-align: left;
	font-size: 150%;
	color: #581845  ;
	}
	h6 {
	margin: 10px;
	text-align: center;
	font-size: 150%;
	color: #581845  ;
	}
	#video {
	margin-left: 45px;
	 width: 75%;
	 height: auto;
	 text-align: center;
	 }
	 
	.foto1 { 
	padding: 0%; 
	margin: 4%; 
	border: 3px solid black; 
	float: center; 
	width: 70%;
    }
    .foto2 {
	margin-left: 200px; 
	border: 2px solid black; 
	float: center; 
	width: 45%;
	height: auto;
    }
    .foto3 { 
	margin-left: 300px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
    }
    .foto4 {  
	margin-left: 300px;
	margin-top: 20px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
    }
    .foto5 { 
	margin: 50px; 
	border: 2px solid black; 
	float: left; 
	width: 500px;
    }
    .foto6 { 
	margin: 50px; 
	border: 2px solid black; 
	float: right; 
	width: 450px;
    }
    .foto7 { 
	margin-left: 50px; 
	border: 2px solid black; 
	float: center; 
	width: 250px;
	height: auto;
    }
   .foto8 { 
	margin-left: 200px; 
	border: 2px solid black; 
	float: center; 
	width: 50%;
	height: auto;
    }
    .foto9 { 
	margin-left: 400px; 
	border: 2px solid black; 
	float: center; 
	width: 30%;
	height: auto;
    }
    .foto10 { 
	margin-left: 400px; 
	border: 2px solid black; 
	float: center; 
	width: 20%;
	height: auto;
    }
    
form {
 
  margin: 0 auto;
  width: 25%;

  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90%;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 75%;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;

  height: 5em;

  resize: vertical;
}
#boton {
    background-color:#4C316D;
    border-radius: 10%;
    box-shadow: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 100%;
    font-weight: 600;
    line-height: 1.612;
    display: inline-block;
    outline: 0;
    text-align: center;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
}
#boton1 {
    background-color: #4C316D;
    border-radius: 10%;
    box-shadow: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 100%;
    font-weight: 600;
    line-height: 1.612;
    display: inline-block;
    outline: 0;
    padding:0 7 0 7;
    text-align: center;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
}
    
	
	#pie {
	background-color: blue;
	font-size: 150%;
	background-color: #295056;
	text-align: left;
	//border: 1px solid red;
	margin-top: 10%;
	width: 100%;
	height: 40%;
	}
<html>
	<head><title>GYMBODYFIT</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" type="text/css" href="primera.css">
		<link rel="icon" href="favicon.ico">
		</head>
		<body>
			<div id="encabezado">
			<table id="encabezado">
				<tr>
					<<td class="azul"><img class="foto0" src="imagen0.gif" alt="foto 0"></td><td class="azul"><h1>GYMBODYFIT</h1></td><td class="azul"><img class="foto01" src="imagen01.jpg" alt="foto 01"></td>
				</tr>
				</table>
			</div>
			<div id="menu">
				<ul>
				<li><a href="Inicio.html">Inicio </a></li>
				</ul>
				<ul>
				<li><a href="Como funciona tu cuerpo.html">Como funciona tu cuerpo</a></li>
				</ul>
				<ul>
				<li><a href="Alimentacion.html">Alimentacion</a></li>
				</ul>
				<ul>
				<li><a href="Ejercicio.html">Ejercicios</a></li>
				</ul>
				<ul>
				<li><a href="Experiencias propias y consejos.html">Experiencias propias y consejos</a></li>
				</ul> 
			</div>
			
			<div id="contenido">
				 
				<h2>Inicio </h2>
				<p>En esta pagina web voy a dar consejos para la gente que empieza de nuevo o va un poco perdida me centrare en diferentes aspectos que lleva el ejercicio fisico como puede ser la alimentacion ,los ejercicios ....
				lo que explicare y pondre esta puesto de mi punto de vista y lo que e aprendido has ahora .</p>
				<p>Este es tu turno para transformarte en lo que quieres ser no lo abandones y sigue que nada en este mundo es imposible, si te duele y te cuesta te hace mas fuerte </p>	
				<p><img class="foto1" src="imagen1.jpg" alt="foto 1"></p>
			</div>
			<div id="pie">
			<table id="final">
				<tr>
					<td class="rojo">Para mas informacion os dejo el link de unos youtubers muy buenos que te ayudara</td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCb1TOrjCWjxnAomfr6n_bpQ" target="blank">THE FITNESS BOY</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCm9MSDgaj9fg9q-zMqZ01Ow" target="blank">UlissesWorld</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/user/OfficialJeffSeid" target="blank">Jeff Seid</a></td>
					</tr>
					<tr>
					<td class="rojo">Aqui os dejo mis redes sociales para que no te pierdas nada </td><td class="rojo"><a href="https://es-es.facebook.com/"><img class="foto10"  src="imagen10.png" alt="foto 10" /></a></td><td class="rojo"><a href="https://www.instagram.com/"><img class="foto10" src="imagen101.jpg" alt="foto 10" /></a></td><td class="rojo"><a href="https://twitter.com/"><img class="foto10"  src="imagen102.png" alt="foto 10" /></a></td>
				</tr>
			</table>
			</div>
		</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.