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

Problem z :after

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
195 wizyt
pytanie zadane 19 października 2016 w HTML i CSS przez damian23415 Użytkownik (890 p.)

Tak jak w temacie mam problem z :after, ponieważ po dodaniu do css clear: both; nic się nie dzieje dalsza część tekstu ma parametr float: left i umieszca sie z lewej strony loga. A to kod HTML I CSS

<!DOCTYPE HTML>

<html lang="pl">
<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="">

  <link rel="stylesheet" href="style.css">


</head>

<body>

	<header class="top">
		<div class="logo" >
			<img src="images/logo.png" alt="#" />
		</div>
			asdasd
	</header>


	


</body>
</html>
body
{
	background-color: #303030;
}

.top
{
	width: 1024px;
	height: 1000px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/top.jpg);
}


.logo
{
	margin-left: 20px;
	float: left;
	margin-top: 10px;
}

.logo:after 
{
    content: ".";
    display: block;
    clear: both;
    }

 

1 odpowiedź

+1 głos
odpowiedź 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)
po co ci kropka w content ?
komentarz 19 października 2016 przez damian23415 Użytkownik (890 p.)
Nie potrzebna, ale próbowałem wszelakich rozwiązań ;)
komentarz 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)
Poczytaj sobie o display flex a jeżeli koniecznie chcesz to rozwiązać floatami to tutaj masz rozwiązanie:

body
{
    background-color: #303030;
}

.top
{
    width: 1024px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/top.jpg);
}

.logo
{
    margin-left: 20px;
    margin-top: 10px;
}
img{
  float: left;
}
.logo:after
{
    content: "";
    display: block;
    clear: both;
    }
komentarz 20 października 2016 przez pablop76 VIP (123,540 p.)
edycja 20 października 2016 przez pablop76

Tak właśnie jest jak napisał Przemek. Zauważ, że :after wstawia element po tym co jest wewnątrz tego elementu, a nie po nim. Czyli w twoim przypadku czyści float: left dla img, który przecież go nie ma. A div .logo dalej ma float:left. A jeżeli chcesz to zrobić tak jak to rozumiesz to daj <div style="clear: both"></div> po <div class="logo"><img src="images/logo.png" alt="#" /></div>

 

Podobne pytania

0 głosów
1 odpowiedź 229 wizyt
pytanie zadane 13 czerwca 2016 w HTML i CSS przez Alterwar Dyskutant (7,650 p.)
+1 głos
1 odpowiedź 155 wizyt
0 głosów
1 odpowiedź 255 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

93,176 zapytań

142,188 odpowiedzi

321,982 komentarzy

62,508 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 1637p. - dia-Chann
  2. 1614p. - Łukasz Piwowar
  3. 1599p. - CC PL
  4. 1597p. - Łukasz Eckert
  5. 1572p. - Tomasz Bielak
  6. 1545p. - Michal Drewniak
  7. 1537p. - Łukasz Siedlecki
  8. 1531p. - rucin93
  9. 1509p. - rafalszastok
  10. 1506p. - Marcin Putra
  11. 1487p. - Adrian Wieprzkowicz
  12. 1356p. - ssynowiec
  13. 1341p. - Mikbac
  14. 1169p. - Grzegorz Aleksander Klementowski
  15. 1155p. - Piotr Aleksandrowicz
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! ♡

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!

...