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

opływanie powoduje zanik tła

0 głosów
102 wizyt
pytanie zadane 28 listopada 2016 w HTML i CSS przez Wilier Bywalec (2,570 p.)

Hej,

proszę rzucić okiem na kod. Błąd z ktorym nie mogę sobie poradzić widać na screenie. Na pierwszym jest białe tło i sekcja aside na dole. Chcę aby aside była po prawej stronie strony, lecz gdy użyję właściwości float: left dzieje się to co na obrazku 2, czyli białe tło znika i mam to domyślne dla body. 

W kodzie css to "wadliwe" float jest w : section.courses

________________

 

_____

kod


	
<!DOCTYPE HTML>
<html lang="pl">
<head>	
	<link rel="stylesheet" href="style.css" >
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Gallery</title>
	
</head>

<body>
	
	<div class="wrapper">
		<header>	
		
		<nav>
			<ul>
            <li><a href="" class="current">strona główna</a></li>
            <li><a href="">zajęcia</a></li>
            <li><a href="">catering</a></li>
            <li><a href="">o nas</a></li>
            <li><a href="">kontakt</a></li>
          </ul>
		</nav>
		</header>
		
		<section class="courses">
			<article>
				<figure>
					<img src="images/bok-choi.jpg" alt="Bok Choi" />
					<figcaption>Bok Choi</figcaption>
				</figure>
			</article>
			<article>
				<figure>
					<img src="images/teriyaki.jpg" alt="Sos Teriyaki"/>
					<figcaption>Sos Teriyaki</figcaption>
				</figure>
			</article>
		</section>
		<aside>
			<section class="popular-recipes">
			<h2>Popularne przepisy</h2>
			  <a href="">Yakitori (grilowany kurczak)</a>
			  <a href="">Tsukune (mielone kotleciki z kurczaka)</a>
			  <a href="">Okonomiyaki (smaczne naleśniki)</a>
			  <a href="">Mizutaki (gulasz z kurczaka)</a>
			</section>
		</aside>
	</div>
	
</body>
</html>

 

___


header, section, footer, aside, nav, article, figure, figcaption {
        display: block;}

body {
	background-image: url("images/dark-wood.jpg");
	   background-color: #f9f8f6;
	   background-position: center;
	   margin: 0px;
}

.wrapper {
	margin: 20px auto;
	width: 940px;
	background-color: #fff;
}

header {
	height: 160px;
	background-image: url(images/header.jpg);
}


nav {
	position: relative;
	top: 130px;
	height: 30px;
	background-color: #aeaca8;
}

nav, footer {
	claer: both;
}

.current {
	color: #000;
}

nav ul { 
	margin: 0px;
	padding: 5px 0px 5px 30px;
}

nav li {
	display: inline;
	margin-right: 40px;
}

a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	color: #000;
}

section.courses {
	/*float: left;*/
	width: 659px;
	border-right: 1px solid #eee;
}

article {
	 clear: both;
     overflow: auto;
	 width: 100%;
}

figcaption{
	color: #000;
}


figure {
	float: left;
	width: 290px;
	height: 220px;
	border: 1px solid #eee;
	padding: 5px;
    margin: 20px;
}

aside {
	float: left;
	width: 230px;
}

aside section a {
	   display: block;
        padding: 10px;
        border-bottom: 1px solid #eeeeee;
}

 

3 odpowiedzi

0 głosów
odpowiedź 28 listopada 2016 przez Olaf Siwiński Mądrala (7,140 p.)
wybrane 28 listopada 2016 przez Wilier
 
Najlepsza

Dopisz w klasie .wrapper 

overflow: hidden;

 

1
komentarz 28 listopada 2016 przez Wilier Bywalec (2,570 p.)
ukłony do ziemi
0 głosów
odpowiedź 28 listopada 2016 przez jaca121212 Nałogowiec (40,780 p.)

http://jsbin.com/fujefemibe/edit?css,output

Pomiędzy linkami tutaj możesz śmiało użyć nav ul li a

<aside>
            <section class="popular-recipes">
            <h2>Popularne przepisy</h2>
              <a href="">Yakitori (grilowany kurczak)</a>
              <a href="">Tsukune (mielone kotleciki z kurczaka)</a>
              <a href="">Okonomiyaki (smaczne naleśniki)</a>
              <a href="">Mizutaki (gulasz z kurczaka)</a>
            </section>
        </aside>

czytelniej by było widać ten kod.

0 głosów
odpowiedź 28 listopada 2016 przez Predo Bywalec (2,260 p.)

Masz błąd w CSSie

nav, footer {
    claer: both;
}

claer -> clear

Podobne pytania

0 głosów
2 odpowiedzi 61 wizyt
0 głosów
4 odpowiedzi 92 wizyt
pytanie zadane 16 grudnia 2020 w HTML i CSS przez AgentTecza Obywatel (1,440 p.)
0 głosów
0 odpowiedzi 66 wizyt
pytanie zadane 30 listopada 2020 w HTML i CSS przez Wiktor Tadeusiak Początkujący (340 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

85,698 zapytań

134,499 odpowiedzi

298,515 komentarzy

56,625 pasjonatów

Motyw:

Akcja Pajacyk

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

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

...