Как сделать сайт резиновым?

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
По поводу дизайна сайта, понимаю, что это прошлый век, а так как в веб-дизайне пока ноль (образование - инж.мех.) скачал более-менее подходящий шаблон. Почти полностью вставил в него свой контент. Пожалуйста укажите на возможные ошибки, а также что и где исправить, дабы добиться этой самой резиновости.

Вот код страницы шаблона (среднюю часть, где основной текст пришлось вырезать, тема с кол-вом знаков - более 10000 не создаётся):


Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>Лучший сайт!</title> <style>
td{font-family:Verdana;font-size:9px;}
.white{color:#ffffff}
.menu{font-family:Sevenet 7 Cyr;font-size:8px;text-decoration:none;color:#ffffff} </style>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<table border="0" cellpadding="0" cellspacing="0" height="100%"> <tbody> <tr> <td rowspan="10" style="background-position: right top; background-repeat: repeat-y;" background="https://lumtu.com/images/bg1222.jpg" height="100%" width="50%"></td> <td rowspan="10" bgcolor="#000000" width="1"></td> <td colspan="2"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img src="https://lumtu.com/images/t00.jpg"><a href=""><img src="https://lumtu.com/images/t01.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/t02.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/t03.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/t04.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/t05.jpg" border="0"></a><img src="https://lumtu.com/images/t06.jpg" border="0"></td> </tr> <tr> <td><img src="https://lumtu.com/images/name.jpg"></td> </tr> </tbody> </table> </td> <td rowspan="10" bgcolor="#000000" width="1"></td> <td rowspan="10" style="background-position: left top; background-repeat: repeat-y;" background="https://lumtu.com/images/bg1223.jpg" height="100%" width="50%"></td> </tr> <tr> <td background="https://lumtu.com/images/bg011.gif" valign="top"> <table border="0" cellpadding="0" cellspacing="0" height="100%"> <tbody> <tr> <td style="background-repeat: no-repeat; background-position: center top;" background="https://lumtu.com/images/bg01.jpg" height="195" valign="top" width="171"> <table style="width: 165px; height: 194px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td></td> <td class="white" style="padding-right: 10px;"><span style="font-weight: bold;">Главная<br> </span><span style="font-weight: bold;"><br>
Статьи<br> </span><span style="font-weight: bold;"><br>
Фотогалерея</span><span style="text-decoration: underline;"><br> </span><span style="font-weight: bold;"><br>
Новости</span><span style="font-weight: bold;"><br> <br>
Контакты<br> </span><span style="font-weight: bold;"><br>
Форум<br> </span><span style="font-weight: bold;"><br>
Доска объявлений<br> </span><span style="font-weight: bold;"></span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td bgcolor="#446333" valign="top"> <table border="0" cellpadding="0" cellspacing="0" height="100%"> <tbody> <tr> <td><a href=""><img src="https://lumtu.com/images/m01.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m02.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m03.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m04.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m05.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m06.jpg" border="0"></a><a href=""><img src="https://lumtu.com/images/m07.jpg" border="0"></a></td> </tr> <tr> <td style="background-repeat: no-repeat; background-position: center top;" background="https://lumtu.com/images/bg02.jpg" height="154" valign="top" width="609"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top" width="246"><img src="https://lumtu.com/images/pic.jpg" hspace="15" vspace="10"></td> <td valign="top"> <div style="padding-left: 10px; padding-top: 10px;" class="white"><b>New tracktion control for VOLVO track
drivers.</b></div> <div style="padding-left: 10px; padding-top: 6px;" class="white">16:40; 20february2003</div> <div style="padding-left: 10px; padding-top: 10px; padding-right: 20px;" class="white">Optional 16-in. flangeless wheels look as if
they were designed by Lego. Inside, Saturn tries to be different by
using a center-mounted instrument cluster. The binnacle is canted
toward the driver, and the instruments are large enough that they are
easy to see, making adjustment to the setup a minor issue.<br> <a href=""><img src="https://lumtu.com/images/morei2.gif" border="0" vspace="5"></a></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="2" height="100%"> <table border="0" cellpadding="0" cellspacing="0" height="100%"> <tbody> <tr> <td bgcolor="#ffffff" height="2"></td> </tr> <tr> <td style="padding-bottom: 15px; padding-top: 10px;" bgcolor="#6daa37" height="100%" valign="top" width="780"> <div style="padding-left: 30px; padding-top: 10px;"><b>New
tracktion control for VOLVO track drivers.</b></div> <div style="padding-left: 20px;"> <table align="left" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img src="https://lumtu.com/images/pic01.jpg" hspace="5" vspace="10"></td> <td><img src="https://lumtu.com/images/pic02.jpg" hspace="0" vspace="10"></td> <td><img src="https://lumtu.com/images/pic03.jpg" hspace="5" vspace="10"></td> </tr> </tbody> </table> </div> <div style="padding-right: 20px; padding-top: 5px;" align="right"><a href=""><br> </a></div> </td> </tr> <tr> <td class="menu" align="center" background="https://lumtu.com/images/footer.jpg" height="24"><span style="text-decoration: underline;">Главная</span>  |  <span style="text-decoration: underline;">Статьи</span>  |  <span style="text-decoration: underline;">Фотогалерея</span>  |  <span style="text-decoration: underline;">Контакты</span>  |  <span style="text-decoration: underline;">Форум</span>  |  <span style="text-decoration: underline;">Доска объявлений</span></td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
</body>
</html>
 
Последнее редактирование модератором:

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Автоспец, для кодов пользуйтесь кнопочками в редакторе
или
:)
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Автоспец, не те вы шаблоны выбираете, не те... Надо такие. где стили отдельно, тогда не трогая контент, вы сможете менять внешний вид до неузнаваемости!

1) Где искать инфу по вёрстке? Тут! Правда. на форуме там одни профи и вопросы задавать лучше тут, мне там не понравился их тон снисходительный.

2) Какой шаблон взять? Ну, например, вот этот. А украшательтв на свой вкус понавешаете. Принцип такой: вверху каждой страницы будет ссылка на файл стилей, а на самой странице только контент. И если меняете стиль в файле стилей, он сразу меняется на всем сайте, удобно ведь. Стили, измененные для одной конкретной страницы по-прежнему сможете ставить прямо по месту, они будут приоритетными.
 

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Ну а всё-таки, из представленного шаблона возможно ли сделать резиновый? Если да, то что в нём нужно заменить? Инфы по поводу резины прочёл много, но ума дать почему-то не получается. Если надо вставить
Код:
width max и width min
, то куда? Подскажите пожалуйста. По поводу "не тех шаблонов" - этот мне оптимально подходит и по дизайну и по структуре, а в резиновый шаблон вставить дизайн из представленного у меня тоже увы, не получается. Не судите строго, ведь я только в начале пути.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Добавьте

body {width: 100%;}
table {width: 80%;}

и отрегулируйте все параметры width (ширины) в таблице (их лучше тоже заменить на процентные соотношения).
 

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Вставил вот так:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>Лучший сайт!</title> <style>
td{font-family:Verdana;font-size:9px;}
.white{color:#ffffff}
.menu{font-family:Sevenet 7 Cyr;font-size:8px;text-decoration:none;color:#ffffff} </style>
</head>
<body width="100%">
<table width="80%">
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%"> <tbody> <tr> <td rowspan="10" style="background-position: right top; background-repeat: repeat-y;" background="https://lumtu.com/images/bg1222.jpg" height="100%" width="50%"></td> <td rowspan="10" bgcolor="#000000" width="1"></td> <td colspan="2"> <table border="0" cellpadding="0" cellspacing="0"> <tbody>
правильно или нет (почему-то нет эффекта)? И как правильно расставить процентные соотношения?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
<table width="80%">

</table>

<table border="0" cellpadding="0" cellspacing="0" height="100%">

Ширину body лучше добавьте в стили, а ширину таблицы вы поставили как-то странно, таблица с шириной 80% должна охватывать ВЕСЬ контент, а не заканчиваться там, где началась. Если не трудно, выложите весь код в блокнотный файл, заархивируйте и закиньте куда-нибудь на файлообменник, я скачаю и погляжу по месту, а то на урезанном коде трудно что-либо точно сказать. Если не хотите, чтобы другие читали, ссылку можно мне в личку.
 

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Извините, с первого раза не смог просмотреть ваш ответ, а теперь не знаю как его найти. Если можно продублируйте пожалуйста, либо укажите путь.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Автоспец, я отвечу завтра, файл скачала, прогляжу и все напишу.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Итак, рассказываю и показываю.
Разумеется, я страничку переверстала, сделала резиновой, но просто взять готовое - это уже платные услуги, а тут вы учитесь делать сами ;) :D
Значит, с меня - объяснения. Наглядные.

1) Открываем страничку в блокноте (а лучше в каком-нибудь редакторе (я пользовалась Notepad++), и визуально делим код на четыре части:

а) стили (то, что в теге style)
б) первая строка
в) вторая строка
г) третья строка

Можно отметить комментариями, обычно я так и делаю - удобно.

Строки смотрим не у вложенных таблиц (их там несколько) а у основной, она начинается сразу после тега body и заканчивается в самом низу страницы.

2) Смотрим на схему, что я нарисовала и приводим свою таблицу в резиновый вид.

1. В стилях добавьте фон для кнопок меню, а то на белом фоне без картинок фона их совсем не видно. Для этого можно создать класс, например, menu2.

2. В первой строке заданы:

а) свойства фона с двух сторон от центрального блока. Размеры этих ячеек лучше всего указать в пикселях, я взяла значение 50 (width="50")

б) во вложенной таблице - разметка под картинки шапки, в верхней строке семь, кажется, и в нижней - одна. Их лучше всего выровнять по центру, а то они сбоку болтаются и при широком экране будут оставаться слева. (align="center")

2. Во второй строке - меню и вводный текст. Ширину меню не трогаем. там будут кнопки картинками, как я понимаю, они должны оставаться нетронутыми. А вот ширину "вводного текста" меняем на "auto", тогда он займет всю оставшуюся ширину таблицы.

3. В третьей строке основной текст и подвал, там трогать нечего, разве что тоже - цвет фона добавить, чтобы ссылки видны были, да отступы справа изменить - некрасиво, когда вплотную к границе буквы.

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

Вложения

  • рис.jpg
    рис.jpg
    21 KB · Просмотры: 9

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Здравствуйте. Я рад, что Вы меня правильно поняли, мне нужно именно научится, а не брать готовое. Я очень надеюсь, что под Вашим профессиональным взором я освою эту науку. О всех действиях с шаблоном буду сообщать, не сочтите за труд, помогайте. Спасибо.
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
фон у меня имеется (красный, идёт как картинка bg01.jpg)
Фон в подвале чёрный (картинка)

Вы думаете, я не видела, что там картинка?
Автоспец, я не просто так говорю - укажите фон. Картинка, это, конечно замечательно, но не у всех выделенные линии на интернет, некоторые серфингуют с отключенными изображениями в целях экономии трафика или для ускорения загрузки страниц. На вашем сайте в таком случае они просто ничего не увидят в меню. Вообще. Буквы сольются с фоном. Проверьте.

Сам тег background в стилях позволяет указать и цвет фона и изображение, и верстальщики ВСЕГДА (именно всегда!) указывают фон, отличный от цвета текста. Если картинка загрузилась - пользователь увидит её, если нет - увидит просто фон.

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

сомневаюсь, правильно ли я нашёл эти свойства фона

Правый фон, это там, где картинка images/bg1223.jpg, а левый - там, где картинка images/bg1222.jpg
К обоим ячейкам (td) добавляем атрибут width="50"

в данном районе кода нашел искомый тег только один, также встретилось несколько тегов valign="top"

Нет, их не трогайте, они другое выравнивают. valign это вертикальное выравнивание, а нас пока интересует горизонтальное.
Просто в ячейку с картинками img src="https://lumtu.com/images/t00.jpg" и images/name.jpg" к тегу добавьте атрибут align="center"

я и там заменил топ на центр (вверх поднялась зелёная полоска

Про что я и говорю - valign это другое.

Вводный текст заменить на "авто" не смог. Что надо менять

Код:
td	style="background-repeat:	no-repeat;	background-position:	center	top;"	background="https://lumtu.com/images/bg02.jpg"	height="154"	valign="top"

замените на

Код:
td	style="background-repeat:	no-repeat;	background-position:	center	top;"	background="https://lumtu.com/images/bg02.jpg"	height="154"	valign="top"	width="auto"

тег width в районе вводного текста не обнаружил.

Никто не запрещает его добавить практически к любому элементу.

При увеличении ширины экрана страница располагается по центру (даже в EI).

Это разве плохо?
Нас интересует не ее центрирование, так и должно быть, нас интересует изменение её ширины при разных разрешениях экрана монитора. Поиграйтесь Ctrl+- и Ctrl++ в браузере - поймёте.

отступы справа - это какой тег

Я просто указала бы отступы со всех четырех сторон:

Код:
style="padding: 15px 10px 0 10px;"
Сначала указывается верхний, затем по часовой стрелке - правый, нижний, левый.

Жду новых вопросов.
И вы вообще каким учебником пользуетесь?
Почитайте вот этот сайт:htmlbook.ru, там по всем тегам справочник есть...
 
Последнее редактирование:

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13

Автоспец

Пользователь
Регистрация
12.09.12
Сообщения
101
Реакции
1
Баллы
13
Добрый вечер. Снова беспокою Вас со своими проблемами. Отредактировать шаблон даже под вашим профессиональным взором у меня не получается, видимо ещё не дорос. Внёс максимально посильные коррективы в действующий шаблон. Помогите, пожалуйста сделать его резиновым, либо хотя бы предотвратить его "отъезд" к левому борту монитора, чтобы его могли просматривать пользователи основных браузеров.
 

Статистика форума

Темы
200.634
Сообщения
380.522
Пользователи
327.876
Новый пользователь
pm1199
Сверху Снизу