Comunidad de diseño web y desarrollo en internet online

problema con css, html basico

Citar            
MensajeEscrito el 26 Sep 2020 10:03 pm
Tengo problemas, ya que en un diseño que estoy haciendo, el fondo del menu de navegacion se pasa de alto, y pues queda feo, si alguien me puede ayudar seria genial !!!

CODIGO HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="C:\Users\sobrino\Desktop\Mi primer sitio web xd\Pruebas con cosas que veo\css/estilos.css">
</head>

<header>
<div class="Cuadrado"></div>

<h1>LISTA DE ASIGNATURAS</h1>

<nav>
<ul >
<li><a href="#">Inicio</a></li>
<li><a href="#">Notas</a></li>
<li><a href="#">Tareas</a></li>
<li><a href="#">Examenes</a></li>
</ul>
</nav>


</header>

<body>
<div class="asignaturas">
<table>
<tr>
<td>Matematicas</td>
<td>Biologia</td>
<td>Ingles</td>
<td>Lenguaje</td>
</tr>

<tr>
<td>Sociales</td>
<td>Quimica</td>
<td>Investigacion</td>
<td>Emprendimiento</td>
</tr>
<tr>
<td>Religion</td>
<td>Fisica</td>
<td>Geometria</td>
<td>Filosofia</td>
</tr>
</table>
</div>

<aside>
<table class="pruebas">
<h2>Prueba</h2>
<tr>
<td>Sociales: 10 de octubre</td>
</tr>
<tr>
<td>Religion: 12 de octubre</td>
</tr>
<tr>
<td>Filosofia: 18 de octubre</td>
</tr>
<tr>
<td>Ingles: 15 de octubre</td>
</tr>
</table>
</aside>
</body>

<footer></footer>
</html>


CODIGO CSS:
* {
font-family: Arial, Helvetica, sans-serif;
}


.Cuadrado {
position: relative;
left: -100px;
top: -30px;
width: 1425px;
height: 330px;
margin: 10px;
background: #00F7FF;

}

h1 {
font-size: 500%;
border-style: dashed;
padding: 17px;
color: #000;
text-shadow: 1px 3px 0px #717171;
position: absolute;
left: 12.5%;
top: 7%;
}

header nav {
background: #009BFF;
overflow: hidden;
border-radius: 20px;
width: 700px;

}

header nav ul {
list-style: none;
}

header nav ul li {
float: left;
text-decoration: none;


}

header nav ul li a {
text-decoration: none;
color: #fff;
padding: 30px 48px;
display: block;

}

header nav li:hover {
background-color: #3bb1ff ;
box-shadow: 4px 4px 2px #717171;
}

header nav li:active {
box-shadow: none;

}

.asignaturas {
position: relative;
top: 300px;
}

h2 {
position: relative;
left: 1140px;
width: min-content;
height: min-content;

}
.pruebas {
position: relative;
left: 1130px;


}

Por dagar2811

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Oct 2020 07:51 pm
Buenas. He leído tu post y voy a ver si puedo ayudarte un poco. Aunque la verdad es que mis conocimientos son bastantes bajos, ya que he comenzado a estudiar hace pocas semanas.

Mi consejo es que comiences formateando los estilos del navegador que vienen por defecto.
usando el selector universal.
* { padding: 0; margin: 0; }

Después te aconsejaría que para el Layaut, usaras las tecnologías FlexBox y Grid , hay muchos videos en youtube sobre ello, te resultara mas sencillos el posicionar los elementos del html.

Te he escrito el código a mi manera por si te sirve de ayuda, te aseguro que mis conocimientos son muy básicos, así que no se si te servirán.

CODIGO HTML:

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Document</title>
</head>

<body>
<header>
<h1>LISTA DE ASIGNATURAS</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Notas</a></li>
<li><a href="#">Tareas</a></li>
<li><a href="#">Examenes</a></li>
</ul>
</nav>
</header>
<div class="main">
<div class="asignaturas">
<table>
<h2>Asignaturas</h2>
<tr>
<td>Matematicas</td>
<td>Biologia</td>
<td>Ingles</td>
<td>Lenguaje</td>
</tr>
<tr>
<td>Sociales</td>
<td>Quimica</td>
<td>Investigacion</td>
<td>Emprendimiento</td>
</tr>
<tr>
<td>Religion</td>
<td>Fisica</td>
<td>Geometria</td>
<td>Filosofia</td>
</tr>
</table>
</div>
<aside>
<table class="pruebas">
<h2>Prueba</h2>
<tr>
<td>Sociales: 10 de octubre</td>
</tr>
<tr>
<td>Religion: 12 de octubre</td>
</tr>
<tr>
<td>Filosofia: 18 de octubre</td>
</tr>
<tr>
<td>Ingles: 15 de octubre</td>
</tr>
</table>
</aside>
<footer></footer>
</div>
</body>
</html>

CODIGO CSS:

* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

body {
width: 90%;
margin: 0 auto;
}
table {
border:blue 5px solid;
}

tr td {
border: black 2px solid;
}
header {
width: 100%;
height: 14rem;
background: #00f7ff;
border-bottom-right-radius: 10%;
display: flex;
justify-content: space-between;
}

h1 {
width: 50%;
height: 4rem;
text-align: center;
font-size: 2rem;
border-style: dashed;
padding-top: 20px;
margin: auto;
color: #000;
text-shadow: 1px 3px 0px #717171;
}
header nav {

background-color: #009bff;
border-radius: 20px;
width: 40%;
height: 3rem;
display: flex;
justify-content: center;
align-self: flex-end;
}

header nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
text-align: center;
}

header nav ul li {
width: 6rem;
height: 2rem;
text-decoration: none;
display: flex;
justify-content: center;
align-self: center;
}

header nav ul li a {
align-self: center;
text-align: center;
text-decoration: none;
color: #fff;
}

header nav li:hover {
border-radius: 5%;
background-color: #3bb1ff;
box-shadow: 4px 4px 2px #717171;
}

header nav li:active {
box-shadow: none;
}

.main {
width: 90%;
height: auto;
padding-top: 5%;
padding-bottom: 5%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-self: center;
}
aside {
text-align: center;
}

.asignaturas {
text-align: center;
}

Por sinihes

1 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.