Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.53/34: Рейтинг темы: голосов - 34, средняя оценка - 4.53
39 / 27 / 12
Регистрация: 31.12.2013
Сообщений: 329

Поднять контейнер вверх

21.11.2014, 18:00. Показов 6415. Ответов 3
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Хочу поднять контейнер <textarea> к вверху, то есть рядом с <table>
Приложу скрин и стили, которые используются.
Messages.css:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

body 
{
    background: #fff;
    color: #000;
    margin: 0px;
    padding: 0px;
    direction: ltr;
    font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
    font-size: 11px;
    line-height: 1.182;
    font-weight: normal;
    -webkit-font-smoothing: subpixel-antialiased;
}
a 
{
        color: #0088cc;
        text-decoration: none;
}
.right
 {
    position: absolute;
        top: 0px;
        right: 0px;
        width: 100px;
    padding: 10px;
}
#footer 
{
    height: 30px;
    background:  #d9d9d9;
    background-size: 10%;
    position: absolute;
    width: 100%;
}
textarea
{
    background: #FFF;
    color: #000;
    border: 1px solid #C3CBD4;
    padding: 3px;
    margin: 0px;
    resize:vertical;
    max-height: 300px;
}
.button 
{
    display: inline-block;
    padding: 10px 18px;
    margin-right: 15px;
    margin-bottom: 5px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); 
    -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); 
    box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: none !important;
    overflow: visible;
}
.button:hover, .button:focus 
{
    text-decoration:none;
}
.button-green 
{
    color: #fff;
    background: #a5bd24; /* Old browsers */
    background: -moz-linear-gradient(top, #a5bd24 0%, #7dac38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5bd24), color-stop(100%,#7dac38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a5bd24 0%,#7dac38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a5bd24 0%,#7dac38 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #a5bd24 0%,#7dac38 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #a5bd24 0%,#7dac38 100%); /* W3C */
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    border: 1px solid #781;
}
.button-green:hover,
.button-green:focus 
{
    color: #fff;
    background: #5c8825; /* Old browsers */
    background: -moz-linear-gradient(top, #8fbb44 0%, #5c8825 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fbb44), color-stop(100%,#5c8825)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8fbb44 0%,#5c8825 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8fbb44 0%,#5c8825 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #8fbb44 0%,#5c8825 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fbb44', endColorstr='#5c8825',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #8fbb44 0%,#5c8825 100%); /* W3C */
    border: 1px solid #670;
}
.button-blue 
{
    color: #fff;
    background: #39aad4; /* Old browsers */
    background: -moz-linear-gradient(top, #41c4f4 0%, #39aad4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41c4f4), color-stop(100%,#39aad4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #41c4f4 0%,#39aad4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #41c4f4 0%,#39aad4 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #41c4f4 0%,#39aad4 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41c4f4', endColorstr='#39aad4',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #41c4f4 0%,#3a8fb6 100%); /* W3C */
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    border: 1px solid #3a8fb6;
}
.button-blue:hover,
.button-blue:focus 
{
    color: #fff;
    background: #0189bc; /* Old browsers */
    background: -moz-linear-gradient(top, #14bcfb 0%, #0189bc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#14bcfb), color-stop(100%,#0189bc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #14bcfb 0%,#0189bc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #14bcfb 0%,#0189bc 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #14bcfb 0%,#0189bc 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14bcfb', endColorstr='#0189bc',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #14bcfb 0%,#0189bc 100%); /* W3C */
    border: 1px solid #0370A2;
}
table.css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline:0;
#vertical-align:top;
background:transparent;
}
 
:focus {
outline:0;
}
ol, ul {
list-style:none;
}
 
table 
{
    border-collapse:collapse;
    border-spacing:0;
}
caption, th, td 
{
    font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after 
{
    content:"";
}
blockquote, q {
    quotes:"" "";
}
 
.simple-little-table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin:20px;
    border:#ccc 1px solid;
    border-collapse:separate;
 
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border-radius:0px;
 
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
 
.simple-little-table th {
    font-weight:bold;
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
 
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.simple-little-table th:first-child{
    text-align: left;
    padding-left:20px;
}
.simple-little-table tr:first-child th:first-child{
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
.simple-little-table tr:first-child th:last-child{
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
.simple-little-table tr{
    text-align: center;
    padding-left:20px;
}
.simple-little-table tr td:first-child{
    text-align: center;
    padding-left:20px;
    border-left: 0;
}
.simple-little-table tr td {
    padding:20px;
    border-top: 5px solid #ffffff;
    border-bottom:0px solid #e0e0e0;
    border-left: 10px solid #e0e0e0;
    
    #background: #fafafa;
    #background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    #background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.simple-little-table tr:nth-child(even) td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.simple-little-table tr:last-child td{
    border-bottom:auto;
}
.simple-little-table tr:last-child td:first-child{
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.simple-little-table tr:last-child td:last-child{
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}
.simple-little-table tr:hover td{
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);  
}
 
.simple-little-table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
.simple-little-table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
.simple-little-table a:active,
.simple-little-table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
Заранее Спасибо
Миниатюры
Поднять контейнер вверх  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 21.11.2014, 18:00
Ответы с готовыми решениями:

Поднять textarea вверх
Добрый день. Помогите поднять textarea вверх, чтоб все поля были на одном уровне. Чтоб как на скриншоте было &lt;form...

Поднять картинку вверх
Нужно собрать макет сайта . Я вот начала делать и возникла проблема. Надо сделать так,чтобы картинки можно было как угодно ставить,...

Как поднять изображение вверх?
Добрый день! Подскажите пожалуйста, Как поднять изображение вверх чтобы изображение было наравне с текстом? скринщот прилагаю Это в...

3
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
21.11.2014, 18:05
Esecman, если надо что-то подвинуть обычно выкладывают html того блока, который нужно подвинуть и его стили... Обычно, чтобы что-то куда - то подвинуть очень помогает float:left попробуйте может Ваш вариант... Ну а так html в студию...
0
39 / 27 / 12
Регистрация: 31.12.2013
Сообщений: 329
21.11.2014, 18:14  [ТС]
Fedor92,
Код таблицы.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table class="simple-little-table" cellspacing='0' >
        <tr>
            <th><center>Главная</center></th>
        </tr>
        <tr>
            <td>Моя страница</td>
        </tr>
        <tr>
            <td>Мои друзья</td>
        </tr>
        <tr>
            <td>Мои сообщения</td>
        </tr>
        <tr>
            <td>Моя музыка</td>
        </tr>
            <tr>
            <td>Мои настройки</td>
        </tr>
        <tr>
            <td>Выход</td>
        </tr>
    </table>
Поменял местами <textarea> и <table>, получил так:
http://rghost.ru/59185912.view
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
21.11.2014, 20:24
Внимательно посмотрите код... Волшебный float:left... Оставил самый минимум для наглядности... А вообще для всех объектов на странице надо указывать ширину и высоту(совет на будущее )... Пилите...

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="lab7_2.css"/>
</head>
<body>
<style>
.simple-little-table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin:20px;
    border:5px solid red;
    border-collapse:separate;
 
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border-radius:0px;
 
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
 
</style>
<table class="simple-little-table" cellspacing='0'  style="float:left;">
        <tr>
            <th><center>Главная</center></th>
        </tr>
        <tr>
            <td>Моя страница</td>
        </tr>
        <tr>
            <td>Мои друзья</td>
        </tr>
        <tr>
            <td>Мои сообщения</td>
        </tr>
        <tr>
            <td>Моя музыка</td>
        </tr>
            <tr>
            <td>Мои настройки</td>
        </tr>
        <tr>
            <td>Выход</td>
        </tr>
    </table>
<div style="float:left; width:700px; height:200px; margin-left:40px;  margin-top:20px; border:5px solid"></div>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 21.11.2014, 20:24
Помогаю со студенческими работами здесь

Поднять правый сайдбар в вверх
На сайте две колонки, контент (дерево категорий слево) и правый сайд бар (сейчас там пустое место). Внизу есть два баннера и один блок. Как...

Как поднять текст вверх страницы
Всем хорошего дня. Я новичок и такие вопросы для меня важные, хотя вам могут показаться смешными. К делу: У меня есть код: ...

Как меню мне поднять вверх ?
Скажите а как меню мне поднять вверх ? Вот код страници &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...

Поднять вверх основной блок сайта
Здравствуйте, мне нужно поднять тело сайта Вот так сайт выглядит мне надо поднять все что снизу вверх index.tpl &lt;!DOCTYPE...

Поднять картинку на десять пикселей вверх
Добрый день, подскажите как программно поднять картинку? Допустим на 10 пикселей на верх или сдвинуть на 20 в право.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
 http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru