Question 44081 in Html Question posted in
Some basic documentation can be found here.

HTML and CSS / School project

There is line of code that’s called "vertikalni" and "baner". I want to put that part under header and to be horizontal. That part should have same size as header.

Vertical one don’t even need to be where it is now, just need to swap their positions. I am having difficulties when I swap their places in html and CSS, it always dissolve my whole layout.

enter image description here

body {
  background-color: #EEE;
}

#wrapper {
  margin: 0 auto;
  background-color: #CCC;
  border: 5px solid #000;
  width: 692px;
  /*750-2x5-2x24=692*/
  padding: 24px;
}

header {
  border: 2px solid #000;
  height: 46px;
  /*80-2x2-2x15=46*/
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 24px;
  /*ili u delu ispod margin-top*/
}

#slika {
  width: 204px;
  /*238-2x15-2x2=204*/
  height: 366px;
  /*400-2x15-2x2=366*/
  border: 2px solid #000;
  background-color: #FFF;
  margin-left: 24px;
  padding: 15px;
  float: left;
}

#pesma {
  background-color: #FFF;
  width: 254px;
  /*306-2x2-2x24=254*/
  height: 348px;
  /*400-2x2-2x24=348*/
  border: 2px solid #000;
  padding: 24px;
  float: left;
}

#vertikalni {
  width: 100px;
  margin-left: 24px;
  /*ili u divu pesma margin-right*/
  margin-bottom: 24px;
  float: left;
}

footer {
  background-color: #FFF;
  height: 18px;
  /*70-2x2-2x24=18*/
  padding: 24px;
  border: 2px solid #000;
  clear: left;
}

footer p {
  margin: 0px;
}

.baner {
  width: 98px;
  /*100-2x1=98*/
  height: 98px;
  /*100-2x1=98*/
  border: 1px dashed #000;
  background-color: #999;
  float: left;
}

img {
  width: 198px;
  /*202-2x2=198*/
  border: 2px solid #000;
}
<div id="wrapper">
  <header>
    <p>Naši najveći pesnici u istoriji književnosti</p>
  </header>
  <div id="pesma">
    <h1>Čarobna vrata</h1>
    <p>Na svetu zemlja jedna postoji,<br> puna je svakoga blaga,<br> i sve što ima — podeli svima<br> u tome joj je snaga.</p>
    <p>Hoćeš li kuće, i kuća ima,<br> samo uzmi i gradi,<br> mostove hoćeš, pozovi ljude,<br> džinovski most sagradi.</p>
    <p>Hoćeš li pesme, u njoj se ore,<br> pevaju milioni,<br> svako te tamo na rad zove,<br> a niko te ne goni.</p>
  </div>
  <div id="vertikalni">
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
  </div>
  <div id="slika">
    <img src="slike/mira.jpg" alt="Portret">
    <p><b>Mira Alečković</b></p>
  </div>
  <footer>
    <p>Ovo je zadatak čiji je sadržaj preuzet sa <a href="http://www.wikipedia.org">Vikipedije.</a></p>
  </footer>
</div>
Tags:

2

Answers


  1. 0

    Start with the placing the "vertikalni" div underneath your header in your html file. Because that is where you want it to show up. You have your header in your wrapper so if you put the width of #vertikalni to 100% you will see that the baner divs will be horizontal. Because the baner divs has restricted width to 98px so it won’t be as long as the header. We got a width of 100% devided by 4 divs is a width of 25%. So if you set the width to 25% it will fit, also remove the margin-left or else it will flow over.

    Login or Signup to reply.
  2. 0

    This problem will be solved with this step-by-step solution:

    1. Move the #vertikalni div under the header tag to place it exactly under the header.
    2. Change the width of #silka and #pesma div to 42% for matching the width of the header above it.
    3. Add margin-bottom: 24px in #silka div for giving a space to footer tag below.
    4. Remove width: 100px; margin-left: 24px; for matching the width of the header.
    body {
  background-color: #EEE;
}

#wrapper {
  margin: 0 auto;
  background-color: #CCC;
  border: 5px solid #000;
  width: 692px;
  /*750-2x5-2x24=692*/
  padding: 24px;
}

header {
  border: 2px solid #000;
  height: 46px;
  /*80-2x2-2x15=46*/
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 24px;
  /*ili u delu ispod margin-top*/
}

#slika {
  width: 42%; /* Step 2 */
  /*238-2x15-2x2=204*/
  height: 366px;
  /*400-2x15-2x2=366*/
  border: 2px solid #000;
  background-color: #FFF;
  margin-left: 24px;
  padding: 15px;
  float: left;
  margin-bottom: 24px; /* Step 3 */
}

#pesma {
  background-color: #FFF;
  width: 42%; /* Step 2 */
  /*306-2x2-2x24=254*/
  height: 348px;
  /*400-2x2-2x24=348*/
  border: 2px solid #000;
  padding: 24px;
  float: left;
}

#vertikalni {
  /* Step 4 */
  /*ili u divu pesma margin-right*/
  margin-bottom: 24px;
  float: left;
}

footer {
  background-color: #FFF;
  height: 18px;
  /*70-2x2-2x24=18*/
  padding: 24px;
  border: 2px solid #000;
  clear: left;
}

footer p {
  margin: 0px;
}

.baner {
  width: 97px; /* Step 5 */
  /*100-2x1=98*/
  height: 98px;
  /*100-2x1=98*/
  border: 1px dashed #000;
  background-color: #999;
  float: left;
}

img {
  width: 198px;
  /*202-2x2=198*/
  border: 2px solid #000;
}
    <div id="wrapper">
  <header>
    <p>Naši najveći pesnici u istoriji književnosti</p>
  </header>
  <!-- Step 1 -->
  <div id="vertikalni">
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
    <div class="baner"></div>
  </div>
  <div id="pesma">
    <h1>Čarobna vrata</h1>
    <p>Na svetu zemlja jedna postoji,<br> puna je svakoga blaga,<br> i sve što ima — podeli svima<br> u tome joj je snaga.</p>
    <p>Hoćeš li kuće, i kuća ima,<br> samo uzmi i gradi,<br> mostove hoćeš, pozovi ljude,<br> džinovski most sagradi.</p>
    <p>Hoćeš li pesme, u njoj se ore,<br> pevaju milioni,<br> svako te tamo na rad zove,<br> a niko te ne goni.</p>
  </div>
  <div id="slika">
    <img src="slike/mira.jpg" alt="Portret">
    <p><b>Mira Alečković</b></p>
  </div>
  <footer>
    <p>Ovo je zadatak čiji je sadržaj preuzet sa <a href="http://www.wikipedia.org">Vikipedije.</a></p>
  </footer>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search