CSS таблицы

Тема в разделе "Веб-дизайн", создана пользователем Dizeloid, 26 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Dizeloid

    Dizeloid Постоялец

    Регистр.:
    17 июл 2009
    Сообщения:
    68
    Симпатии:
    3
    Подскажите как сделать выравнивание таблицы по центру. В данный момент есть код:
    Еще мне нужно, что бы ширина таблицы была 800px (это я уже сделал), но при этом что бы она была прилеплена к верху браузера, что бы не было промежутков. Подскажите как сделать?
     
  2. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    HTML:
    body{margin: 0; padding: 0;}
     
  3. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    HTML:
    HTML:
    
    <html>
        <head>
            <link rel="stylesheet" type="text/css" media="screen" href="style.css">
        </head>
        <body>
            <table id="main_table">
                <tr>
                    <td>text</td>
                </tr>
            </table>
        </body>
    </html>
    
    CSS:
    Код:
    body {
        background: #FFFFFF;
        font-size: 11px;
        font-family: Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    #main_table {
        width: 800px;
        background-color: #333;
        color: #fff;
        margin-left: auto;
        margin-right: auto;
    }
    
     
    Dizeloid нравится это.
  4. command26

    command26 Постоялец

    Регистр.:
    1 ноя 2008
    Сообщения:
    108
    Симпатии:
    6
    Мужики, выручайте. Битый час сижу, не могу решить эту задачу. Не хочет в долбанном IExplorer становиться по середине. На всех браузерах - все в норме. Весь код сквозь зубы уже пропустил, не могу найти ошибку:
    HTML:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>---Титул---</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    A IMG {
    	border:none;
    }
    body {
    	background:url(bg-top.gif) top  repeat-x;
    	font-family:Tahoma;
    	color:#000;
    	margin:0;
        padding:0;
    }
    #main_container {
    	width:766px;
    	height:auto;
    	margin:0 auto;
    	padding:0;
    }
    #header {
    	width:766px;
    	height:351px;
    	padding:0;
    }
    #hello {
    	width:766px;
    	height:199px;
    }
    hr {
    	border:0;
    	width:700px;
    	background-color:#c9cbce;
    	color:#c9cbce;
    	height:1px;
    	clear:both;
    	text-align:center;
    	margin:5px 0;
    }
    .Z1, .Z2 {
    	color:#4A4A4A;
    	font:bold 14px Tahoma;
    }
    .news_an {
    	text-align: left;
    	padding:0 0 0 15px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:12px;
    	color:#4A4A4A;
    }
    .portletcontent {
    	background:#fff url(borders0.gif) 100% 0 repeat-y;
    	padding:0 7px 0 0;
    }
    .bi {
    	background:#fff url(borders0.gif) 0 0 repeat-y;
    	padding:0 0 0 1px;
    }
    .bi_1 {
    	background:#ffffff url(borders00.gif) 0 0 repeat-y;
    	padding:0 0 0 1px;
    }
    .bb {
    	height:30px;
    	background:url(box00000.gif) 100% 100% no-repeat;
    	margin:0 -7px 0 -1px;
    }
    .bb div {
    	width:18px;
    	height:30px;
    	background:url(box00000.gif) 0 100% no-repeat;
    }
    .portlet h2 {
    	height:20px;
    	background-color:#666;
    	background-image:url(topright.gif);
    	background-position:right top;
    	background-repeat:no-repeat;
    	color:#fff;
    	line-height:20px;
    	font-size:14px;
    	font-family:"Times New Roman", Times, serif;
    	padding:0 0 0 10px;
    }
    .portletcontent p {
    	background:#fff;
    	text-align:center;
    	padding:8px 10px;
    }
    </style>
    </head>
    <body>
    <div id="main_container">
      <div id="header"><img src="images/kapital/bg-top2.jpg" width="766" height="351"></div>
        <div id="hello">
               <div class="portlet" style="width:">
               <h2 style="background-color:#c9cbce;">www.site.ru</h2>
               <div class="portletcontent">
               <div class="bi">
               <p><font class="Z1">ДОБОРО ПОЖАЛОВАТЬ НА САЙТ КОМПАНИИ “ТЫРЫ-ПЫРЫ”</font><br>
               </p>
                <div class="bb"><div></div></div>
                </div>
                </div>
              </div>
              <br>
              <hr/>
        </div>
    	<div id="anons_st">
            <div class="portlet" style="width:445px; float:left; padding:0 20px 0 0">
      <h2 style="background-color:#c9cbce;"></h2>
    <div class="portletcontent">
      <div class="bi_1">
      <img src="images/kapital/tit_1.gif" width="155" height="20"> <br>
      <span class="news_an">content_1</span><br>
    <div class="bb"><div></div></div>
    </div>
    </div>
    </div>
       	  <div class="portlet" style="width:281px; float:left; padding:0 20px 0 0">
            <h2 style="background-color:#c9cbce;"></h2>
            <div class="portletcontent"><div class="bi_1">
              <img src="images/kapital/tit_2.gif" width="155" height="20"> <br>
      <span class="news_an">content_2</span><br><br><br><br>
      <img src="images/kapital/tit_3.gif" width="155" height="20"> <br>
      <span class="news_an">content_3</span>
      <br><br><br><br>
      <img src="images/kapital/tit_4.gif" width="155" height="20"> <br>
      <span class="news_an">content_4</span><br>
            <div class="bb"><div></div></div>
            </div>
            </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    
     
  5. ELiyahu

    ELiyahu Читатель

    Регистр.:
    14 июл 2008
    Сообщения:
    5
    Симпатии:
    1
    тоже сталкивался с этим)
    сначала всё помогала решить установка <center></center>))
    ну а средствами CSS для ИЕ это удалось решить след.образом:
    HTML:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>---Титул---</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    A IMG {
    	border:none;
    }
    body {
    	background:url(bg-top.gif) top  repeat-x;
    	font-family:Tahoma;
    	color:#000;
    	margin:0;
        padding:0;
    	position:
    }
    #main_container {
    	width:766px;
    	height:auto;
    	margin:0 auto;
    	padding:0;
    }
    #header {
    	width:766px;
    	height:351px;
    	padding:0;
    }
    #hello {
    	width:766px;
    	height:199px;
    }
    hr {
    	border:0;
    	width:700px;
    	background-color:#c9cbce;
    	color:#c9cbce;
    	height:1px;
    	clear:both;
    	text-align:center;
    	margin:5px 0;
    }
    .Z1, .Z2 {
    	color:#4A4A4A;
    	font:bold 14px Tahoma;
    }
    .news_an {
    	text-align: left;
    	padding:0 0 0 15px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:12px;
    	color:#4A4A4A;
    }
    .portletcontent {
    	background:#fff url(borders0.gif) 100% 0 repeat-y;
    	padding:0 7px 0 0;
    }
    .bi {
    	background:#fff url(borders0.gif) 0 0 repeat-y;
    	padding:0 0 0 1px;
    }
    .bi_1 {
    	background:#ffffff url(borders00.gif) 0 0 repeat-y;
    	padding:0 0 0 1px;
    }
    .bb {
    	height:30px;
    	background:url(box00000.gif) 100% 100% no-repeat;
    	margin:0 -7px 0 -1px;
    }
    .bb div {
    	width:18px;
    	height:30px;
    	background:url(box00000.gif) 0 100% no-repeat;
    }
    .portlet h2 {
    	height:20px;
    	background-color:#666;
    	background-image:url(topright.gif);
    	background-position:right top;
    	background-repeat:no-repeat;
    	color:#fff;
    	line-height:20px;
    	font-size:14px;
    	font-family:"Times New Roman", Times, serif;
    	padding:0 0 0 10px;
    }
    .portletcontent p {
    	background:#fff;
    	text-align:center;
    	padding:8px 10px;
    }
    #v_center
    {
    position: relative;
    width: 100%;
    }
    #v_centerleft
    {
    right: 50%;
    position: relative;
    float: right;
    }
    #v_centerright
    {
    right: -50%;
    position: relative;
    z-index: 1;
    }
    </style>
    </head>
    <body>
    <div id="v_center">
        <div id="v_centerleft">
            <div id="v_centerright">
              <div id="main_container">
      <div id="header"><img src="images/kapital/bg-top2.jpg" width="766" height="351"></div>
        <div id="hello">
               <div class="portlet" style="width:">
               <h2 style="background-color:#c9cbce;">www.site.ru</h2>
               <div class="portletcontent">
               <div class="bi">
               <p><font class="Z1">ДОБОРО ПОЖАЛОВАТЬ НА САЙТ КОМПАНИИ “ТЫРЫ-ПЫРЫ”</font><br>
               </p>
                <div class="bb"><div></div></div>
                </div>
                </div>
              </div>
              <br>
              <hr/>
        </div>
    	<div id="anons_st">
            <div class="portlet" style="width:445px; float:left; padding:0 20px 0 0">
      <h2 style="background-color:#c9cbce;"></h2>
    <div class="portletcontent">
      <div class="bi_1">
      <img src="images/kapital/tit_1.gif" width="155" height="20"> <br>
      <span class="news_an">content_1</span><br>
    <div class="bb"><div></div></div>
    </div>
    </div>
    </div>
       	  <div class="portlet" style="width:281px; float:left; padding:0 20px 0 0">
            <h2 style="background-color:#c9cbce;"></h2>
            <div class="portletcontent"><div class="bi_1">
              <img src="images/kapital/tit_2.gif" width="155" height="20"> <br>
      <span class="news_an">content_2</span><br><br><br><br>
      <img src="images/kapital/tit_3.gif" width="155" height="20"> <br>
      <span class="news_an">content_3</span>
      <br><br><br><br>
      <img src="images/kapital/tit_4.gif" width="155" height="20"> <br>
      <span class="news_an">content_4</span><br>
            <div class="bb"><div></div></div>
            </div>
            </div>
            </div>
        </div>
    </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    и правда работает!))
    что там изменилось:
    1) добавлены ещё 3 див-а
    Код:
    <div id="v_center">
        <div id="v_centerleft">
            <div id="v_centerright">
    ...сюда те блоки, что надо выравнять...
    </div></div></div>
    2) и соответственно свойства каждого прописать в CSS:
    Код:
    #v_center
    {
    position: relative;
    width: 100%;
    }
    #v_centerleft
    {
    right: 50%;
    position: relative;
    float: right;
    }
    #v_centerright
    {
    right: -50%;
    position: relative;
    z-index: 1;
    }
    IE поддаётся)
     
    command26 нравится это.
  6. command26

    command26 Постоялец

    Регистр.:
    1 ноя 2008
    Сообщения:
    108
    Симпатии:
    6
    Спасибо! Вроде все выровнилось. Вопрос в следующем. Беру два кода. Сравниваю. Все тоже самое. Одни выводит так как нужно. Другой - с таким косяком. Может такой трабл в 8-ой IE версии??? Первый код я писал еще до выхода 8-ки.
     
  7. 01ssv

    01ssv Постоялец

    Регистр.:
    29 янв 2008
    Сообщения:
    65
    Симпатии:
    5
    Для выравнивания таблицы фиксированной ширины в контейнере произвольного размера существенным фактором является доктайп, без доктайпа достаточно прописать в контейнер и в саму таблицу style="text-align:center" и align="center" - сработает везде при прописанном доктупе "lose" в саму таблицу надо прописать style="margin:auto"
     
  8. Toha20072008

    Toha20072008

    Заблокирован
    Регистр.:
    17 фев 2008
    Сообщения:
    316
    Симпатии:
    50
    А не проще ли написать <center></center> :D?
    Или это уже моветон?
     
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    <center></center> - это, на сколько мне известно, уже не валидно.
    Правильнее будет написать <div align="center"></div>.
     
  10. Finnn

    Finnn Читатель

    Заблокирован
    Регистр.:
    16 окт 2009
    Сообщения:
    10
    Симпатии:
    1
    Не забывайте перед началом вёрстки сбрасывать стили, иначе могут вылезать артефакты. Сбросить стили можно так:

     
Статус темы:
Закрыта.