нужно порезать шапку

Тема в разделе "Веб-дизайн", создана пользователем 1d. Fredy, 3 май 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 1d. Fredy

    1d. Fredy Писатель

    Регистр.:
    26 апр 2008
    Сообщения:
    6
    Симпатии:
    0
    всем привет!
    у меня такой вопрос, как лучше порезать вот эту шапку:

    [​IMG]

    я ее порезал так:

    [​IMG]

    вот код:
    Код:
    <table class="head" cellspacing="0" cellpadding="0">
    <tr>
    <td id="head"><img src="images/ug.gif"></td>
    <td>
    <table class="inhead" cellspacing="0" cellpadding="0">
    <tr>
    <td id="header_2" background="images/hbg.gif">
    <a href="index.html" title="На главную"><img src="images/home.gif"></a>&nbsp;&nbsp;
    <a href="#" title="написать нам"><img src="images/mail.gif"></a>&nbsp;&nbsp;
    <a href="search/" title="Поиск по сайту"><img src="images/search.gif"></a></td>
    <td id="header_3"><img src="images/logo.gif"></td>
    </tr>
    <tr>
    <td colspan="2" id="header_4">
    <a href="#">Главная страница</a> | 
    <a href="#">Каталог мебели</a> | 
    <a href="#">Новости</a> | 
    <a href="#">Контакты</a> | 
    <a href="#">Схема проезда</a> | 
    <a href="#">Поставщики</a> | 
    <a href="#">Карта сайта</a></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    
    вот css
    Код:
    #head
    {
    width: 35px;
    }
    
    .inhead
    {
    width: 100%;
    height: 100%;
    }
    
    #header_2
    {
    background-color: #dd1313;
    vertical-align:bottom;
    height: 51px;
    width: 70px;
    }
    
    #header_3
    {
    height: 36px;
    width: 569px; 
    }
    
    /* === стиль верхней навигации */
    
    #header_4
    {
    background-color: #dd1313;
    vertical-align: middle;
    color: #ffffff;
    height: 36px;
    }
    
    #header_4 a:link, #header_4 a:active, #header_4 a:visited 
    {
    text-decoration: none;
    color: #ffffff; 
    }
    
    #header_4 a:hover 
    {
    text-decoration: underline;
    color: #ffffff; 
    }
    
    

    вопрос, как можно это упрастить? впринцепе оно отображается нормально, растягивается, если контент ниже шапки шире 680px. но уж слишком много кода на странице и стилей в css.
     
  2. nakamichi

    nakamichi Создатель

    Регистр.:
    12 фев 2008
    Сообщения:
    19
    Симпатии:
    1
    Я так думаю что ты не упростишь.

    но что можно сделать то чтобы под мею таблица была просто на 100% и тогда ты сможешь внизу писать текст и заголовки просто или использовать Backgraund="#ff0000" или на белом.
     
  3. ataman08

    ataman08 Создатель

    Регистр.:
    16 апр 2008
    Сообщения:
    15
    Симпатии:
    1
    Можно первый столбец на 2 строки разбить.
     
  4. zetaap

    zetaap Постоялец

    Регистр.:
    8 мар 2008
    Сообщения:
    83
    Симпатии:
    11
    Можной первый столбец воще убрать а сделать как слой с фоновой картинкой по левому краю, в этом слое сделать padding-left и вставить можно таблицу в которой меню логотип и иконки...
     
  5. tolik3

    tolik3 Постоялец

    Регистр.:
    10 июн 2007
    Сообщения:
    84
    Симпатии:
    4
    Правый край разделяй на 2-е таблицы, делай её растягивающейся и будет счастье!
     
  6. norka13

    norka13 Создатель

    Заблокирован
    Регистр.:
    23 фев 2009
    Сообщения:
    41
    Симпатии:
    2
    ее впринципе и на 10 частей можно порезать. только процентное соотношение выставить надо точно. чтоб никто не вылезал куда не надо
     
  7. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    а я бы сделал как то так

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    body{ font:12px Verdana, Geneva, sans-serif; }
    #header{ position:relative; height:80px; }
    #header div{ position:absolute; }
    #ug{ left:0; top:20px; width:20px; height:40px; background: url(images/ug.gif) red left center no-repeat;  }
    #icons{ left:20px; top:20px; width:200px; height:20px; background-color:red; }
    #icons a{ position:absolute; display:block; top:5px; width:10px; height:10px; background: #fff; left top no-repeat;  }
    #icons .home{ left:40px; background-image:url(images/home.gif); }
    #icons .mail{ left:80px; background-image:url(images/mail.gif); }
    #icons .search{ left:120px; background-image:url(images/search.gif); }
    #logo{ left:220px; top:0; width:300px; height:40px; background:url(images/logo.gif) blue left top no-repeat; }
    #links{ bottom:0; width:100%; height:26px; padding-top:14px; background-color:red; }
    #links div{ left:50px; width:750px; }
    #links a{ display:block; float:left; padding:0 10px; color:#fff; text-decoration:none; border-right:1px #fff solid; }
    </style>
    
    </head>
    
    <body>
    
    <div id="header">
        <div id="logo">&nbsp;</div>
        <div id="icons">
        	<a href="/index.html" class="home" title="На главную"></a>
            <a href="#" class="mail" title="написать нам"></a>
            <a href="/search/" class="search" title="Поиск по сайту"></a>
        </div>
        <div id="links">
        	<div>
                <a href="#">Главная страница</a>
                <a href="#">Каталог мебели</a>
                <a href="#">Новости</a>
                <a href="#">Контакты</a>
                <a href="#">Схема проезда</a>
                <a href="#">Поставщики</a>
                <a href="#" style="border:none">Карта сайта</a>
            </div>
        </div>
    	<div id="ug">&nbsp;</div>
    </div>
    
    </body></html>
    
    естественно все размеры, отступы цвета и прочее согласно дизайну..
     
  8. Altos

    Altos Писатель

    Регистр.:
    13 апр 2009
    Сообщения:
    9
    Симпатии:
    0
    действительно, лучше юзать дивы;-) меньше кода, удобнее, меньше проблем...
     
Статус темы:
Закрыта.