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

Автоспец

По поводу дизайна сайта, понимаю, что это прошлый век, а так как в веб-дизайне пока ноль (образование - инж.мех.) скачал более-менее подходящий шаблон.

Почти полностью вставил в него свой контент.

Пожалуйста укажите на возможные ошибки, а также что и где исправить, дабы добиться этой самой резиновости. Вот код страницы шаблона (среднюю часть, где основной текст пришлось вырезать, тема с кол-вом знаков - более 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

Автоспец, для кодов пользуйтесь кнопочками в редакторе

или

Автоспец

Veter:
Автоспец, для кодов пользуйтесь кнопочками в редакторе или

Не знал, понял, учту.

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

Автоспец, не те вы шаблоны выбираете, не те... Надо такие. где стили отдельно, тогда не трогая контент, вы сможете менять внешний вид до неузнаваемости! 1) Где искать инфу по вёрстке? Тут!

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

. А украшательтв на свой вкус понавешаете.

Принцип такой: вверху каждой страницы будет ссылка на файл стилей, а на самой странице только контент.

И если меняете стиль в файле стилей, он сразу меняется на всем сайте, удобно ведь.

Стили, измененные для одной конкретной страницы по-прежнему сможете ставить прямо по месту, они будут приоритетными.

Автоспец

Ну а всё-таки, из представленного шаблона возможно ли сделать резиновый? Если да, то что в нём нужно заменить? Инфы по поводу резины прочёл много, но ума дать почему-то не получается.

Если надо вставить

 width max и width min

, то куда? Подскажите пожалуйста.

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

Не судите строго, ведь я только в начале пути.

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

Добавьте body {width: 100%;} table {width: 80%;} и отрегулируйте все параметры width (ширины) в таблице (их лучше тоже заменить на процентные соотношения).

Автоспец

Вставил вот так:

 <!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>

правильно или нет (почему-то нет эффекта)? И как правильно расставить процентные соотношения?

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

Автоспец:

<table width="80%">

</table>

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

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

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

Если не хотите, чтобы другие читали, ссылку можно мне в личку.

Автоспец

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

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

Автоспец, я отвечу завтра, файл скачала, прогляжу и все напишу.

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

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

Значит, с меня - объяснения. Наглядные.
1) Открываем страничку в блокноте (а лучше в каком-нибудь редакторе (я пользовалась Notepad++), и визуально делим код на четыре части: а) стили (то, что в теге style) б) первая строка в) вторая строка г) третья строка Можно отметить комментариями, обычно я так и делаю - удобно. Строки смотрим не у вложенных таблиц (их там несколько) а у основной, она начинается сразу после тега body и заканчивается в самом низу страницы.
2) Смотрим на схему, что я нарисовала и приводим свою таблицу в резиновый вид. 1. В стилях добавьте фон для кнопок меню, а то на белом фоне без картинок фона их совсем не видно.

Для этого можно создать класс, например, menu2. 2. В первой строке заданы: а) свойства фона с двух сторон от центрального блока.

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

Их лучше всего выровнять по центру, а то они сбоку болтаются и при широком экране будут оставаться слева.

(align="center") 2. Во второй строке - меню и вводный текст.

Ширину меню не трогаем.

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

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

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

Я понимаю, что это мне, верстальщику, все это говорить просто.

но надеюсь, что вы справитесь.

там ничего на самом деле сложного нет, табличная верстка, она простая.

Да и на любые вопросы я рада ответить))

Автоспец

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

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

Автоспец:
не сочтите за труд, помогайте. Спасибо.

Да, любые вопросы, конечно

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

фон у меня имеется (красный, идёт как картинка 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

, там по всем тегам справочник есть...

Автоспец

Здравствуйте.

Ночная:
Вы думаете, я не видела, что там картинка?
Автоспец, я не просто так говорю - укажите фон.

Извините, просто я действительно не знал о таких нюансах. Постараюсь всё исправить.

Автоспец

Добрый вечер.

Снова беспокою Вас со своими проблемами.

Отредактировать шаблон даже под вашим профессиональным взором у меня не получается, видимо ещё не дорос.

Внёс максимально посильные коррективы в действующий шаблон.

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

Похожие темы	Дата
[Специалист] Технология Enterprise Java Beans 3.0	19.10.2024, 18:10
Телефонный, GSM Флудер	19.10.2024, 18:10
#Запости - Дэвид Синден, 2015	19.10.2024, 18:10
Чаты. Как правильно спорить, сплетничать и работать в интернете - Дарья Черкудинова, 2018	19.10.2024, 18:10
Delphi компоненты для работы с Google Sheets	19.10.2024, 18:10
FMX MediaPlayer FullScreen	19.10.2024, 18:10
Delphi 10.2 + android intel	19.10.2024, 18:10
GhostDoc Enterprise - All Here	19.10.2024, 18:10
Dim Out the Main Form of an Application When a Modal Form (/Dialog) is Displayed by Žarko Gajić	19.10.2024, 18:10
Generic Anonymous Methods by Radek Červinka	19.10.2024, 18:10

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

Автоспец

Wmboard

Автоспец

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

Автоспец

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

Автоспец

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

Автоспец

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

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

Автоспец

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

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

Автоспец

Автоспец

I AM

Интересно