Loading...
SeanDoherty avatar SeanDoherty -2 Точки

Подредба на 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>
        &copy;styles conference
    </p>
    <ul>
        <li>Home</li>
        <li>Speakers</li>
        <li>Schedule</li>
        <li>Venue</li>
        <li>Register</li>
    </ul>
</footer>
</body>
</html>
Тагове:
0
Web Basics
SeanDoherty avatar SeanDoherty -2 Точки

http://codepen.io/anon/pen/wgXwMM Заповядай!

0
TeodorDimitrov89 avatar TeodorDimitrov89 264 Точки

Има и по-умни начини,но аз се сетих за този като най-бърз.

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/

0
04/02/2017 12:42:07
SeanDoherty avatar SeanDoherty -2 Точки

Благодаря!

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.