1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

большой отступ по вертикали между элементами вертки

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Seriban, 17 сен 2020.

Метки:
  1. Seriban

    Seriban

    Регистрация:
    17 сен 2020
    Сообщения:
    1
    Симпатии:
    0
    Здравствуйте.
    Верстаю обычную страницу. Не могу понять как исправить отображение строки меню <div id="menu">, ее сильно опустило вниз от верхнего блока. КАРТИНКИ ПО ССЫЛКЕ с гугл-диска не удалось подгрузить...
    Код верстки вместе с предыдущим элементом, поскольку текст справа и оранжевая кнопка, создали причину по которой поместил таблицу и контейнер в другую таблицу:
    Код:
    <div id="contacts">
                <a href="">
                    <img class="facebook" src="images/facebook.jpg" alt="Facebook" />
                </a>
                <a href="">
                    <img class="mail" src="images/mail.jpg" alt="Почта" />
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <div id="header">
            <img src="images/header.jpg" alt="шапка страницы" />
            <div id="content_header">
                <h1>Welcome to Mostra!</h1>
                <h3>Quality Products - Great Prices!</h3>
                <p>
                    <a href="">
                        <span>Check It Out!</span>
                    </a>
                </p>
            </div>
        </div>
        <div id="menu">
            <table>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td class="active">
                                    <a href="#">
                                        <span>All Categories</span>
                                    </a>
                                </td>       
                                <td>
                                    <a href="#">
                                        <span>Men</span>
                                    </a>
                                </td>               
                                <td>
                                    <a href="#">
                                        <span>Women</span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="right">
                        <div id="search">
                             <form name="searchform" action="#" method="post">
                                <table>
                                    <tr>
                                        <td >
                                            <div>
                                                <input type="text" name="words" placeholder="Browse products" />
                                            </div>
                                        </td>
                                        <td>
                                            <input type="image" src="images/bsearch.jpg" />
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                    </td>
                </tr>
            </table>
    CSS
    Код:
    #header {
        margin-top: 15px;
    }
    
    #header img {
        width: 100%;
    }
    
    #content_header {
        float: right;
        text-align: right;
        position: relative;
        top: -160px;
        right: 20px;
    }
    
    #content_header h1, #content_header h3 {
        margin: 0;
    }
    
    #content_header h1 {
        color: #5290b4;
        font-size: 260%;
    }
        
    #content_header h3 {
        color: #87abbf;
        font-size: 100%;
    }
    
    #content_header a {
        background-color: #f28221;
        color: #fff;
        padding: 10px 20px;
        text-decoration: none;
        
    }
     
    #content_header p { 
        margin-top: 35px;
    }
    
    #menu {
        margin-top: 15px;
    }
    
    
    #menu table {
        width:100%;
    }
    
    #menu table table {
        width: auto;
    }
    
    
     #menu .right {
         text-align: right;
     }
    #search {
        float: right;
    }
    
    
    #menu td a {
        display: block;
        background-color: #ededed;
        color: #a2a1a1;
        font-weight: bold;
        text-decoration: none;
        padding: 10px 20px;
    }
    
    #menu td.active a, #menu td a:hover {
        background-color: #dfedf5;
        color: #2b6997;
    }
    
    
    #search div {
        border: 1px solid #a5c796;
        margin-top: -4px;
    }
    
    
    #search div input {
        border: 3px solid #c5debb;
        height: 25px;
        width: 230px;
        color: #676767;
        padding-left: 5px;
    }
    
    Подскажите, пожалуйста, как подтянуть вверх строку меню?

    СПАСИБО!