Помогите решить задачу

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем FoxWoman, 1 фев 2016.

  1. FoxWoman

    FoxWoman

    Регистрация:
    1 фев 2016
    Сообщения:
    4
    Симпатии:
    0
    Понимаю, что это глупость и это очень простое задание, но я не могу понять как это сделать... помогите пожалуйста[​IMG]
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    "Какой-нибудь логотип" должен появляться при нажатии на ссылку, или при входе на страницу, или это всё вообще статично?
     
  3. FoxWoman

    FoxWoman

    Регистрация:
    1 фев 2016
    Сообщения:
    4
    Симпатии:
    0
    это все только средствами html и css
     
  4. FoxWoman

    FoxWoman

    Регистрация:
    1 фев 2016
    Сообщения:
    4
    Симпатии:
    0
    Ребята, помогите пожалуйста... все перепробовала, не получается :-(
     
  5. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    Ну если оч грубо говоря, то как-то так:

     
  6. FoxWoman

    FoxWoman

    Регистрация:
    1 фев 2016
    Сообщения:
    4
    Симпатии:
    0
    В чем сейчас проблема? Почему-то не показываются картинки и области-ссылки не работают, после добавления логотипа с названием...

    HTML:
    <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>
    Код:
    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;
    }
     
  7. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    Путь не правильный. Видимо css лежит не в корневой папе, попробуйте так:
    HTML:
    url(../image/1.jpg) или ./image/1.jpg)
    logo_wrapper абсолютно позиционируется и получается над.

    А как вы хотели? Чтобы под тенью и ещё все ссылки работали?
     
  8. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Видимо задача не верная.
    Похоже, что должно быть при наведении тень пропадать, я правильно понимаю ?

    Если классическим opacity делать, то это будет прозрачность. в этом случаи, можно попробовать сделать черный фон и наложить opacity на блок. Он станет почти эффекта тень, а при наведении будет ярким.

    Во всех других случаях тут без js не обойтись.
     
  9. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Хотя, если сильно поизвращаться в css, то можно будет сделать. путем деления двух блоков. в одной области, например.

    <div class="left">
    <div class="noshadow">

    </div>

    <div class="shadow">

    </div>
    </div>

    Вот есть 2 блока. По умолчанию shadow будет идти выше. Если ему дать прозрачность 0.5% и background:#000 то будет тень.

    При наведении на .left мы делаем эффект замены z-index для noshadow, а для shadow можно красиво спрятать при помощь transition.

    Главное условие - сохранить единую высоту для обоих блоков.
     
  10. Marrie

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    50
    Симпатии:
    10
    Есть несколько вариантов решения. Напишите что именно Вам требуется? логотип - название а потом 2 колонки?. Заскриньте и обведите нужные колонки в пейнте тогда сможем Вам помочь