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

Статус
В этой теме нельзя размещать новые ответы.
1

1d. Fredy

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

cf24544b9ddc.jpg


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

ce5f1d6b296c.jpg


вот код:
Код: 
<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.
 
Я так думаю что ты не упростишь.

но что можно сделать то чтобы под мею таблица была просто на 100% и тогда ты сможешь внизу писать текст и заголовки просто или использовать Backgraund="#ff0000" или на белом.
 
Можно первый столбец на 2 строки разбить.
 
Можной первый столбец воще убрать а сделать как слой с фоновой картинкой по левому краю, в этом слое сделать padding-left и вставить можно таблицу в которой меню логотип и иконки...
 
Правый край разделяй на 2-е таблицы, делай её растягивающейся и будет счастье!
 
  • Заблокирован
  • #6
ее впринципе и на 10 частей можно порезать. только процентное соотношение выставить надо точно. чтоб никто не вылезал куда не надо
 
а я бы сделал как то так

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>

естественно все размеры, отступы цвета и прочее согласно дизайну..
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху