• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,993 wizyt
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.)

1 odpowiedź

0 głosów
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,460 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

Podobne pytania

0 głosów
2 odpowiedzi 211 wizyt
pytanie zadane 19 grudnia 2017 w HTML i CSS przez Darkis Początkujący (290 p.)
0 głosów
1 odpowiedź 185 wizyt
0 głosów
2 odpowiedzi 872 wizyt
pytanie zadane 13 maja 2018 w HTML i CSS przez informacje 1234 Nowicjusz (120 p.)

93,096 zapytań

142,059 odpowiedzi

321,513 komentarzy

62,441 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...