Подредба на 3 секции
Здравейте колеги,
Опитвам се да реша задачата от снощната лекция - Conference,
но имам затруднения с подредбата на трите секции с картинки, под header-a.
Някой усложлив разбирач може ли да ме опъти малко?
Поздрави!
П.П
Ако помага, отдолу ще копирам html-а ми ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styles Conference</title>
<link rel="stylesheet" href="conference.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Register</a></li>
</ul>
</nav>
<div id="info">
<p>
August 24th-26th - Chicago, IL
</p>
</div>
<header class="container">
<h1>Styles Conference</h1>
<h2>Dedicated to the Craft of Building Websites</h2>
<p>Every year the brightest web designers and front-end developers
descend on Chicago to discuss the latest technologies. Join us
this August!
</p>
<button class="btn">
Register Now
</button>
</header>
<main>
<article class="first">
<h3>Speakers</h3>
<img src="Background/speakers.jpg" height="150" width="200"/>
<h2>World-Class Speakers</h2>
<p>Joining us from all around the world are over twenty fantastic
speakers, here to share their stories.
</p>
</article>
<article class="second">
<h3>Schedule</h3>
<img src="Background/schedule.jpg" height="150" width="200"/>
<h2>Three Inspiring Days</h2>
<p>Enjoy three inspiring and action-packed days of talks,
gatherings, and all-around good times.
</p>
</article>
<article class="third">
<h3>Venue</h3>
<img src="Background/venue.jpg" height="150" width="200"/>
<h2>The Chicago Theatre</h2>
<p>Within the heart of Chicago, The Chicago Theatre will provide a beautiful
conference venue.
</p>
</article>
</main>
<footer>
<p>
©styles conference
</p>
<ul>
<li>Home</li>
<li>Speakers</li>
<li>Schedule</li>
<li>Venue</li>
<li>Register</li>
</ul>
</footer>
</body>
</html>
http://codepen.io/anon/pen/wgXwMM Заповядай!
Има и по-умни начини,но аз се сетих за този като най-бърз.
http://codepen.io/TeodorDimitrov89/pen/MJXgJO
Мисля, че първо трябва да сложиш width на картинките,но в css-a за всички еднакви.
2. Трябва да сложиш размери на section-ните бяха articles промених го, примерно 300px или колкото на картинките.
3. Използвал си float left на две картинки и display inline-block,което в случая няма да ти свърши работа.
4. Използвах един div който да ми хване 3-те section-ни и след което му казах display flex и justify-content:center;
5.Не е хубаво да слагаш padding-bottom 300 на header-a може да му зададеш виочина 300px
Малко ти се счупи header-a поправи си го и футъра няма нужда да е толкова висок
Използвай nav-тага във footer-a и в него сложи ul li a.
Информация за flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Благодаря!