Вот результат: HTML <body> <div id="topbg"> <div id="container"> <!--header start--> <div id="header"> <p> <a href="#"><img src="img/freex.gif" width="292" height="143" alt="" class="name" /></a> <img src="img/freeware.gif" width="401" height="80" alt="" class="freeware" /> </p> </div> </div> </div> <!--header end--> <!-- body start --> <table cellspacing="10"> <tr> <td rowspan="2" class="line"></td> <td class="leftside"> <div class="menu"><p><a href="#">Программы</a></p> <ul> <li><a href="#">Безопасность</a> <ul> <li><a href="#">Антивирусы</a></li> <li><a href="#">Файрволлы</a></li> </ul> </li> <li><a href="#">Графика</a> <ul> <li><a href="#">Графические редакторы</a></li> <li><a href="#">Просмотр изображений</a></li> </ul> </li> <li><a href="#">Интернет</a> <ul> <li><a href="#">FTP-клиенты</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> </ul> </li> <li><a href="#">Мультимедиа</a> <ul> <li><a href="#">Кодеки</a></li> <li><a href="#">Конверторы</a></li> <li><a href="#">Проигрыватели</a></li> <li><a href="#">Редакторы</a></li> </ul> </li> <li><a href="#">Офисные</a> <ul> <li><a href="#">Просмотр файлов</a></li> <li><a href="#">Текстовые редакторы</a></li> <li><a href="#">Читалки</a></li> </ul> </li> <li><a href="#">Системные</a> <ul> <li><a href="#">Дефрагментаторы</a></li> <li><a href="#">Диагностика системы</a></li> <li><a href="#">Резервное копирование</a></li> <li><a href="#">Чистка реестра</a></li> </ul> </li> <li><a href="#">Файловые</a> <ul> <li><a href="#">CD/DVD</a></li> <li><a href="#">Архиваторы</a></li> <li><a href="#">Восстановление удаленных файлов</a></li> <li><a href="#">Файловые менеджеры</a></li> </ul> </li> </ul></div> </td> <td rowspan="2" class="rightside"> <h2>Мультимедиа \ Проигрыватели</h2> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>GOM Media Player</h2> <p><img src="img/gom.gif" width="150" height="123" class="unit_icon" alt="GOM Media Player"/>Шустрый и красивый GOM Player включает в себя много кодеков, в том числе XviD, DivX, FLV1, AC3, OGG, MP4, H263. Отличает его от аналогов то, что некоторые кодеки реализованы в самом GOM-е. Это удобно с той точки зрения, что внутренние кодеки оптимизированы по производительности и, если не присутствуют в системе, плеер всё равно сможет воспроизвести видеофайл. Для тех же видеофайлов, кодек для которых не найден, предоставляется возможность полуавтоматически скачать его и установить.</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> </td> <td rowspan="2" class="line"></td></tr> <tr> <td align="center" class="form_find"> <form action="#"> <input type="text" name="find_text" value="Что ищем?" class="m_find" /> <input type="submit" name="send" value=" " class="lens" /> </form> </td> </tr> </table> <!-- body end --> <!-- footer start --> <div id="footer"> <p>Design by Dean & Anga</p> </div> <!-- footer end --> </body> CSS * {padding: 0; margin: 0;} html, body{ width: 100%; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background:#000000; } #topbg{ background:url(img/bg_header.jpg) repeat-x; height: 166px; } #container{ width: 1000px; margin: 0 auto; } #header .freeware{ float:right; padding-top:50px; } #header .name{ float:left; padding-bottom:23px; border: none; } .line{ width:32px; background:#f48a21; } TABLE{ width:1015px; margin: 0 auto; } TD{ height:100%; vertical-align:top; } .leftside{ padding-left:25px; padding-top:25px; padding-bottom:25px; color:#f48a21; width:250px; border:2px solid #f48a21; } .menu a{ text-decoration:none; color:#f48a21; outline:none; /* Убираем границу вокруг ссылок */ line-height:1.5; } .menu a:hover{ color:#FFFFFF; } .menu a:active{ color:#999999; } .menu p{ font-size:18px; font-weight:bold; padding-bottom:10px; } .menu ul{ list-style-type:none; } .menu ul li ul{ padding-left:30px; font-size:12px; } .form_find{ border:2px solid #f48a21; vertical-align:top; } .form_find .lens{ background:url(img/lens.gif) 0 0 no-repeat; border:none; cursor:pointer; width:21px; height:30px; margin-left:20px; margin-top:10px; margin-bottom:10px; } .form_find .m_find{ background-color:#000000; border: 2px solid #666666; color:#FFFFFF; margin-bottom:10px; } .rightside{ color:#FFFFFF; border-top:2px solid #f48a21; border-bottom:2px solid #f48a21; padding:30px 10px; font-size:12px; vertical-align:top; } .rightside h2{ color:#f48a21; padding-bottom:30px; } .block-round{ margin-bottom:40px; } .block-round-content{ background:#1f1e1e; padding:20px; text-align:justify; } .r1, .r2, .r3, .r4 { display: block; font-size: 0; height: 1px; background: #1f1e1e; } .r1 { margin: 0 5px; } .r2 { margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { margin: 0 1px; height: 2px; } .block-round-content h2{ color:#f48a21; padding-bottom:10px; } .block-round-content .unit_icon{ float:left; margin-right:10px; } .block-round-content span{ display:block; text-align:right; padding-top:30px; } .block-round-content a{ color:#f48a21; } .block-round-content a.download{ background:url(img/icon_download.gif) no-repeat; padding-left:20px; padding-right:30px; } .block-round-content a.continue{ background:url(img/icon_continue.gif) no-repeat; padding-left:20px; padding-right:30px; } .block-round-content a.comments{ background:url(img/icon_comment.gif) no-repeat; padding-left:20px; } #footer{ clear:both; padding-top:30px; padding-bottom:30px; text-align:center; font-size:12px; color:#FFFFFF; } Возможно здесь будут ляпы, т.к. раньше я верстала только пару легких макетов, это я делаю для своего первого сайта. Принимается критика и замечания)
