Не получается разделить страницу на 2 активные части

@SamonRob · Регистрация: 28.03.2015

Author24 — интернет-сервис помощи студентам

Прошу помочь:
Задача следующая надо разделить страницу на 2 активных части (при нажатии переходим на нужную часть сайта). При этом в середине должен быть логотип. Как должно быть:
https://www.cyberforum.ru/atta... 1454421804

Вот что сделал. Не получается у меня то, что нужно.

HTML5

<div class="wrapper">
    <a href="#">
    <div class="left">
    Текст под тенью
    </div></a>
    <a href="#">
    <div class="right">
    Текст под тенью
    </div></a>
    <div class="logo_wrapper">
        <div class="logo">
            <img src="images/logo.png" alt="" />
            <h1>Название <br>компании</h1>
        </div>
    </div>
</div>

HTML5

body {
    margin: 0 auto;
    width: 100%;
    height: 100%;
 
}
 
.wrapper {
    margin: 0px auto;
    z-index: 20;
    position: relative;
}
 
.left {
    float: left;
    width: 50%;
    height: 100%;
    background-image: url(/images/1.jpg);
}
 
.right {
    float: left;
    width: 50%;
    height: 100%;
    background-image: url(/images/2.jpg);
}
 
.logo_wrapper {
    position: absolute;
    width: 100%;
    height: 100px;
}
 
.logo {
    margin: 0 auto;
    margin-top: 100px;
    width: 300px;
    height: 300px;
    z-index: 19;
    position: relative;
    text-align: center;
}

@aj17 · 02.02.2016, 17:48

Скопируйте все.

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    html,
    body,
    .d_t,
    .d_tr,
    .d_tc
    {height:100%;}
    
    body{position: relative;}
    
    .d_t{display: table; width: 100%;}
    .d_tr{display: table-row;}
    .d_tc{display: table-cell; width: 50%; padding: 20px;}
    
    .one,
    .two{border: 1px dashed green; padding-top: 250px;}
    
    .one:hover {
        background-color: rgba(255, 0, 0, 0.1);
    }
    .two:hover {
        background-color: rgba(0, 0, 255, 0.1);
    }
    .img_logo{
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -200px;
    }
    p{color: #000;}
    .ta_l{text-align: left;}
    .ta_r{text-align: right;}
</style>
<body>
    <img class="img_logo" src="http://www.placehold.it/400x200" alt="">
    <div class="d_t">
        <div class="d_tr">
            <a href="#" class="d_tc one ta_l">
                <h2>Ссылка один</h2>
                <img src="http://www.placehold.it/700x250" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
            </a>
            <a href="#" class="d_tc two ta_r">
                <h2>Ссылка два</h2>
                <img src="http://www.placehold.it/700x250" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quisquam, neque, atque, facere soluta saepe cum et eos esse vel ab alias dicta aspernatur voluptatem iure sint corporis fugit nisi.</p>
            </a>
        </div>
    </div>
</body>
</html>

@SamonRob · 02.02.2016, 18:34 **[ТС]**

а как сделать, чтобы картинки фоновые были? средствами css не получается (((

@aj17 · 02.02.2016, 18:43

Все получается, я же фон при наведении сделал, значит и картинки можно.

@SamonRob 0 / 0 / 0 Регистрация: 28.03.2015 Сообщений: 8
	02.02.2016, 18:34 [ТС]	3
	а как сделать, чтобы картинки фоновые были? средствами css не получается ((( 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	02.02.2016, 18:43	4
	Все получается, я же фон при наведении сделал, значит и картинки можно. 1

Опции темы