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

Bloczek zagnieżdżony - problem(jakiś banalny)

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
150 wizyt
pytanie zadane 22 sierpnia 2018 w HTML i CSS przez fruczka Użytkownik (570 p.)

Cześć! Chciałabym się Was spytać... co mogę robić nie tak, gdy mam taką sytuację?

Kod html:
 

<div class= "kontener0">
			<div class = "kontener1">
				<div class = "avatar">
					<div class = "nick">
					<?php
						echo $_SESSION['user'];
					?>
					</div>
				</div>
				<div class = "zdjecie">
				<img src="images/arrow-up.png">
				</div>
				<div class = "tytul">Komentator</div>
				<div class = "ilosc"><font size = "2">Ilość komentarzy: <b>54</b></font></div>
				<div style = "clear: both;"></div>
			</div>
			<div class = "danezbazy">
			<ol>
			<li>Kobieta</li>
			<li>Kleopatra</li>
			<li>25</li>
			<li>6 kwietnia 1993</li>
			<li>"To jest moje motto."</li>
			</ol>
			</div>
			
			</div>
			<div class = "daneprofilu">
			<ol>
			<li>Płeć: </li></br>
			<li>Imię: </li></br>
			<li>Wiek: </li></br>
			<li>Urodziny: </li></br>
			<li>Motto: </li></br>
			
			</div>

Css:
 

.kontener1
{
	width: 154px;
	height: 205px;
	background: green;
	padding: 10px;
	border-radius: 10px;
	float: left;
}

.kontener0
{
	margin-left: 50px;
	width: 1220px;
	height: 225px;
	padding: 10px;
	border-radius: 10px;
	background: purple;
}

.daneprofilu
{
	margin-left: 250px;
	margin-right: 30px;
	width: 280px;
	background: blue;
	height: 205px;
	text-align: right;
	float: left;
	
	
}

.danezbazy
{
	
	background: blue;
	width: 200px;
	height: 205px;
	margin-left: 630px;
}

Może jakiś clear both blokuje? Sama nie wiem :/
Byłabym bardzo wdzięczna za pomoc!

3 odpowiedzi

0 głosów
odpowiedź 22 sierpnia 2018 przez StOcK Mądrala (6,100 p.)

Po 1. po li nie potrzebne Ci br

Po 2. div.daneprofilu wrzuc do div.kontener0

komentarz 22 sierpnia 2018 przez fruczka Użytkownik (570 p.)

Po poprawieniu Twoich uwag nadal jest ten sam problem, co prawda przemieścił się lekko, ale nadal jakby był niewidzialny margin-top, którego nie ma :P Czy jeszcze jakąś błahostkę pominęłam? :P

komentarz 22 sierpnia 2018 przez StOcK Mądrala (6,100 p.)
Jesteś w stanie wrzucić demo na jsfiddle? (html+css), będzie łatwiej pomóc
0 głosów
odpowiedź 22 sierpnia 2018 przez Toxc Mądrala (6,700 p.)

Po 2. div.daneprofilu wrzuc do div.kontener0

.daneprofilu
{
   margin-top:-207px;
 
     
     
}

 

0 głosów
odpowiedź 23 sierpnia 2018 przez pablop76 VIP (121,300 p.)

Twój kod to chaos, dlatego nie możesz nad nim zapanować. A to tylko kilka linijek.

1.W html kolejność list jest odwrotna do tego co chcesz wyświetlić.

2. lista w divie o klasie daneprofilu nie posiada zamknięcia </ol>

3. clear: both; stosuje się do skasowanie float. U ciebie avatar , zdjecie , tytul, ilosc nie posiadają float.

4. znacznik <font> jest przestarzały i nie należy go używć.

5. Należy oddzielać warstwę prezentacji (css) od warstwy treści (html) dlatego nie używamy w html <br>, <b> ( <b> jest dopuszczalne, ale to jeden z niewielu znaczników) a tym bardziej styli inline np. <p style="color:red"></p>, ponieważ trudno potem zapanować nad wyglądem strony ze, względu na przełamanie kaskadowośći.

<div class="container">
    <div class="container__item container__item_green">
        <div>truczkowaty</div>
        <div>
            <img src="http://znaki-drogowe.org/png/c_5.png">
        </div>
        <div>Komentator</div>
        <div>Ilość komentarzy: <span class="font-weight-bold">54</span></div>
    </div>
    <div class="container__item container__item_blue">
        <ol class="container__item-list container__item-list_title">
            <li>Płeć:</li>
            <li>Imię:</li>
            <li>Wiek:</li>
            <li>Urodziny:</li>
            <li>Motto:</li>
        </ol>
    </div>
    <div class="container__item container__item_blue">
        <ol class="container__item-list container__item-list_description">
            <li>Kobieta</li>
            <li>Kleopatra</li>
            <li>25</li>
            <li>6 kwietnia 1993</li>
            <li>"To jest moje motto."</li>
        </ol>
    </div>
</div>
.container {
    width: 50%;
    padding: 10px;
    border-radius: 10px;
    background: purple;
    color: white;
}

.container::after {
    content: "";
    display: table;
    clear: both;
}

.container__item {
    float: left;
    margin-right: 20px;
    text-align: center;
    font-size: 1.2em;
}

.container__item_green {
    background-color: green;
    border-radius: 10px;
    padding: 10px;
}

.container__item_blue {
    background-color: blue;
    padding: 0 10px;
}

.container__item-list {
    list-style-type: none;
    padding: 0;
    line-height: 2em;
}

.container__item-list_title {
    text-align: right;
}

.container__item-list_description {
    text-align: left;
}

.font-weight-bold {
    font-weight: bold;
}

 

komentarz 23 sierpnia 2018 przez MrxCI Dyskutant (8,280 p.)
od kiedy nie używam <br/> w HTML?

Uczono mnie inaczej calkiem niedawno
komentarz 23 sierpnia 2018 przez pablop76 VIP (121,300 p.)

Podobne pytania

0 głosów
0 odpowiedzi 75 wizyt
pytanie zadane 23 marca 2019 w HTML i CSS przez Grilant Nowicjusz (120 p.)
0 głosów
1 odpowiedź 283 wizyt
pytanie zadane 29 grudnia 2017 w HTML i CSS przez pawelwch Użytkownik (880 p.)
0 głosów
1 odpowiedź 207 wizyt
pytanie zadane 19 października 2017 w JavaScript przez bartas1990 Początkujący (470 p.)

89,727 zapytań

138,332 odpowiedzi

309,340 komentarzy

59,649 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 429p. - Argeento
  2. 427p. - nidomika
  3. 396p. - Mikbac
  4. 392p. - ssynowiec
  5. 390p. - Łukasz Eckert
  6. 387p. - TheLukaszNs
  7. 386p. - rucin93
  8. 382p. - Michal Drewniak
  9. 382p. - Marcin Harasimowicz
  10. 378p. - JMazurkiewicz
  11. 373p. - tokox
  12. 367p. - Jarosław Roszyk
  13. 362p. - adrian17
  14. 359p. - overcq
  15. 350p. - Mawrok
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...