Position objects in HTML and CSS

Question

Position objects in HTML and CSS

Navigation

#1 by (1 votes)

4

I need to create a page for a job at school, and I need to put the credits at the end of the page, I'm only allowed to do it with html or css in the notebook.

At the moment this is my homepage.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: gray;  // color de fondo menu
}

li {
    float: left;
}

li a {
    display: block;
    color: white; // color de la letra del menu
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: black; //sombra menu
}

html {
	 background-color: #4690FF;	// color de fondo pagina web
}
#bloqueprincipal {

width: 100%;
height: 100%;
background-color: #c8e5e3;
font-family: Arial, Helvetica, sans-serif;
}"

<html>
	<head>
	<link href="estilo/style.css" rel="stylesheet" type="text/css" />
	
<title> Home </title>
	<link rel="icon" href="imagenes/ducha.png" type="image/png">
	</head>

	
		<body>
		<div align="center"><img src="imagenes/wall.jpg" width="100%" height="40%"> </div>
		
		<ul>
		<li> <a href="biografia.html"> Biografia </a> </li>
		<li> <a href="musica.html"> Música </a> </li>
		<li> <a href="https://www.youtube.com/watch?v=jgJgI7h0j0k"> Un ratón con una botella xd </a> </li>
		</ul>
		<div id="bloqueprincipal">
		<h1 align="center">Inicio</h1>
		<center>
		Bienvenido/a a mi página web, en ella encontrarás varios datos sobre mi, los cuales incluyen: Una breve <a href="biografia.html"> biografía</a> mia, una proyección de lo que me interesa a <a href="babo.html">futuro</a> 
		en cuanto a empleo, Una seleccion de mi <a href="musica.html"> música</a> favorita y por ultimo estará la opcion de ver dos videos realizados en la clase de informatica, un <a href="video.html">Thriller</a> y una <a href="video.html"> comedia</a>.
		<br>Y por ultimo tambien veran <a href="https://www.youtube.com/watch?v=jgJgI7h0j0k"> Un ratón con una botella </a><br>
<br><BR><BR><BR><BR><br><br><BR><BR><BR><BR><br><br><BR><BR><BR><BR><br><br><BR><BR><BR><BR><br><br><BR><BR><BR>Miguel Mondaca | 2018 | All rights reserved<br>
		</div>
		</center>
		</body>

		



</html>

At the moment I'm taking this, as you can see, the solution that I occupy is to put in until the text arrives in the background, but maybe that solution is rejected by my teacher, some of you know some method of sending the text directly to the bottom?

html

asked by Nombre Improvisado 22.09.2018 в 05:10

source

1 answer

Problem with pandas.DataFrame.shift function Help with PL / SQL insert in Oracle

score 1 · Answer 1

You could implement the tag

<footer></footer>

link

And add some styles to position it at the bottom of the page

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

In the end what you want to do would be like the following

<html>

<head>
    <link href="estilo/style.css" rel="stylesheet" type="text/css" />
    <title> Home </title>
    <link rel="icon" href="imagenes/ducha.png" type="image/png">
</head>

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: black;
}

html {
  background-color: #4690FF;
}

#bloqueprincipal {
  width: 100%;
  background-color: #c8e5e3;
  font-family: Arial, Helvetica, sans-serif;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
 </style>

<body>
    <div align="center"><img src="imagenes/wall.jpg" width="100%" height="40%"></div>
    <ul>
        <li> <a href="biografia.html"> Biografia </a> </li>
        <li> <a href="musica.html"> Música </a> </li>
        <li> <a href="https://www.youtube.com/watch?v=jgJgI7h0j0k"> Un ratón con una botella xd </a> </li>
    </ul>
    <div id="bloqueprincipal">
        <h1 align="center">Inicio</h1>
        <center>
            Bienvenido/a a mi página web, en ella encontrarás varios datos sobre mi, los cuales incluyen: Una breve <a
                href="biografia.html"> biografía</a> mia, una proyección de lo que me interesa a <a href="babo.html">futuro</a>
            en cuanto a empleo, Una seleccion de mi <a href="musica.html"> música</a> favorita y por ultimo estará la
            opcion de ver dos videos realizados en la clase de informatica, un <a href="video.html">Thriller</a> y una
            <a href="video.html"> comedia</a>.
            <br>Y por ultimo tambien veran <a href="https://www.youtube.com/watch?v=jgJgI7h0j0k"> Un ratón con una
                botella </a>
        </center>

    </div>
    <footer>
        Miguel Mondaca | 2018 | All rights reserved
    </footer>
</body>

</html>