Dlaczego tekst wychodzi poza obręb mojego diva skoro ograniczyłem mu width na 1920px HTML CSS

pytanie zadane 22 grudnia 2017 w HTML i CSS przez ildan91 Użytkownik (630 p.)

HTML:

<body>
<div class="container">
<header>
  Welcome to my portfolio
  </header>
  <naw>
    <div class="naw">
<ol>
<li>Who am I?</li>
<li>What I can offer?</li>
<li>My Curriculum vitae</li>
<li>Contact me</li>
</ol>
<img class="img" src="szymon.png">
    </div>
    </naw>
    <main>
    <div id="content">
    <article>
    <section>
    <div id="who">
    <header class="head">
    <h1>Who am I?</h1>
    </header>
    <p>Hi! Welcome to my portfolio. My name is Simon. I finished Maria Curie-Sklodowska University in Lublin. In Poland well known as UMCS :). I graduated Management with Brand Image Strategic Management. Then I tried my hand at the army. It was fantastic experience. After that, meanwhile I worked in a few jobs as recruiter or customer service specialist. Unfortunately, I was not happy working there and I desired to change my life and do something new. Something what makes my life more valuable. I decided to be front-end developer. </p>
    </div>
    </section>
    </article>
    </div>
    </main>
</div>
</body>
</html>

CSS:

body
{
  font-family: 'Josefin Sans', sans-serif;
  margin:0;
  background-image:url(http://www.wallpapers4u.org/wp-content/uploads/room_office_desk_chair_shelves_39161_1920x1080.jpg);
  background-repeat:no-repeat;
}

.container
{width:1920px;


}

header
{font-size:60px;
  text-align:center;
font-weight:700;
color:#555;
  margin-top:30px;
}



.naw
{height:80px;
  width:100%;
  background-color:#666567;
  opacity:0.8;
  text-align:center;

}

ol
{list-style-type:none;



}
ol>li
{display:inline-block;
    padding:22px;
    font-size:28px;
    padding-top:30px;
    border-right: 1px solid #dddddd ;
}

ol>li:first-child
{border-left: 1px solid #dddddd ;
}

.img
{
    border:ridge 2px #fdfdfd;
    width:130px;
    height:185px;
    dislpay:inline-block;

}

ol>li:hover
{background-color:#555247;
cursor:pointer;


}

#content
{background-image:url(http://www.wallpapers4u.org/wp-content/uploads/table_office_chairs_glass_window_39163_1920x1080.jpg);
    width:1920px;
    height:1080px;
    margin-top:890px;
    text-align:center;
}

p
{
    font-size:24px;
    position:absolute;

}

#who
{width:800px;
margin-left:auto;
margin-top:auto;
text-align:center;

}
.head
{margin-top:30px;
    text-align:center;
    position:absolute;

}
Niech mi ktoś napisze gdzie jest błąd w tej strukturze. Przy minimalizowaniu tekst wychodzi poza obręb mojego diva. Proszę o pomoc

komentarz 22 grudnia 2017 przez radek024 Szeryf (77,160 p.)

Wrzuć to proszę w bloki, a najlepiej na codepena. Ta prośba już była tak dużo razy :v

komentarz 23 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Nic nie działa. W penie najpierw próbowałem ale wolałem najpierw napisać w notepadzie++ i dopiero tam wkleic. Jeżeli ktoś wie jak pomóc to będę wdzięczny bo jednak ten problem dalej wstrzymuje mnie przed pójściem dalej :(

komentarz 23 grudnia 2017 przez ildan91 Użytkownik (630 p.)

https://codepen.io/szymon91/pen/XVdozz

1 odpowiedź

odpowiedź 23 grudnia 2017 przez JayJay Mądrala (6,020 p.)

Akapit (p) ma ustawione pozycjonowanie absolutne (position: absolute).

https://developer.mozilla.org/en-US/docs/Web/CSS/position

PS. Masz literówki w: nav - zapisałeś naw, display - zapisałeś dislpay (w kodzie css przy klasie img). Divy powinno się stylować po klasach (nie id). Jeżeli chcesz by np. div rozciągał się na całą szerokość ekranu możesz ustawić "width: 100%;" (zamiast " width:1920px;").

komentarz 23 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Dzięki za chęci ale ja już tego próbowałem dalej to nie rozwiązuje mojego problemu :( Poza tam przerzucając tło do diva pokazuje się biała linia na górze tak jakby z jakiegoś powodu to tło nie dojeżdżało do górnej ramki. Może problem jest spowodowany tym, że istnieją dwa tła. No nic kombinuję dalej i oczywiście czekam na jakieś podpowiedzi. Z góry dzięki za cenne wskazówki

komentarz 23 grudnia 2017 przez JayJay Mądrala (6,020 p.)

Miałem na myśli, żebyś usunął "position: absolute" ze styli "p".

komentarz 23 grudnia 2017 przez pablop76 VIP (123,340 p.)

Nie wiem o co chodzi.

Przy minimalizowaniu tekst wychodzi poza obręb mojego diva

Poza błędami, które wyliczył JayJay co oznacza #who {margin-top: auto;}

Czy zdajesz sobie sprawę, co powoduje dodanie position: absolute; które użyłeś dla p i .head ?

komentarz 23 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Pousuwałem to o czym mówił JAYJAY ale to niewiele pomogło :( Znalazłem inny sposób. Najpierw pousuwałem znaczniki semantyczne, żeby mi nie zaśmiecały kodu (później jej dodam) i na spokojnie porobiłem oddzielne divy dla każdej strony mojego portfolio. To jest moje rozwiązanie. Nic nie wychodzi, wszystko jest na środku. Oczywiście dziękuję wszystkim za cenne wskazówki :)

https://codepen.io/szymon91/pen/XVdozz?editors=1100