2

Llevo tiempo intentando resolver porqué la propiedad sticky para la navbar no me funciona y no he podido lograr nada. Cuando comencé a hacer el código si funcionaba, pero ahora que he añadido más código no me funciona. Espero puedan ayudarme, soy principiante en html5 y css3.

Éste es el código del archivo HTML. La parte del body la divido en tres columnas, las dos de los lados son de igual tamaño, y la columna central es la más grande.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Aqui va la descripcion del sitio">
  <meta name="keywords" content="circuits, electrical circuits, electricity">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Electrical Circuits</title>
  <link rel="icon" href="img\icon.png">
</head>

<body>

  <header>
    <h1>Electrical Circuits</h1>
  </header>

  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#what">What is a Circuit?</a></li>
    <li><a href="#types">Types of Electrical Circuits</a></li>
    <li><a href="#">Electronic VS Electric Circuit</a></li>
    <li><a href="#">Electrical Circuit Analysis</a></li>
  </ul>

<div class="row">
  <div class="column side">
    <div class="card">
      <h2>Side</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
    </div>
  </div>

  <div class="column middle">
    <div class="card" id="what">
      <img class="image1" src="img/image.jpg">
      <h2>What is a Circuit?</h2>
      <p>Our daily life is surrounded by electrical circuits, these are present in homes, businesses and even in cell phones. <br><br>First, let's define the word circuit. A circuit is defined as a complete and closed path around which an electric current can circulate. It can also mean a system of electrical conductors and components that form such a path. Every time you flip a switch (in operation), you are completing a circuit and letting the electrical currents do their thing.</p>
    </div>

    </div>

  </div>

  <div class="column side">
    <div class="card">
      <h2>Side</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
    </div>
  </div>

</div>

</body>

</html>

Éste es el código de mi archivo CSS. No se si habrá afectado de alguna manera el que tenga tres columnas en el body, o el estilo que le di a las imágenes.

* {
  box-sizing: border-box;
}

body{
  background: #D0D3D4;
  font-family: Arial;
  padding: 10px;
}

header{
    padding: 30px;
    background-color: #00003D;
    text-align: left;
    text-indent: 100px;
    font-family: Arial;
}

h1{
  color: white;
  font-size: 50px;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1F618D;
  position: sticky;
  top: 0;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

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

li a:hover {
  background-color: #154360;
  font-size: 15px;
}

.active {
  background-color: #4CAF50;
}

.column {
  float: left;
  text-align:justify;
}

/* Left and right column */
.column.side {
  width: 19%;
}

/* Middle column */
.column.middle {
  width: 60%;
  margin-left: 13px;
  margin-right: 13px;
}


/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin-top: 15px;
}

.image1{
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  width: 20%;
  /*height: 200px;*/
}

.image2{
  float: right;
  margin-top: 50px;
  margin-left: 10px;
  border-radius: 10px;
  width: 50%;
}

.icon{
  float: left;
  width: 100px;
  height: 100px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.container {
  position: relative;
  float: left;
  padding: 10px;
  width: 33.33%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00003D;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap;
  color: white;
  font-size: 25px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}```

1 respuesta 1

2

Después de horas intentando resolver el problema, acabo de encontrar la solución.😅 Faltaba el siguiente código en el archivo styles.css:

.row:after {
content: "";
display: table;
clear: both;
}

Saludos. Comparto la solución por si alguien algún día la llegara a necesitar.

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.