klara7

Статья действительно очень полезная! Огромная Вам благодарность. буду разбираться Тут трудно спорить Тренировка - именно то что мне нужно, потому как только учусь. С таблицами худо, бедно подружилась, а в css пока "плаваю", поэтому решила попробовать Спасибо что не ленитесь объяснять чайникам!

Можно, но это очень не удобно 1.Прошу прощения, не знала. 2-3. Наверное, придется так и делать. А почему нельзя задать им высоту 100%?

Доброе время суток! В верстке не сильна, поэтому спрашиваю. У меня сайт из 3 колонок. Они должны быть одинаковой высоты и заканчиваться у футера. Но проблема в том, что они растягиваются по содержимому и обрываются. Пробовала ставить высоту 100%, все равно не получается. Если укажите также ошибки, буду очень благодарна. css /* Основные элементы для всей страницы */ body { background-image: url('pict/fon2.jpg'); /* Путь к фоновому изображению */ color: #000000; /* Цвет шрифта */ margin: 0px auto; /* Отступы и положение */ font-family: Arial, Verdana, 'Times New Roman'; /* Шрифт */ font-size: 14px; /* Размер шрифта */ } /* Все для ссылок: активных, наведенных, посещенных */ A { FONT-SIZE: 11px; /* Размер шрифта */ FONT-FAMILY: Tahoma, Verdana, sans-serif; /* Шрифт */ COLOR: #067f9e; /* Цвет шрифта*/ } A:active { COLOR: #067f9e } A:visited { COLOR: #660066 } A:hover { COLOR: #067f9e } A:hover { TEXT-DECORATION: none } /* Таблица */ table { BORDER #CC0000 1px solid; /* Граница: цвет, ширина, тип линии */ border-collapse: collapse; /* Отображать одинарные линии между ячейками */ } /* Заголовки ячеек - 1 строка в шапке таблицы */ th { text-align: center; /* Выравнивание */ background: #FFFACD; /* Цвет фона ячеек */ FONT-SIZE: 80%; /* Размер шрифта */ padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ } /* Ячейки */ td { FONT-FAMILY: Arial, Verdana, sans-serif; /* Шрифт */ FONT-SIZE: 13px; /* Размер шрифта */ padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ background: #F0F8FF; /* Цвет фона ячеек */ } /* Шапка */ #header { background-image: url('pict/shapka1.jpg'); /* Путь к фоновому изображению */ height: 120px; /* Высота*/ width: 1024px; /* Ширина */ } /* Параметры поля страницы 1024 */ #container { background: #FFFFFF; background-position: center bottom; margin: 0 auto; width: 1024px; } /* Левая колонка баннеров */ #banner { background: #F0F8FF; float: left; width: 170px; } img.banner{ padding: 5px 0px 5px 0px; } #content { background-image: url('pict/f.gif'); /* Путь к фоновому изображению */ float: left; width: 684px; height: auto; /* Высота полосы*/ } #text p { font-family: Arial, Verdana, sans-serif; font-size: 10pt; text-align: justify; text-indent: 1.5em; margin: 0; padding: 5px 10px; } /* Картинки выравнивается справа и слева от текста */ .img1 { margin: 10px 10px; float:right; } .img2 { margin: 10px 10px; float: left; } /* Заголовки h1-h4*/ h1 { color: #f60; /* цвет шрифта */ font-size: 180%; /* размер в процентах */ font-weight: normal; /* без жирности */ text-align: center; /* выравнивание по центру */ padding: 5px 15px; } h2 { color: #f60; /* цвет шрифта */ font-size: 150%; /* размер в процентах */ font-weight: normal; /* без жирности */ text-align: center; /* выравнивание по центру */ padding: 5px 10px; /* отступ 1-сверху и снизу, 2 - с права и лева */ } h3 { color: #f60; /* цвет шрифта */ font-size: 120%; /* размер в процентах */ font-weight: normal; /* без жирности */ text-align: center; /* выравнивание по центру */ padding: 5px 15px; /* отступ 1-сверху и снизу, 2 - с права и лева */ } h4 { color: #f60; /* цвет шрифта */ font-size: 100%; /* размер в процентах */ font-weight: bold; /* жирный */ text-align: center; /* выравнивание по центру */ padding: 5px 15px; /* отступ 1-сверху и снизу, 2 - с права и лева */ } /* Цитата */ q { border: 0px; /* параметры границы */ background-color: #FFFACD; /* цвет фона */ margin: 10px 30px; color: #C00; /* цвет шрифта */ font-size: 90%; /* размер в процентах */ font-style: italic; /* курсив */ line-height: 1; /* межстрочный интервал */ } #menu { background: #F0FFFF; float: right; width: 170px; height: 100%; /* межстрочный интервал */ } ul.menu { list-style-image: url('pict/_5.gif'); /* Путь к фоновому изображению */ list-style-position: outside; /* Маркер обтекается текстом */ } p.menu { text-indent: 0em; } table.menu { border: 0px; /* параметры границы */ background-color: #FFA500; /* цвет фона */ color: #C00; /* цвет шрифта */ font-size: 80%; /* размер в процентах */ font-style: italic; /* курсив */ width: 170px; padding: 5px; } th.menu { padding: 8px; border: solid 1px #CCCCCC; background-color: #FFC0CB; /* цвет фона */ vertical-align: top; text-align: center; font-size: 100%; /* размер в процентах */ color: #000; /* цвет шрифта */ } td.menu { padding: 2px 0 2px 0; border: solid 1px #CCCCCC; vertical-align: top; font-size: 100%; /* размер в процентах */ text-align: left; color: #8B4513; /* цвет шрифта */ } #clear { clear:both; /* Отмена обтекания элемента */ } /* Подвал*/ #footer { background-image: url('pict/rast14a.jpg'); /* Путь к фоновому изображению */ color: #fff; /* Цвет шрифта */ font-family: Arial, Helvetica, sans-serif; /* Семейство шрифта */ text-align: right; /* Выравнивание текста относительно страницы */ font-size: 9pt; /* Размер шрифта */ padding: 15px; /* Отступ*/ width: 1024px; /* Ширина*/ clear: both; margin: 0 auto; } #footer a { color: #ff0; } #footer a:hover { color: #f00; } /*CSS sabrosus style pagination*/ DIV.sabrosus { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.sabrosus A { BORDER-RIGHT: #9aafe5 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #9aafe5 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #9aafe5 1px solid; COLOR: #2e6ab1; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #9aafe5 1px solid; TEXT-DECORATION: none } DIV.sabrosus A:hover { BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow } DIV.pagination A:active { BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow } DIV.sabrosus SPAN.current { BORDER-RIGHT: navy 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: navy 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: navy 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: navy 1px solid; BACKGROUND-COLOR: #2e6ab1 } DIV.sabrosus SPAN.disabled { BORDER-RIGHT: #929292 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #929292 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #929292 1px solid; COLOR: #929292; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #929292 1px solid } html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Идеи для Дома и Офиса</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="banner"> <img src="pict/banner1.gif" alt="Нажми на меня!"> <img src="pict/banner2.gif" alt="Нажми на меня!"> <img src="pict/banner3.gif" alt="Нажми на меня!"> <img src="pict/banner4.gif" alt="Нажми на меня!"> <img src="pict/banner5.gif" alt="Нажми на меня!"> <img src="pict/banner6.gif" alt="Нажми на меня!"> <img src="pict/banner7.gif" alt="Нажми на меня!"> <img src="pict/banner8.gif" alt="Нажми на меня!"> <img src="pict/banner9.gif" alt="Нажми на меня!"> <img src="pict/banner10.gif" alt="Нажми на меня!"> </div> <div id="menu"> <table class="menu"> <tr> <th class="menu">Для бизнеса и карьеры</th></tr> <tr><td class="menu"> <ul class="menu"> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> </ul> </td></tr> </table><br /> <table class="menu"> <tr> <th class="menu">Для бизнеса и карьеры</th></tr> <tr><td class="menu"> <ul class="menu"> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> </ul> </td></tr> </table> </div> </div> <div id="content"> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <div id="text"> <p> И.Г.: А вот чем раньше задуматься, тем лучше. Чаще всего говорят про морщины. Но «плывет», как правило, низ: подбородок, шея, уголки губ, носогубный треугольник. Эта область быстрее выдает возраст. Какое универсальное упражнение можно выполнять, чтобы держать мышцы этой области лица в тонусе? </p> <img class="img1" src="pict/foto_30385.png" alt="Бизнес" /> <p>Сильно натяните нижнюю губу на верхнюю, потом растяните уголки губ к ушам, задержите на счет пять, затем верните в исходное положение. Или еще одно простое упражнение. Подставьте руку к подбородку вот так (как на фото – прим. автора). Вы хотите открыть рот, но кулак вам не дает этого сделать. И вот вы сейчас 30 секунд вряд ли высидите, потому что вы не занимались: скорее всего, у вас сведет мышцы. И таких нужно сделать три подхода. Это упражнение тренирует мышцы шеи и подбородка. </p> <p>Дальше: вы открыли рот и хотите его закрыть с помощью этого же кулака, но челюсть вам этого сделать не дает. И точно так же три подхода по 30 секунд. Вот у вас три минуты – но вы уже область шеи и носогубного треугольника себе проработали. </p> <p> <div class="sabrosus"><span class="disabled"> < </span><span class="current">1</span><a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a><a href="#?page=2"> > </a></div></p> <img class="img2" src="pict/foto_115193.gif" alt="Бизнес" /> <p>Дальше идут упражнения на щеки, на глаза. На лоб, на все поперечные морщины. Если к этому еще присоединить самомассаж – вообще отлично! Конечно, массаж лучше проводить у косметолога, поскольку самомассаж уступает массажу у профессионала. </p> </div> <q>Эта область быстрее выдает возраст. Какое универсальное упражнение можно выполнять, чтобы держать мышцы этой области лица в тонусе?</q> <ul> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> <li>Коллекция бизнесс-визиток</li> </ul> <table width="100%" cellspacing="0"> <col width="160"> <col span="9" width="60"> <tr> <th> </th> <th>1995</th><th>1996</th><th>1997</th><th>1998</th> <th>1999</th><th>2000</th><th>2001</th><th>2002</th> <th>2003</th> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> <p> </p> </div> <div id="clear"> </div> <div id="footer">Идеи для дома и офиса</div> </div> </body> </html>

Спасибо Вам большое! Обязательно поизучаю!

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

Прошу прощения что сразу не объяснила. Это не совсем сайт - это будет что-то типа каталога на диске, так что php отпадает. Прочитала, правда кратко про SSI. Там тоже что-то типа сервера надо? А есть еще какие варианты?

Доброе время суток! Хочу чтобы над шапкой размещалось 4 места под баннеры и баннеры постоянно менялись. Сайт на html и там куча-куча страниц. Можно ли сделать так, чтобы весь код лежал в одном файле (и если баннеры добавляются, то править только его), а на страницах указывалось только 4 места. Иначе каждый раз все править - это просто ужас ? В яве не сильна, так что если можно, поподробнее

Спасибо большое! Все гениальное просто

Страница на домашнем комьпе. А вот код: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка html</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header">Шапка </div> <div id="navigation">Строка навигации </div> <div id="menu">Меню</div> <div id="content">Текст</div> <div id="clear"> </div> <div id="footer">Подвал</div> </div> </body> </html> style.css body { background: #f3f2f3; color: #000000; margin: 0px auto; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 14px; } #container { background: #FFFFFF; margin: 0px auto; width: 900px; height: 1000px; } #header { background: #838283; height: 200px; width: 900px; } #navigation { background: #a2a2a2; width: 900px; height: 20px; } #menu { background: #333333; float: left; width: 200px; height: 600px; } #content { background: #d2d0d2; float: right; width: 700px; height: 600px; } #clear { clear:both; } #footer { background: #838283; height: 80px; width: 900px; }

В верстке не сильна, только начинаю изучать, так что сильно не пинайте Верстаю страницу и все вроде бы нормально, вот только в IE8 страница уехала влево, хотя должна быть посередине (ширина 900px). margin: 0px auto; не помогает Как справиться?

Денвер - это для тех кто не хочет сам собирать на домашнем комьпе сервер (php, mysql, apache). Если сайт на php просто незаменимая весчь Абсолютно согласно. Если картинка лежит в папке, то background: url('../pict/rosa.jpg');

Проблема вроде решена, поставила с rp5. На всякий случай, может кому пригодиться, на mail.ru тоже есть свои погодные информеры и там можну выбрать кодировку. Минусы: 1 цвет и очень большая реклама самого майла. Спасибо всем за помощь!

Спасибо большое Veseloff! А как вы считаете какой погодный информер меньше врет? И что такое "iconv"? Я в тонкостях не сильна, но при кодировке в utf8 при оформлении заказа на почту приходили кукарямбы, сделала в windows-1251, все получилось! Но может быть если все сделать utf8 будет нормально?

Спасибо за подсказки, Justnewone. Понимаю, у Вас нет времени возиться со мной, но к сожалению не "въехала". Может быть кто-нибудь еще сможет "разжевать" новичку Итак, вопрос "как делать перекодировку налету"?

Уважаемый Justnewone! Не могли бы Вы поподробнее. Сайт сделан на чистом html + кое-где JavaScript + форма заказа php. Данные для информера получаются от гисметео, видимо они у них utf8.

Добрый день! Есть сайт (кодировка windows-1251) www.garant.ufaexpo.ru Поставили погодный информер (он на JavaScript) у меня все выглядит замечательно - русский язык в норме, а заказчик говорит что у него квадратики Как тут быть, чтобы все у всех отбражалось нормально?