0

Как правильно сверстать данный блок?введите сюда описание изображения Раньше я верстал таблицами, сейчас попробовал Div. Сделал так.

<div class="navigation">

                <div class="menu">
                    <div class="menu_icon_1" width="172px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_1.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">МЕДУЧРЕЖДЕНИЯ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">адреса, отзывы</span>

                                </a>

                    </div>

                    <div class="menu_icon_2" width="174px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_2.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">ДИАГНОСТИКА</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">лаборатории., узи, мрт</span>

                                </a>

                    </div>

                    <div class="menu_icon_3" width="138px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_3.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">АПТЕКИ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">по районам</span>

                                </a>

                    </div>



                    <div class="menu_icon_4" width="162px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_4.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">ВРАЧИ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">специалисты, отзывы</span>

                                </a>

                    </div>

                    <div class="menu_icon_5" width="171px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_5.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">ПРОЧИЕ УСЛУГИ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">в медучреждениях</span>

                                </a>

                    </div>

                    <div class="menu_icon_6" width="152px">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_6.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">ОТЗЫВЫ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">обо всем и обо всех</span>

                                </a>

                    </div>

                    <div class="menu_icon_7">
                                <a href="#" class="menu_href">
                                    <img src="images/menu_icon_6.png"/></br>
                                    </br>
                                    <span style="color:#000000;font-size:14px;">ОБЪЯВЛЕНИЯ/ВОПРОСЫ</span><br>
                                    <span style="color:#9d9d9d; font-size:12px;">частные</span>

                                </a>

                    </div>

                </div>
                <div class="menu_vipad_1">
            321321
            </div>

            </div>

У каждого manu_icon есть свойство float:left и заданная ширина. Не думаю что я правильно сверстал как вам кажется?

3
  • 1
    Нету такого правильно / не правильно. Вы царь и Бог, творец сия контента. Есть на сколько криво отображается и не заметно, что криво отображается. Рекомендую взять какую то либо на подобии bootstrap 3 и ускорит процесс разработки и получите сразу адаптивный дизайн. 26 авг 2015 в 8:10
  • можно вот так - jsfiddle.net/soledar10/rgz64fzz
    – soledar10
    26 авг 2015 в 8:12
  • @ Makarenko_I_V с удовольствием изучил бы bootstrap но я использую другое фраймворк((((
    – duddeniska
    26 авг 2015 в 8:21

1 ответ 1

2

Стили удобнее выносить отдельно, а меню лучше делать списком.

Основа для вашего меню:

<style type="text/css">
    ul.menu { list-style-type: none; }  
    ul.menu li { display: inline-block; float: left; margin-left: 55px; }
    ul.menu li:first-child { margin-left: 0; }
    ul.menu li a { text-decoration: none; }
    ul.menu li a span.name { color: #000; display: block; font-size: 14px; text-transform: uppercase; }
    ul.menu li a span.caption { color: #9d9d9d; display: block; font-size: 12px; text-transform: lowercase; }
    div.clear { clear: both; }
</style>

Текст до меню

<ul class="menu">
    <li>
        <a href="#">
            <img src="#"/>
            <span class="name">Медучреждения</span>
            <span class="caption">адреса, отзывы</span>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#"/>
            <span class="name">Диагностика</span>
            <span class="caption">лаборатории, узи, мрт</span>
        </a>
    </li>
</ul>

<div class="clear"></div>

Текст после меню

С шириной, отступами и шрифтами поиграйте сами. :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.