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?

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

dokładnie tak chce zrobić aby div wewnętrzny był szerszy od nadrzędnego :)

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

To ustawiasz mu więcej porostu i działa.

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

Prosty przyklad

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styl.css">
    </head>
    <body>
        <div id="glowny">
            AAA
            <div id="wewnetrzny"></div>
        </div>
    </body>
</html>

I CSS:

#glowny
{
    width: 400px;
    height: 150px;
    background-color: blue;
}
#wewnetrzny
{
    width: 2000px;
    height: 100px;
    background-color: green;
}

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

Tylko jest taki problem, że jak nawet dam większą szerokość bo dawałem 1920px to wydłuża mi tego diva tylko w prawą stronę i robi poziomego scroll bar :/ Poza tym chodzi o to, że jak ktoś będzie miał większą rozdzielczość niż full hd albo oddali widok to chciałbym, aby div id="tlo" sie automatycznie dostosowywał tak jak dzieje się to w przypadku margin: auto; .

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

Div Ci się nie wydłuża tylko jego margines niestety tego nie przeskoczysz. Natomiast ja dałem przykładową szerokości nie musisz statycznie ustawiać szerokości to było tylko uproszczenie żebyś się nie pogubił :)

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

Ale co zrobić żeby pozbyć się scroll bara oraz żeby wyglądało to mniej więcej tak

Czerwone tak się robi jak dam większą wartość dla diva="tlo" niż 960px, a chcę żeby było tak jak jest na niebiesko :) jedyne na co wpadłem to dodać ujemne marginesy, ale to wciąż nie rozwiązuje mojego problemu :P

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

W css wyłączyć scrolla.

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

overflow: hidden;

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

A co to jest to czerwone i niebieskie?

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

Czerwone to jest jak dam width: np 3000px, wszystko idzie w prawą stronę a powinno iść w lewo i prawo :)

Niebieski to jest efekt jaki chcę uzyskać :)

http://www.loki-workout.pl/

To jest stronka, na której się uczę :) i chcę aby mój ciemno szary pasek pod zdjęciem działał tak samo jak na podanej stronce :)

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

Czyli chcesz aby div był od prawej strony zamiast od lewej czy obok tekstu?

Jeśli obok tekstu to wrzucasz przed nim diva i kontent w tego diva.

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

Sorka jeśli źle tłumaczę o co mi chodzi, ale spróbuję jeszcze raz :)

Chcę aby ten ciemno szary pasek, który jest umieszczony pod zdjęciem rozchodził się na prawą i na lewą stronę.

W obecnej chwil jak dam divovi="tlo" width > 960px to wszystko idzie w prawą stronę.

Rozumiem, że to się dzieje przez to że cała zawartość div="tlo" idzie od lewej strony (lewego marginesu) divu="baner".

Chciałbym również, aby ten div="tlo" funkcjonował tak jak na załączonej wyżej stronce.

Czyli jeśli nawet pomniejszę stronę do 25% on jest wciąż rozciągnięty na całą szerokość strony.

A i gdzie umieścić overflow: hidden; ponieważ jak daje tą komendę w :
body to ukrywa scroll bar, ale zarówno poziomego jak i pionowego

lub

baner to wtedy znika div="tlo"

lub

tlo to wtedy nic się nie dzieje

Jeśli dalej źle wytłumaczyłem to nie wiem co robić XD

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

Rozumiem(chyba) chcesz aby były proporcje np 20% z lewej 40% szerokość obrazka i 40% szary pasek za obrazkiem tak?

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

Jak nadal nie rozumiem to idę wypić kawę może pomorze :) Dlatego najbardziej lubię konsultacje na żywo przez internet zawsze jest problem ze zrozumieniem o co komu chodzi :)

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

Tak jest

Tak chcę

A w niebo wzięty, zachwyconym podniecony będę jak pomniejszymy str do 25% i będzie tak

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

Acha no rozumiem chcesz aby pasek przechodził pod obrazkiem.

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

Najprościej dać diva z tłem obrazek na środek;

Div

wysokosc = jaka chcesz

szerokosc = 100%

obrazek

wysrodkowany

szerokosc jaka chcesz

wysokosc auto dostosuje proporcje sam

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

Te 2 pierwsze obrazki są wykodowane przeze mnie xD

Dokładnie tak. :)

Przechodzenie już mam ustawione bo jest już pod obrazkiem ale reszty nie potrafię uzyskać. :)

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

Kawa pomogła :)

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

to się pochwal jak to zrobiłeś i zamknij temat :)

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 :)