Правила форума Гаранты форума
Размещение рекламы AMX-X компилятор

Здравствуйте, гость Вход | Регистрация

Наши новости:

14-дек
24-апр
10-апр
11-апр

Таблица

Статус пользователя DumoH4uk
сообщение 17.8.2014, 17:21
Сообщение #1


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Здравствуйте! thank_you2.gif

Помогите доделать оформление таблицы. Я туплю pardon.gif

img
Прикрепленное изображение


Не получается сделать рамку вокруг рамок (text 1, text 2) с такими свойствами:
Код
border: 8px solid #ecf1f7;

И убрать промежуток между рамками text 1 и text 2.

Html
Код
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="testetest.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <table>
        <th>Shapka
        <tr><td>Text 1
        <tr><td>Text 2
    </table>
</html>


CSS
Код
table {
    width: 100%;
    text-align: left;
}

td {
    padding: 5px;
    border: 4px solid #dce7ee;
    font: normal 12px tahoma,helvetica,arial,sans-serif;
    font-weight: bold;
    color: #225985;
}

th {
    background: #142638;
    padding: 9px;
    font-size: 12px;
    font-weight: 300;
    color: white;
    border-color: #142638;
}


Для motd.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   Цитировать сообщение
Статус пользователя miRror
сообщение 17.8.2014, 17:28
Сообщение #2


Стаж: 15 лет

Сообщений: 1151
Благодарностей: 1002
Полезность: 967

Меценат Меценат

Возможно накладывается, сузь саму рамку (контент внутри)
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя default1k
сообщение 17.8.2014, 17:34
Сообщение #3
Стаж: 12 лет

Сообщений: 718
Благодарностей: 180
Полезность: 153

А черная рамка, это то, что нужно сделать?
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя DumoH4uk
сообщение 17.8.2014, 17:35
Сообщение #4


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Цитата(miRror @ 17.8.2014, 19:28) *
Возможно накладывается, сузь саму рамку (контент внутри)


А куда это вставить? psych.gif border: 8px solid #ecf1f7;
(Черным я обвел в paint для наглядности)

Вставляю в td увеличивается размер рамки, th обводит шапку, table обводит рамки вместе с шапкой
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя default1k
сообщение 17.8.2014, 17:50
Сообщение #5
Стаж: 12 лет

Сообщений: 718
Благодарностей: 180
Полезность: 153

Проверяй ;)

<html>
<head>
<link rel="stylesheet" type="text/css" href="testetest.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
width: 100%;
text-align: left;
border: 8px solid #ecf1f7;

}

td {
padding: 5px;
border: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;

}

.th {
background: #142638;
padding: 9px;
font-size: 12px;
font-weight: 300;
color: white;
border-color: #142638;

}

</style>
</head>
<div class="th">Shapka</div>
<table>
<div class="tbody">
<tr><td>Text 1</td></tr>
<tr><td>Text 2</td></tr>
</div>
</table>
</html>


Отредактировал: default1k, - 17.8.2014, 17:50
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 1 раз
   + Цитировать сообщение
Статус пользователя DumoH4uk
сообщение 17.8.2014, 17:53
Сообщение #6


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Цитата(default1k @ 17.8.2014, 19:50) *
Проверяй ;)

<html>
<head>
<link rel="stylesheet" type="text/css" href="testetest.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
width: 100%;
text-align: left;
border: 8px solid #ecf1f7;

}

td {
padding: 5px;
border: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;

}

.th {
background: #142638;
padding: 9px;
font-size: 12px;
font-weight: 300;
color: white;
border-color: #142638;

}

</style>
</head>
<div class="th">Shapka</div>
<table>
<div class="tbody">
<tr><td>Text 1</td></tr>
<tr><td>Text 2</td></tr>
</div>
</table>
</html>


Скрытый текст
Прикрепленное изображение


Спасибо, но есть промежутки между рамками
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя default1k
сообщение 17.8.2014, 17:55
Сообщение #7
Стаж: 12 лет

Сообщений: 718
Благодарностей: 180
Полезность: 153

DumoH4uk,
Код
border-collapse: collapse;
добавь в table { }
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя DumoH4uk
сообщение 17.8.2014, 18:00
Сообщение #8


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Цитата(default1k @ 17.8.2014, 19:55) *
DumoH4uk,
Код
border-collapse: collapse;
добавь в table { }


Промежутков нет, но и рамок по бокам нет (от text 1 и text 2) psych.gif Только между text 1 и text 2
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя default1k
сообщение 17.8.2014, 18:09
Сообщение #9
Стаж: 12 лет

Сообщений: 718
Благодарностей: 180
Полезность: 153

DumoH4uk,
Так?

<html>
<head>
<link rel="stylesheet" type="text/css" href="testetest.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
width: 100%;
text-align: left;
border-collapse: collapse;
}

td {
padding: 5px;
border-left: 8px solid #ecf1f7;
border-right: 8px solid #ecf1f7;
border-top: 4px solid #dce7ee;
border-bottom: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;


}

.th {
background: #142638;
padding: 9px;
font-size: 12px;
font-weight: 300;
color: white;
border-color: #142638;
}

</style>
</head>
<div class="th">Shapka</div>
<table>
<div class="tbody">
<tr><td>Text 1</td></tr>
<tr><td>Text 2</td></tr>
</div>
</table>
</html>
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя DumoH4uk
сообщение 17.8.2014, 18:21
Сообщение #10


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Цитата(default1k @ 17.8.2014, 20:09) *
DumoH4uk,
Так?

<html>
<head>
<link rel="stylesheet" type="text/css" href="testetest.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
width: 100%;
text-align: left;
border-collapse: collapse;
}

td {
padding: 5px;
border-left: 8px solid #ecf1f7;
border-right: 8px solid #ecf1f7;
border-top: 4px solid #dce7ee;
border-bottom: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;


}

.th {
background: #142638;
padding: 9px;
font-size: 12px;
font-weight: 300;
color: white;
border-color: #142638;
}

</style>
</head>
<div class="th">Shapka</div>
<table>
<div class="tbody">
<tr><td>Text 1</td></tr>
<tr><td>Text 2</td></tr>
</div>
</table>
</html>



То что сейчас
Прикрепленное изображение


Как должно быть
Прикрепленное изображение


(как должно быть) все делал методом тыка в итоге шапка в motd отваливается (промежуток между шапкой и text) поэтому решил через table сделать. Если можно исправить отваливание шапки =D то вот:

CSS
Код
body {
    width: 98%;
}

.maintitle {
    background: #142638;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 300;
    color: white;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-width: 1px 1px 0 1px;
    border-color: #142638;
    border-style: solid;
    text-shadow: black 0px 1px 2px;
}

#container_table {
    border: 8px solid #ecf1f7;
    margin-top: -10px;
}

#container_main {
    padding: 5px;
    margin: -3px;
    border: 4px solid #dce7ee;
    font: normal 12px tahoma,helvetica,arial,sans-serif;
    font-weight: bold;
    color: #225985;
}


HTML
Код
<link rel="stylesheet" type="text/css" href="online.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <h2 class='maintitle'>
        Shapka
    </h2>
    <div id='container_table'>
            <div id='container_main'>Text 1</div>
            <div id='container_main'>Text 2</div>
<div>


Шапка отходит только на non-steam (может margin-top: -10px; заменить на что-то подобное, что поддерживает IE в cs? (я не знаю что =D))
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя default1k
сообщение 17.8.2014, 18:35
Сообщение #11
Стаж: 12 лет

Сообщений: 718
Благодарностей: 180
Полезность: 153

DumoH4uk,
А так отваливается?

body {
width: 98%;
}

.maintitle {
background: #142638;
padding: 9px 12px;
font-size: 12px;
font-weight: 300;
color: white;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-width: 1px 1px 0 1px;
border-color: #142638;
border-style: solid;
text-shadow: black 0px 1px 2px;
margin-bottom: 0;
}

#container_table {
border: 8px solid #ecf1f7;
margin-top: 0px;
}

#container_main {
padding: 5px;
margin: -3px;
border: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;
}
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 1 раз
   + Цитировать сообщение
Статус пользователя DumoH4uk
сообщение 17.8.2014, 18:52
Сообщение #12


Стаж: 14 лет

Сообщений: 188
Благодарностей: 81
Полезность: 122

Цитата(default1k @ 17.8.2014, 20:35) *
DumoH4uk,
А так отваливается?

body {
width: 98%;
}

.maintitle {
background: #142638;
padding: 9px 12px;
font-size: 12px;
font-weight: 300;
color: white;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-width: 1px 1px 0 1px;
border-color: #142638;
border-style: solid;
text-shadow: black 0px 1px 2px;
margin-bottom: 0;
}

#container_table {
border: 8px solid #ecf1f7;
margin-top: 0px;
}

#container_main {
padding: 5px;
margin: -3px;
border: 4px solid #dce7ee;
font: normal 12px tahoma,helvetica,arial,sans-serif;
font-weight: bold;
color: #225985;
}


В браузере - нет. В cs проверю чуть позже.

party.gif все отлично. Спасибо!

Отредактировал: DumoH4uk, - 17.8.2014, 19:48
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
  Ответить в данную темуНачать новую тему
 
0 пользователей и 1 гостей читают эту тему: