Прайс html из jpg

an1401 · July 7, 2011

Здравствуйте, у меня такая задачка интересная))))

Есть прайс лист в jpg в дизайне сайта, нужно его сверставть в html, что бы была возможность в дальнейшем его редактировать через админку.

Вот jpg:

ну я решил сделать это следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
#prais1 {
		background-image: url(img/prais%20lazernai%20gravirovka_test.jpg);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.стиль1 {font-size: 18px}
.стиль2 {font-size: 14px; }
.стиль4 {font-size: 12px; }
.стиль5 {font-size: 10px; font-weight: bold; }
.стиль6 {font-size: 12; }
-->
</style>
</head>

<body>
<div id="prais1" style="position: relative; left:250px; top:25px; width:661px; height:247px;">

<table width="661px" height="247px" border="1" cellpadding="0"  cellspacing="1">
  <tr>
    <td colspan="2"><p align="center" class="стиль1 стиль2">Лазерная и механическая гравировка</p></td>
  </tr>
  <tr>
    <td colspan="2"><p align="center" class="стиль4"> В таблице приведены цены на изделия, выполненные методом механической гравировки, а также расходные материалы для этих изделий</p></td>
  </tr>
  <tr>
    <td width="468"><p align="center" class="стиль5">Наименование изделия</p></td>
    <td width="146"><p align="center" class="стиль5">Цена, рубли</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">189,0</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">189,0</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">189,0</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">89,0</p></td>
  </tr>
</table>

 </div> 
</body>
</html>

Вот что получилось:

Таблица тянется!!! Меня уто не устраивает, нужно что бы все было как на оригинале....

Может у кого есть какие идеи?

sigma77 · July 7, 2011

Таблица тянется!!! Меня уто не устраивает, нужно что бы все было как на оригинале....
Может у кого есть какие идеи?

А как она должна себя вести в случае, если в ней контента больше, чем высота дива?

И никогда не пиши название классов кириллицей.

an1401 · July 7, 2011

На счет класссов, это я быстро накидал)))

А дак как поступить все же ? не использовать табл?

taiki · July 7, 2011

попробуй поставить в стиле ( в самом начале)


* {
padding: 0;
}

либо всему контейнеру задать max-width

и га будущее не используй в коде кирилличные название названия, только латынь. кириллицей должен быть только контент, если проще то в коде не должно быть стиль1, стиль2...

an1401 · July 7, 2011

дак у меня у дива фон статичной высоты он не тянется...

margin:0px; поставил)))

а как с границами у табла поступить, что б былло как в оригинале?

Softlink · July 7, 2011

я бы начал с того, что заменил бы p, например, спаном

taiki · July 7, 2011

дак у меня у дива фон статичной высоты он не тянется...

из-за фона все так и поехало так как он не тянеться, пардон но это на мой взгляд очевидно.

an1401 · July 7, 2011

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

а без фона как все это сделать то )))))

taiki · July 7, 2011

а как с границами у табла поступить, что б былло как в оригинале?

в стилях нужно добавить border: [параметры]

но тут нужно смотреть куда конкретно

Softlink · July 7, 2011

тут по-хорошему убрать все лишнее из ячеек и навесить классы на ячейки таблицы

an1401 · July 7, 2011

т.е. можно прописать у tr отдельно нижние и верхние грацы?

taiki · July 7, 2011

можно и так.

я конечно извиняюсь, но зачем требуется точное воспроизведение .jpg?

пардон не корректно понял вопрос.

border настраивает стиль для всех границ.

если проложившим вставить


* {
border: 1px solid #444;
}

у тебя все границы ( вообще все), буду серые толщиной 1 пиксель

если сделать


table {
border: 1px solid #444;
}

то соответственно только внешние границы будут толщиной 1 пиксель

и так далее.

Edited July 7, 2011 by taiki

an1401 · July 7, 2011

можно и так.
я конечно извиняюсь, но зачем требуется точное воспроизведение .jpg?

ну что бы по дизайну типа цвет и толцина полосок была как на .jpg

sigma77 · July 7, 2011

А дак как поступить все же ? не использовать табл?

Повторю вопрос. Как должна себя вести таблица или див, в случае, если ее высота больше, чем высота дива?

Либо убирай у дива высоту.

an1401 · July 7, 2011

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

Из кода выше:

высота дива

height="247px"

высота таблицы

height="247px"

SelenIT · July 7, 2011

Как-то так не подойдет?

taiki · July 7, 2011

sigma77, тут даже не в диве проблем мне кажется, а из-за фона.

Softlink · July 7, 2011

чувствую долго тут будет так идти дискуссия, ТС вообще не воспринимает то, что ему пишут.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">

#prais1 {
                background-image: url(img/prais%20lazernai%20gravirovka_test.jpg);
        background-repeat: no-repeat;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}
.top {font-size: 18px; text-align:center;}
.top2 {font-size: 14px; text-align:center;}
.nal {font-size: 12px; text-align:center;}
.cena {font-size: 10px; font-weight: bold; text-align:center;}
.all {font-size: 12; text-align:center;}

</style>
</head>

<body>
<div id="prais1" style="position: relative; left:250px; top:25px; width:661px; height:247px;">

<table width="661px" height="247px" border="1" cellpadding="0"  cellspacing="1">
  <tr>
    <td colspan="2" class="top">Лазерная и механическая гравировка</td>
  </tr>
  <tr>
    <td colspan="2" class="top2"> В таблице приведены цены на изделия, выполненные методом механической гравировки, а также расходные материалы для этих изделий</td>
  </tr>
  <tr>
    <td width="468" class="nal">Наименование изделия</td>
    <td width="146" class="cena">Цена, рубли</td>
  </tr>
  <tr>
    <td  class="all">Пломбир простой под свинец</td>
    <td class="all">189,0</td>
  </tr>
  <tr>
    <td  class="all">Пломбир простой под свинец</td>
    <td class="all">189,0</td>
  </tr>
  <tr>
    <td  class="all">Пломбир простой под свинец</td>
    <td class="all">189,0</td>
  </tr>
  <tr>
    <td  class="all">Пломбир простой под свинец</td>
    <td class="all">89,0</td>
  </tr>
</table>

 </div> 
</body>
</html>

sigma77 · July 7, 2011

taiki,

Так ты по-русски объясни что тебе нужно.

taiki · July 7, 2011

sigma77, причем тут я?

an1401 · July 7, 2011

Нифига ребята , да вы за пару секунд все сварганили.

Спасибо за помощь, щас час буду разбирать что к чему

:D

Как-то так не подойдет?

слушай а че это у тебя за прога такая интересная?

Int · July 7, 2011

И никогда не пиши название классов кириллицей.

Не далее как тут показывали названия классов utf-8 символами типа « или°

SelenIT · July 7, 2011

Угу, я тоже хотел возразить, что нелатинские символы в классах — не обязательно зло

sigma77 · July 7, 2011

Int, SelenIT,

Ну кто-то уже приводил цитату, что если что-то можно использовать, не факт что это нужно использовать

SelenIT, не ты это был случайно?

SelenIT · July 7, 2011

если что-то можно использовать, не факт что это нужно использовать

Согласен, но верно и обратное — если что-то не нужно использовать всё время, то далеко не факт, что это что-то использовать нельзя

Sign In

Прайс html из jpg

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information