Не убираются рамки между таблицами, не растягивается изображение по ширине и еще много моментов, буду благодарна за подсказки - HTML и CSS

raspberry7 · 03.11.2013, 06:06

Не получается сверстать макет, использовать нужно табличную верстку, кое-где возможно использование div. Подозреваю, что напутала с классами и идентификаторами, но не могу найти где.Макет вообще такой хотелось бы реализовать: http://www.programmersforum.ru/attac...1&d=1383444352
и желательно не сильно отходя от той схемы которую я наметила, т.к. потом совсем запутаюсь.

1. Хочу текст в шапку поставить из ФШ и чтобы фон был единый для всей страницы, но даже после сохраения в png-24 и jif, область вокруг текста белая, а не прозрачная (слои все как положено были отключены). Верх сделала просто с помощью заголовка таблицы, но при других вариациях результат не менялся.

2. Как выровнять меню по центру? И почему в Опере все хорошо отображается, а в других браузерах пробелы между ячейками. (Сейчас только заметила, что при изменении масштаба расстояние между пунктами меню также увеличивается, как можно эту проблему решить?)

3. Хром не видит центральную колонку и фон, в опере и фаерфоксе видит норм.

4. Как растянуть фон по ширине?

5. Как убрать просветы между верхом, основной частью и футером.

Код HTML:

 <body>
 <table id="main">
 <caption><img src="img/header.png" alt="Рисуночек"></caption>
 <tr>
 <td id="topmenu">
 <table class="top_menu">
 <tr>
 <td><ul class="menu"><li><a href="#"><img src="img/menu1.png" alt="Рисуночек"></a></li><li><a href="#"><img src="img/menu2.png" alt="Рисуночек"></a></li><li><a href="#"><img src="img/menu3.png" alt="Рисуночек"></a></li><li><a href="#"><img src="img/menu4.png" alt="Рисуночек"></a></li>
 </ul>
 </td>
 </tr>
 </table> 
 </td>
 </tr>
 <tr>
 <td id="content">
 <table class="center_table">
 <tr>

 <td class="column_center">
 </td>

 </tr>
 </table>
 </td> 
 </tr>
 <tr>
 <td id="footer">
 <div class="footerleft">Copyright 2013</div>
 <div class="footerright"> Тел. +38(095)<br> <strong>e-mail: rita</strong>
 </div>
 </td>
 </tr>
 </table> 
 </body>


CSS




 html, body{
 margin:0;
 padding:0;
 width:100%;
 height:100%;
 }
 A:link{
 color:#000000;

 }
 A:visited{
 color:#000000;

 }
 A:hover {
 color: #FF8791;

 }

 A:active{
 color:#FF8800;

 }
 table{
 width:100%;
 margin:0;
 padding:0;

 }
 TD{
 color:#000000;
 font:11px Georgia, "Times New Roman", Times, serif ;
 margin:0;
 padding:0;
 vertical-align:top;


 }
 P{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 } 


 /* ---------->>>id/top/center/footer <<<-----------*/
 table#main{
 height:100%;
 background-image: url(img/backgr.jpg);
 border-collapse: collapse;
 }


 td#topmenu{

 height:80px;
 width:773px;

 }
 td#content{
 width:773px;
 height:100%;
 border: 0px;
 } 
 td#footer{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color:black;
 background-image: url(img/backgr.png);
 width:100%;
 height:179px;

 }
 /* ---------->>>Top<<<-----------*/
 table.top_menu{
 border: 0px;
 text-align: center; 
 margin: auto;
 /* width: 773px; */

 }
 td.top_center{
 width:100%;
 background:url(img/backgr.png);
 text-align:center;

 }
 /* ---------->>> Center <<<-----------*/

 table.center_table{
 border: 0px;
 height:1280px;
 width: 1024px;

 }

 td.column_center{
 margin:0; padding:0;
 border: 0px;
 background:black;
 background-image: url(img/backgr.png);
 background-repeat: no-repeat;

 }

 div.footerleft{

 float:left;
 line-height:70px;
 text-align:center;
 width:174px;
 height:70px;

 }
 div.footerright{
 float:right;
 line-height:14px;
 text-align:right;
 padding-top:20px;
 padding-right: 20px;
 height:70px;
 width:174px;
 }

 img.backgr {
 background-image: url(img/backgr.png); 
 height: 100%;
 }

 img.menu1,menu2,menu3,menu4{
 width: 100%;
 height: 100%;
 }

 * {margin:0; padding:0;}
 ul {list-style: none;}
 ul.menu {
 margin:0; 
 padding:0;
 overflow:hidden;
 }
 ul.menu li{
 float: left;
 width:15%;

 }
 ul.menu a{
 border: 0px;
 font-size:0px; 
 height:80px; 
 text-align:center;
 background-color: #F7E2A1; 
 color:black;
 text-decoration: none;
 white-space:nowrap;
 display : inline-block ;
 float: left;

 }
 ul.menu a:hover{
 color:black;
 background-color: #FFAC94;

 }
 ul.menu li a#der{
 color:black;
 background-color: #FFAC94;

 }

Naive · 03.11.2013, 11:47

Слова ничто, покажите мне код (с) Линус Торвальдс

03.11.2013, 11:47	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Слова ничто, покажите мне код (с) Линус Торвальдс Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
ПРОГРАММА В ПАСКАЛЕ!!!БУДУ ОЧЕНЬ БЛАГОДАРНА!!!	Настя Котова	Помощь студентам	15	17.04.2013 09:23
буду очень благодарна)	anytka2k	Помощь студентам	1	16.11.2011 11:19
буду очень благодарна )	In\/isible	Паскаль, Turbo Pascal, PascalABC.NET	3	26.04.2011 20:45
CSS: бэкграунд растягивается по ширине страницы	Ellar	HTML и CSS	1	21.07.2010 09:24