how can I put the div menu that becomes so big with the contents of the content

Question

how can I put the div menu that becomes so big with the contents of the content

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

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>

html css

asked by dani 08.12.2017 в 17:20

source

3 answers

Make visible menu in Angular 4 after login error TS2558: Expected 0 type arguments, but got 1 - Angular

score 0 · Answer 1

How about you can try this:

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

Replace the percentage by pixels adapting it to the height of your content, otherwise use a margin-top to accommodate it on top of your other div. I do not know if the reason you had the percentage was to be responsive.

If so, you can use @media (this helps you modify your styles depending on the width of your window):

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

You can see more detail at: mediaqueries

score 0 · Answer 2

Hello , I share your code a little modified, in terms of the menu settings you request, I hope it helps you in the structure of your page Greetings!

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>

score 0 · Answer 3

Good friend I hope this is more or less what you want greetings.

The idea is to put the menu in position:fixed so that it is always fixed on the page on the page and then put a stop of 100% and ready.

*{
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>