Сместить таблицу вниз

@DEA7H · Регистрация: 05.10.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Есть HTML:

HTML5

<!--Шапка сайта.-->
<div class="header">
    <div class="logostyle"><img src="images/newlogo.png" width="430" height="150" /></div>
    <div class="divfortable">
        <table class="tableparams">
        <tr>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
        </tr>
        <tr>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
            <td>
                TEST 1
            </td>
        </tr>
        </table>
    </div>
</div>
<!--END Шапка сайта.-->

Есть к нему CSS:

CSS

body 
{
    font: 11pt Arial, Helvetica, sans-serif;
    margin:0px;
}
 
/*Настройки контейнеров DIV:*/
/*Шапка сайта:*/
.header
{
    background-image:url(../images/header.png);
    background-repeat:repeat-x;
    height:150px;
    border-radius:0px 6px 6px 0px;
        -webkit-border-radius:0px 6px 6px 0px;
        -moz-border-radius:0px 5px 5px 0px;
        -khtml-border-radius:0px 10px 10px 0px;
}
 
 
.logostyle
{
    float:left;
}
 
.divfortable
{
    width:100%;
    height:145px;
}
 
.divfortable table {
    margin: 0 auto;
}
 
.tableparams
{
    border:1px solid #333;
}

Как мне сместить таблицу на 50 пикселей ВНИЗ например?
Если написать так...

CSS

.tableparams
{
    border:1px solid #333;
    margin-top:50px;
}

... то вообще ничего не происходит.
Не пойму что я делаю не так.

Заранее благодарен.

@newJS · 06.10.2012, 21:11

это лишнее, дубль

CSS

1
2
3

.divfortable table {
    margin: 0 auto;
}

а тут так

CSS

.tableparams
{
    border:1px solid #333;
    margin:50px auto 0 auto;
}

все работает

@DEA7H · 06.10.2012, 21:32 **[ТС]**

Прописал:

CSS

.tableparams
{
    border:1px solid #333;
    margin:50px auto 0 auto;
}

Пошла вниз не таблица а вся шапка:

Как исправить?

@EPMAK · 06.10.2012, 21:44

Можно абсолютно спозиционировать табличку так:

CSS

.tableparams
{
    border:1px solid #333;
    position: absolute;
    top: 20px; /*отступ сверху*/
    left: 400px;
}

или флоатами попробовать поиграть:

CSS

.tableparams
{
    border:1px solid #333;
    float: left;
    margin: 50px auto 0px 30%;
}

@Taatshi · 06.10.2012, 21:53

не маргином - паддингом двигайте. Маргин сотрите

CSS

1	.divfortable {padding: 50px 0 0;}

@DEA7H · 07.10.2012, 01:00 **[ТС]**

Спасибо, то что нужно:

Сообщение от EPMAK

CSS

.tableparams
{ 
      border:1px solid #333; 
      float: left; 
      margin: 50px auto 0px 30%; 
}

Добавлено через 2 часа 34 минуты
Еще меленькая поправочка.
В этом варианте...

CSS

.tableparams
{ 
      border:1px solid #333; 
      float: left; 
      margin: 50px auto 0px 30%; 
}

...позиция по оси Х высчитывается +30% от левого края.
А мне нужно чтобы по центу, в не зависимости от ширины ДИВА, тоесть так:

CSS

1
2
3

.tableconfig table {
    margin: 0 auto;
}

Так как сделать чтобы работало и так и так...

@EPMAK · 07.10.2012, 02:24

Сообщение от DEA7H

Так как сделать чтобы работало и так и так...

можно и так:

CSS

body 
{
    font: 11pt Arial, Helvetica, sans-serif;
    margin:0px; padding:0px;
}
 
/*Настройки контейнеров DIV:*/
/*Шапка сайта:*/
.header
{
    background-image:url(../images/header.png);
    background-repeat:repeat-x;
    height:150px;
    border-radius:0px 6px 6px 0px;
        -webkit-border-radius:0px 6px 6px 0px;
        -moz-border-radius:0px 5px 5px 0px;
        -khtml-border-radius:0px 10px 10px 0px;
        position: relative;
}
 
 
.logostyle
{
    position: absolute; top:0; left:0;
}
 
.divfortable
{
    width:100%;
    height:145px;
    background-color: pink;
}
 
.divfortable table {
    border: 1px solid blue;
}
 
.tableparams
{
    border:1px solid #333;
    position: relative;
    margin: 0px auto;
    top: 50px; /*регулируем отступ таблички относительно .divfortable*/
}

@DEA7H · 07.10.2012, 11:01 **[ТС]**

Сообщение от EPMAK

можно и так:

Спасибо. То что нужно.

@DEA7H .NET ONLY 71 / 71 / 7 Регистрация: 05.10.2011 Сообщений: 495
	07.10.2012, 11:01 [ТС]	8
	Сообщение от EPMAK можно и так: Спасибо. То что нужно. 1