Процесс верстки сайта ЦТ «CARBON»

art-Limon · August 20, 2009

Дизайн главной страницы родился:

Сейчас происходит знакомство с версткой. Начала и подзависла в шапке с относительным позиционированием - не хочет сдвигаться..

<body>

<div id="header">
<div class="logo_table">
<table border="1">
  <tr>
    <td><img src="img/header/logo.png" alt="Центр Тонирования «CARBON»" /></td>
    <td> </td>
  </tr>
  <tr>
    <td align="right"><img src="img/header/button.jpg" alt="скидка 5%" /></td>
    <td><span class="style1"> +7 (4732) 93-90-50<br />
      +7 (4732) 94-94-66<br />профессиональное тонирование</span></td>
  </tr>
</table>
</div>
</div>

</body>

body {
	background-color: #1d1d1d;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
}

#header {
	background-image:url(../img/header/bgimg.jpg);
	width: 1150px;
	height: 300px;
	vertical-align: top;
	margin: auto;}

#logo_table {
	width: 525px;
	height: 200px;
	position:relative;
	left: 100px;
	top: 80px;}

____________________________

Что нужно сделать, чтобы таблицу сдвинуть вниз и правее?

Ага! Нужно быть внимательнее! #logo_table исправляю на .logo_table и двигаюсь дальше

/тему сохраняю исходя из предположения, что могут возникнуть и более сложные для меня вопросы../

Edited August 20, 2009 by art-Limon

BassEast · August 20, 2009

и зачем вы начали верстать таблицами?

art-Limon · August 20, 2009

и зачем вы начали верстать таблицами?

Я переделала - блок хедер бекграундом, у которого сделала все картинкой, включая логотип и телефоны. А в нем сделала только один блок со скидкой..

Подскажите, пож-та, как лучше навигацию представить?

Edited August 20, 2009 by art-Limon

BassEast · August 20, 2009

Я переделала - блок хедер бекграундом, у которого сделала все картинкой, включая логотип и телефоны. А в нем сделала только один блок со скидкой..

вот это зря. можно таким образом весь сайт картинкой завоять.

Подскажите, пож-та, как лучше навигацию представить?

навигация будет примерно выглдеть таким образом:

<ul id="topMenu">
   <li>Главная</li>
   <li>Услуги</li>
   <li>Каталог</li>
   <li>Прайс</li>
   <li>Галерея работ</li>
</ul>

дальше всё дело за CSS стилями. Если ваш дизайн под фиксированную ширину, то всё на много проще.

Edited August 20, 2009 by BassEast

art-Limon · August 20, 2009

вот это зря. можно таким образом весь сайт картинкой завоять.
навигация будет примерно выглдеть таким образом:
<ul id="topMenu">
   <li>Главная</li>
   <li>Услуги</li>
   <li>Каталог</li>
   <li>Прайс</li>
   <li>Галерея работ</li>
</ul>
дальше всё дело за CSS стилями. Если ваш дизайн под фиксированную ширину, то всё на много проще.

Спасибо, попробую /а то я снова начала таблицы в дивы отправлять../

art-Limon · August 20, 2009

вот это зря. можно таким образом весь сайт картинкой завоять.
навигация будет примерно выглдеть таким образом:
body {
background-color: #1d1d1d;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
}

#header {
background-image:url(../img/header/bgimg.jpg);
width: 1150px;
height: 300px;
vertical-align: top;
margin: auto;}

.discount {
width: 165px;
height: 72px;
position: relative;
left: 204px;
top: 178px;}

ul {
background-image:url(../img/nvg/bgimg.gif);
width: 1150px;
height: 50px;
margin: auto;}

li {
display:inline;
}

li a {
font: 12px "Trebuchet MS", Arial, sans-serif;
color:#FFFFFF;
text-transform:uppercase;
line-height: 49px;
margin: 0 50px;}
как выравнивать? и каким образом в стилях кнопочку нажатую делают?

Justnewone · August 21, 2009

Надо в каждую отдельно взятую LI вставлять бекграунд, а не общий на UL. А потом прописать стили на 2 состояния, наведенную и нажатую, или наведенную = нажатую.

И номера телефонов лучше сделать шрифтом а не картинкой.

art-Limon · August 21, 2009

Надо в каждую отдельно взятую LI вставлять бекграунд, а не общий на UL. А потом прописать стили на 2 состояния, наведенную и нажатую, или наведенную = нажатую.

вот что получается - http://art-limon.ru/ - кнопки почему-то в IE7 лесенкой..

<div class="nav">
<ul>
<li><a href="#" class="li-bg-l">О ЦЕНТРЕ</a></li>
<li><a href="#">УСЛУГИ</a></li>
<li><a href="#">КАТАЛОГ</a></li>
<li><a href="#">ПРАЙС-ЛИСТ</a></li>
<li><a href="#">ГАЛЕРЕЯ РАБОТ</a></li>
<li><a href="#">ФОРУМ</a></li>
<li><a href="#" class="li-bg-r">КОНТАКТЫ</a></li>
</ul>
</div>

* {
margin: 0; padding: 0;}

ul, li {
list-style: none;}

img {
border-width: 0;}

body {
width: 1150px;
margin: 0 auto;
background-color: #1d1d1d;}

body {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 11pt;
color:#FFFFFF;
}

a {
color: #ffffff;
text-decoration: underline;}

#header {
background-image:url(../img/header/bgimg.jpg);
width: 1150px;
height: 300px;
vertical-align: top;
margin: auto;}

.discount {
width: 165px;
height: 72px;
position: relative;
left: 204px;
top: 178px;}

.nav {
margin: 0px;}

.li-bg-l{
float:left;
width:165px;
height:32px;
text-align:center;
background-image:url(../img/nvg/libgl.gif);
padding:18px 0 0 0;
}
.li-bg-l:hover{
background: url(../img/nvg/libgl-on.gif);
}
.nav li a {
float:left;
width:165px; 
height:32px;
text-align:center;
background-image:url(../img/nvg/libg.gif);
padding:18px 0 0 0;}

.nav li a:hover { 
background: url(../img/nvg/libg-on.gif);}

.li-bg-r{
float:left;
width:165px;
height:32px;
text-align:center;
background: url(../img/nvg/libgr.gif);
padding:18px 0 0 0;}

.li-bg-r:hover{
background: url(../img/nvg/libgr-on.gif);}

Edited August 21, 2009 by art-Limon

Psyh · August 22, 2009

У меня в IE7 нормально отображается.

Думается мне, стоит сделать макет поуже и отцентровать, иначе у половины юзеров будет горизонтальная полоса прокрутки.

Edited August 22, 2009 by Psyh

mishka · August 22, 2009

У большинсва юзеров мониторы 17", значит при просмотре сайта шириной более 1000px будет появлятся в браузере горизонтальный скролл(что немного раздражает).

Отключмте в браузере стили(css) и картинки и вы увидите примерную картину которую видит поисковый робот (незабывайте что около 90% юзеров к вам на сайт попадают через поисковики). Здорово если сайт с хорошим контентом да еще и красивый, но усилия будут напрасны если все будет картинками(особенно без атрибата alt), или бекграундом, поисковый робот ваш сайт закинет на какоенибудь ынцатое место(большынство юзеров(я в том числе) незаходят дальше первой страницы результата поиска, это 10 результатов). Использование метатегов keywords, discription без подтверждения этих слов дальше в содержимом сайта непринесут много плодов. Вывод: делайте сайт так чтобы при отключенных стилях и картинках пользователь мог получить полную информацию. Это так... на будующее

Менюшку сделайте списком ul-li, в вашем случае никаких классов на <a> цеплять ненадо, сепаратор/разделитель(короче вертикальную полоску) вырезайте отдельно и цепляйте бекграундом сдевой стороны на <li>, так же для выделения места под бекграунд лишкам делайте паддинг слева и справа шириной как этот разделитель, и минусовой марджин лишкам слева также на ширину этого разделителя. На <ul> кроме всего прочего надо overflow:hidden; и ширину (например width:100% На <a> для бекграунда вырезаете полоску шириной в 1px и репитете по иксу. Таким образом верстка станет немного универсальнее.

Чтобы записать телефон: сделайте блок с текстом телефона. В css ему укажите width:..px; height:..px; overflow:hidden; text-indent:-9999px; и бекграундом положите картинку с телефоном. Это если хотите 100% соответствие с дизайном. Также и с логотипом.

В вашем случае не используйте position:relative для позиционирования блока со скидкой, делайте это с помощью position:absolute. При применении релейтив и абсолюта помните что релейтив не выбивает елемент со статического потока, значит на такой елемент(и также этот елемент), будет влиять на размещение соседних елементов. Пока все по вашему хедеру... Еще: внесите навигацию в хедер

Sign In

Процесс верстки сайта ЦТ «CARBON»

Question

art-Limon

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

BassEast

Link to comment

Share on other sites

art-Limon

Link to comment

Share on other sites

BassEast

Link to comment

Share on other sites

art-Limon

Link to comment

Share on other sites

art-Limon

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

art-Limon

Link to comment

Share on other sites

Psyh

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information