Wyjmowanie DIVA z DIVA :)

pytanie zadane 19 stycznia 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)
zamknięte 20 stycznia 2017 przez bat_kuba

Witam :)

Chciałbym poprosić o pomoc. Mam zakorzenionego diva w diva chodzi o id="baner" oraz id="tlo"


<html>
  <head>

    <meta charset="utf-8" />
      <title>Trener personalny</title>

    <meta name="description" content="Jeśli poszukujesz profesjonalnego trenera personalnego odwiedź moją stronę." />
    <meta name="keywords" content="trener, personalny, trening, siłownia, odzywki, dieta" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed" />

  </head>
  <body>
    <div id="conteiner">
      <div id="header">
        <div class="logo">

        </div>
        <div class="nav">
            <ul>
              <li><a href="#">Glowna</a></li>
              <li><a href="#">Twoj trener</a></li>
              <li><a href="#">Cwiczenia</a></li>
              <li><a href="#">Wspolpraca</a></li>
              <li><a href="#">Galeria</a></li>
              <li><a href="#">Pokazy</a></li>
              <li><a href="#">Opinie</a></li>
              <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
      </div>

      <div id="baner">
        <div class="zdjecie">
          <p>WYTRWAŁOŚĆ TO DROGA DO SUKCESU</p>
        </div>
        <div class="tlo">
        </div>
      </div>

      <div id="content"></div>

      <div id="footer"></div>
    </div>
  </body>
</html>

W CSS wygląda to tak:

body
{
  background-color: #5c5f64;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0,625em;
  color: #ffffff;

}

#conteiner
{
  width: 960px;
  margin: 0 auto;
}

#header
{

  height: 80px;
  margin: 30px auto 0 auto;
  overflow: auto;
}

.logo
{
  background: url("images/image_logo.png") no-repeat;
  width: 205px;
  height: 75px;
  float: left;
  border: 0px;
}

.nav
{
  float: right;
  margin: 25px 60px 24px 30px;
}

.nav ul
{
  width: 640px;
  margin: 0;
  padding: 0;
}

.nav ul li
{
  width: 68px;
  float: left;
  border-right: 2px black solid;
  list-style: none;
  padding: 5px 5px;
  text-align: center;
}

.nav ul > li:hover
{
  background-color: #372f58;
}

/*
################################################################
######################## DLA PIERWSZEGO ########################
################################################################
.nav ul > li:nth-child(1):hover
{
  background-color: blue;
}*/
.nav ul li a
{
  font-size: 15px;
  color: #fff;
  text-decoration: none;
}

#baner
{
  margin-top: -30px;
  height: 320px;
}

.zdjecie
{
  height: 320px;
  background: url("images/baner.png") no-repeat;
  border-radius: 120px 120px;
  position: relative;
  z-index: 2;

}

.zdjecie p
{
  color: #333333;
  font-size: 50px;
  padding: 130px 60px;
  text-align: center;
}

.zdjecie > p:hover
{
  color: #372f58;
  background: #fff;
  opacity:0.5;
  border-radius: 120px 120px;
}

.tlo
{
  height: 160px;
  margin: -240px auto 0 auto;
  background-color: #333333;
}

#content
{
  background-color: lightblue;
  min-height: 100px;
}

#footer
{
  min-height: 100px;
  background-color: lightgreen;
}

Chcę zrobić tak aby div o id="tlo" było na 100% szerokości na dowolną rozdzielczość (dopasowywał się automatycznie). Jedynie co mi przyszło do głowy to wyjąć go całkowicie poza div id="conteiner" i odpowiednio go wypozcyjonować. Niestety to rozwiązanie mnie nie satysfakcjonuje :) Czy ma ktoś jakiś pomysł ewentualnie inne ciekawe rozwiązanie ? :)

Jestem osobą uczącą się i powyższy kod jest tworzony jedynie w celach nauki :) Dlatego jeśli macie również uwagi co do innych elementów będę bardzo wdzięczny za wszelkie wskazówki :)

komentarz zamknięcia: Problem rozwiązany

komentarz 19 stycznia 2017 przez Shaoi Mądrala (7,020 p.)
edycja 19 stycznia 2017 przez Shaoi

Zacznijmy od tego, iż contAiner, nie contEiner.

Nie dodawaj tego diva od razu po body, tylko umieszczaj w tych elementach, które go potrzebują.

3 odpowiedzi

odpowiedź 20 stycznia 2017 przez Shaoi Mądrala (7,020 p.)
wybrane 20 stycznia 2017 przez bat_kuba

Najlepsza

Dla rodzica:

position: relative;

Dla dziecka:

position: absolute;

komentarz 20 stycznia 2017 przez bat_kuba Użytkownik (600 p.)

Działa do zamknięcia :) Dzięki wielkie !!

komentarz 20 stycznia 2017 przez Shaoi Mądrala (7,020 p.)

Zamknąć możesz sam. ;]

odpowiedź 19 stycznia 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

Chwila bo za bardzo nie rozumiem, chcesz dać go na 100% diva banner to dajesz poprostu szerokość na 100%, marginesy na 0% oraz padding w banner na 0 i tyle. Czy chcesz go zrobić na 100% strony - czyli aby div był wewnętrzny był większy od diva nadrzędnego?

Pokaż 20 poprzednich komentarzy

komentarz 19 stycznia 2017 przez bat_kuba Użytkownik (600 p.)

Nie pochwale się jak to zrobiłem bo nie jest to tak napisane jakbym chciał żeby było xD pozatym napisałem ze 2 pierwsze jpg są wykodowane przeze mnie ;p Będę wałkował temat dopóki ktoś mi nie pomoże albo samemu nie rozwiążę problemu :)

komentarz 19 stycznia 2017 przez hoktaur Pasjonat (22,250 p.)

hehe to ciekawe w czym 'kawa pomogła'

komentarz 19 stycznia 2017 przez bat_kuba Użytkownik (600 p.)

Chciałbym rozwiązać ten problem ale chyba mi się dzisiaj nie uda :P Póki co chciałbym aby temat jeszcze został otwarty :)

komentarz 19 stycznia 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

W zrozumieniu o co mu chodzi :)

komentarz 19 stycznia 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

I napisz jak skończysz czy wszytko jest ok.

odpowiedź 19 stycznia 2017 przez bat_kuba Użytkownik (600 p.)

Shaoi dzięki za radę czyli container warto dać np dla kontentu strony ?

Mikolaj również dzięki za odp i dokładnie tak chce zrobić aby div wewnętrzny był szerszy od nadrzędnego :)