A
A
artem2020-07-06 23:19:54
Layout
artem, 2020-07-06 23:19:54

How to move the inscription under the block?

The inscription becomes next to the block, but it needs to be under it. How to do it?

<div id="main">
        <div id="line"></div>
        <h1>Фильмы 2020</h1>
        <div id="line"></div>
        <br>	
        <br>
        <a href="">
          <img src="img/1.jpeg" alt="film" id="img1">
          <span id="name-film">«Побег из претории»</span>
        </a>
</div>

#main {
  width: 94%;
  float: left;
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 60px; 
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  color: #85959A;
}

#img1 {
  float: left;
  width: 25%;
  background-repeat: no-repeat;
  width: 25%;
  max-width: 300px;
  border-radius: 10%;
  transform: scale(0.95);
  opacity: 0.9;
  transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

#name-film {
  float: left;
  width: 25%;
  text-align: center;
  color: #85959A;
  transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Ankhena, 2020-07-06
@arteqrt

1. Don't use id for styling, use classes. And one id per page can only be used once. Those. two divs with id line cannot exist at the same time.
2. You don't need whole divs to make stripes.
There are enough pseudo-elements for the eyes and ears.
The stripes are decorations, not the content of the page.
3. Switch to flex and grid. Floats were not invented for this.
4. Two br in a row is bad form. Padding is done with padding and margin.
5. Prefixes are not written with pens in the sources, but they use the autoprefixer https://autoprefixer.github.io/en/ And, usually, it is built into the collector.
You also have them in the wrong order.
A property without a prefix should come last (with very rare exceptions).
6. The caption becomes next to the picture because you told it to "stand to the left and let everything flow around you to the right" (float:left) And also because the caption span, i.e. inline element. You need to either div or p or make the span block.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question