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

Problem z :after

Object Storage Arubacloud
0 głosów
150 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,180 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ź 178 wizyt
pytanie zadane 13 czerwca 2016 w HTML i CSS przez Alterwar Dyskutant (7,650 p.)
+1 głos
1 odpowiedź 135 wizyt
0 głosów
1 odpowiedź 224 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

92,666 zapytań

141,564 odpowiedzi

320,022 komentarzy

62,033 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

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!

...