• 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)

VPS Starter Arubacloud
0 głosów
292 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 (7,060 p.)

Po 2. div.daneprofilu wrzuc do div.kontener0

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

 

0 głosów
odpowiedź 23 sierpnia 2018 przez pablop76 VIP (123,060 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,260 p.)
od kiedy nie używam <br/> w HTML?

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

Podobne pytania

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

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...