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:
[
attachment=13563]
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ę
Pokaż kod / wrzuć stronę na hosting i wyjaśnij może bardziej, nie rozumiem, jeszcze jakieś dziwne <div class> - co to?
<div class> to skrót myślowy.. oczywiście chodziło o <div class ="TRESC">
Kod:
<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)
Nie ma żadnych stylów? Najlepiej wrzuć sam na hosting.
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
Spróbuj prościej wytłumaczyć lub narysować o co ci chodzi. Obecnie nie mam pojęcia. Strzelam, że chodzi ci o to:
Kod:
.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ć.
Musisz nadać "clearfixa" dla diva tresc. Patrz post
.
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.