Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Tekst wyjeżdża poza <div>

HTML  Założony przez  szymex71.

06.04.2018, 15:19 (Ten post był ostatnio modyfikowany: 06.04.2018, 17:29 przez Penny.)
#1
Nie jest to co prawda mybb tylko stronka robiona na informatykę ale mam pewien problem a wydaje mi się że tu uzyskam pomoc :)
Linku nie ma bo strona robiona na kompie, tak jak mówiłem jako praca domowa na zajęcia.
W każdym razie:

   

Mam <div id> TRESC czyli całe pole od menu do stopki strony (szare paski to właście div id TRESC)
następnie <div class> tresc czyli samo to białe pole
potem div class lewo i prawo czyli podział pola z tekstem (tresc) na dwie części. I wszystko byłoby okej gdyby nie to że po nadaniu float: left to .prawo i .lewo żeby upozycjonować je obok siebie <div id> TRESC (czyli szare tło) nie rozwija się w dół razem z tekstem tylko zostaje w miejscu, tak jakby miał na stałe przypisane height.

Mam nadzieję że problem jest na tyle banalny że nie będę musiał wrzucać strony na jakiś hosting, ale jak będzie potrzeba to coś wykombinuję ;)
Penny napisał 06.04.2018, 17:29:
Zły dział. Na przyszłość staraj się pisać tematy w odpowiednich działach ;)
Jak szybko otrzymać pomoc?
06.04.2018, 15:33 (Ten post był ostatnio modyfikowany: 06.04.2018, 15:33 przez Poftorek.)
#2
Pokaż kod / wrzuć stronę na hosting i wyjaśnij może bardziej, nie rozumiem, jeszcze jakieś dziwne <div class> - co to?
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.04.2018, 15:50 (Ten post był ostatnio modyfikowany: 06.04.2018, 15:51 przez szymex71.)
#3
<div class> to skrót myślowy.. oczywiście chodziło o <div class ="TRESC">

  <body>
    <div id="top">

<div id="NAGLOWEK">
    <img class="banner" src="banner.jpg" style="border: 0" alt="" />
  </div> 

<div id="MENU">
    <div class="menu">
     <ul>
     <li><a href="index.html"><i class="fa fa-home"></i> STRONA GŁÓWNA</a></li>
     <li><a href="ekstraklasa.html"><i class="fas fa-trophy"></i> EKSTRAKLASA</a></li>
     <li><a href="#"><i class="fas fa-trophy"></i> I LIGA</a></li>
     <li><a href="#"><i class="fas fa-trophy"></i> II LIGA</a></li>
     </ul>
   </div>
  </div>

 

<div id="TRESC">
<div class="tresc">
 <div class="lewo">
  <h1>EKSTRAKLASA  <img class="ekstraklasa" src="ekstraklasa.png" style="border: 0" alt="" /></h1>
  <p class="tekst">Ekstraklasa - najwyższa w hierarchii klasa męskich ligowych rozgrywek piłkarskich w Polsce, będąca jednocześnie najwyższym szczeblem centralnym (I poziom ligowy). </br></br>
  W latach 1927–1939 nosiła nazwę Liga, natomiast w latach 1948–2008 I liga. W jej ramach zmagania toczą się cyklicznie (co sezon) systemem kołowym, jako mistrzostwa kraju i przeznaczone są dla 16 najlepszych polskich klubów piłkarskich. 
  Triumfator Ekstraklasy zostaje jednocześnie mistrzem Polski, zaś najsłabsze drużyny relegowane są do I ligi polskiej (dawnej II ligi polskiej). Pierwotnie zarządzana przez Polski Związek Piłki Nożnej (w latach 1928–2005), następnie (od 18 listopada 2005) przez Ekstraklasę SA. 
  Od 2002 do udziału w jej rozgrywkach zostają dopuszczone wyłącznie kluby posiadające status profesjonalny (tj. działające w formie sportowej spółki akcyjnej), które – po spełnieniu wszelkich niezbędnych kryteriów – otrzymały roczną licencję na występy na tym szczeblu.

  Mistrz Polski bierze udział w eliminacjach do Ligi Mistrzów UEFA, zaś wicemistrz oraz zdobywca III miejsca w eliminacjach Ligi Europy UEFA.
  </p>
  
  
 </div>
 <div class="prawo">
  <div class="obrazek">
   <h3>TABELA: (stan na 06.04.2018)
<img class="uefa" src="tabela.png" style="border: 0" alt="" />
   </h3>
   
 </div>
</div>
</div>
  </div>

   <div id="STOPKA">
     <h2>***</h2>
   </div>
</div>
  </body>

Chodzi o to że div z tekstem wyjeżdża poza ten z tłem (szare paski po bokach)
06.04.2018, 16:33 (Ten post był ostatnio modyfikowany: 06.04.2018, 16:33 przez Poftorek.)
#4
Nie ma żadnych stylów? Najlepiej wrzuć sam na hosting.
Poradnik - Jak zbadać element na stronie internetowej?  
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
06.04.2018, 16:37
#5
Oczywiście że są. Słyszałem coś o clear:both ale nie działa. Później wrzucę, ale myślałem że nie będzie potrzebne i w ogóle jest to jakiś banalny problem z którym tylko ja nie umiem sobie poradzić :E
06.04.2018, 19:17
#6
Spróbuj prościej wytłumaczyć lub narysować o co ci chodzi. Obecnie nie mam pojęcia. Strzelam, że chodzi ci o to:
.element:after {
  content: '';
  display: table;
  clear: both;
}

To ci powinno wytłumaczyć jak to działa: https://codepen.io/anon/pen/bvQNJX
Pomimo tego że obydwa elementy ul mają tło, to tylko na tym drugim (z clear both) je widać. Gdy masz same pływające elementy w divie to jego wysokość się zeruje.

Btw ID używaj do elementów unikatowych i najlepiej pozostaw to dla js. Nie styluj id, a klasy. Poza tym staraj się je nazywać odpowiednio (tak, aby przedstawiało czym jest element). Gdybyś chciał w przyszłości dodać więcej niż jedną "tresc" to będziesz miał problem. Poza html będziesz musiał edytować również CSS.
Użycie elementów HTML5 ułatwi czytanie kodu i będzie on lepszy dla botów, zatem staraj się z nich korzystać. Kod będzie przyjemniejszy dla oka i będzie łatwiej ci pomagać.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
07.04.2018, 20:43
#7
Strona:
http://testowastrona321.cba.pl/


Aktualnie wygląda to tak:
   

Białe tło trzyma się tylko dlatego że mam min-height:500px a chciałbym żeby sięgało do samego dołu.
07.04.2018, 22:22
#8
Musisz nadać "clearfixa" dla diva tresc. Patrz post @Divir .

Ogólnie, obecnie nie trzeba już się męczyć z float-ami. Można użyć flexboxa, który jest mniej problematyczny oraz potężniejszy. Layout z dwiema kolumnami mógłby wyglądać np. tak https://codepen.io/anon/pen/ZxmjgZ To tak w gwoli ciekawostki, może Ci sie kiedyś przyda.



Użytkownicy przeglądający ten wątek:

1 gości