Опустить кнопку и текст в ячейку таблицы

@inquisitor · Регистрация: 22.12.2015

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

realsite.rar
Она оранжевого цвета в верхнем правом углу.Ее нужно опустить на шапку шайта.Делал верстку блочно табличным методом и у меня где то она таблица поместилась в другую.А вот где.

еще меню над шапкой там где синим Home после него вправо еще 7 пунктов есть.Только они доступны при наведении мыши.А это неправильно.

@inquisitor · 22.09.2017, 19:57 **[ТС]**

Опустить кнопку и текст в ячейку таблицы

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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html >
<head>
    <title> Верстка реального сайта </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" href="styles/styles.css"/>
   <!-- a persistent style sheet -->
 
<!--[if ite IE 7]>
<link rel="stylesheet" href="ie6ie7.css"/>
<![endif]-->
</head>
    <body>
    
        <div id = "logo">
            <table>
                <tr>
                    <td>
                        <img src="images/logo.jpg"   alt="Логотип"/>
                    </td>
                    
                    <td class ="right" >
                        <p class ="gray">For Addition Information,Contact Us!  </p> 
                        <p class ="green">info@memostra.com </p>    
                    </td>
                
                </tr>
            </table>
        </div>
        
            <div  id = "topmenu">
                <ul>
                    <li class ="active" >
                        <a href ="#">
                            <span> Home</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> About</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> Clothing</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> Soes</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span>Electronics</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span>Pefumes</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                        <span>Contact Us</span>
                        </a>
                       </li>
                </ul>
            </div>
                
                
                
                
                    <div   id = "contacs">
                        <a href ="#">
                            <img src="images/facebook.jpg"   alt="facebook"/>
                        </a>
                        
                        <a href ="#">
                            <img src="images/email.jpg"   alt="email"/>
                        </a>
                    </div>
                
                
                <div class ="clear">
                </div>  
            
            
            <div class ="header">
                    <img src="images/header.jpg"   alt="Шапка сайта"/>
                    <div id ="content_header">
                        <h1>Welcome to Mostra!</h1>
                        <h3>Qualitu Products -Freat prices!</h3>
                        <p>
                                <a href ="#">
                                    <span>Check it out!</span>
                                </a>
                        </p>
                    </div>
            </div>  
        
    <div id ="menu">    
    <table>
    <tr>
    <td>
    <table>
        
                    
        <tr>
                <td class ="active">
                    <a href ="#">
                    <span>All categories</span>
                    </a>
                </td>
                
                <td>
                    <a href ="#">
                    <span>Men</span>
                    </a>
                </td>
                
                <td>
                    <a href ="#">
                    <span>Women</span>
                    </a>
                </td>
        </tr>
    </table>
    </td>   
            
             <td class="right">
                    <div id ="search">
                        <form name="searchform" action="#" method="post">
                            <table>
                                <tr>
                                    <td>
                                        <div>
                                            <input type="text" name="words" value="Brouse products"/>
                                        </div>
                                    </td>
                                
                                    <td>
                                        <input type="image" src="images/search.jpg" alt="button search"/>
                                    </td>
                               </tr>
                            </table>
                        </form>
                    </div>
            </td>
    </td>
    </tr>    
    </table>
    <div class="separator">
    </div>
        
</body>
</html>

@inquisitor · 22.09.2017, 19:58 **[ТС]**

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
body{
    font-family:Arial,'Times New Roman',sans-serif;
    font-size:12pt;
    margin:0;
    padding:20px,40px,20px,41px;
}
.clear{
    clear:both;
}
#logo table{
    width:100%;
}
 
.right{
    text-align:right;
}
#logo p{
    margin:0;
    font-style:italic;
}
.gray{
    color:#afaeae;
}
.green{
    color:#91aa77;
    font-weight:bold;
}
#topmenu{
    background-color:#538bc5;
    margin-top:20px;
}
#topmenu ul{
    margin:0;
    padding:0;
}
#topmenu ul li{
    float:left;
    list-style:none;
}
#topmenu ul li a{
 color:#fff;
 font-size:120%;
 display:block;
 padding:10px 20px;
 text-decoration:none;
}
 
#topmenu ul li.active a, #topmenu ul li a:hover{
    background-color:#375c84;
    
}
#contacs{
    float:right;
    margin:10px 10px 0 0;
}
#contacs a{
      text-decoration:none;
}
#header{
    margin-top:15px;
}
#header img{
    width:100%;
}
#content_header{
    float:right;
    text-align:right;
    position:relative;
    top:-150px;
    right:20px;
}
#content_header h1,#content_header h3{
     margin:0;
}
#content_header h1{
    color:#688fb1;
    font-size:210%;
}
#content_header h3{
    color:#91a9bd;
    font-size:100%;
}
#content_header p{
    margin-top:30px;
}
#content_header a{
    background-color:#d8812e;
    color:#fff;
    padding:10px 20px;
    text-decoration:none;
}
#menu{
    margin-top:15px;
}
#menu.right{
    text-align:right;
}
 #menu table{
     width:100%;
 
 }
  #menu table table{
     width:auto;
     
 }
#menu td a{
    background-color:#ececec;
    color:#a0a0a0a0;
    display:block;
    font-weight:bold;
    padding:10px 20px;
    text-decoration:none;
}
 
#menu td.active a,#menu td a:hover{
        background-color:#e2ecf4;
        color:#3b638f;
}
 
 
#search div{
        border:1px solid #aec697;
        margin-top:-4px;
}
#search div input{
    border:3px solid #cbddbb;
    color:#ececec;
    height:25px;
    width:200px;
    padding-left:5px;
}
#search {
    float:right;
}
.separator{
    border-top:1px dashed #b6c6dd;
    height:1px;
    width:100%;
    margin-top:15px;
}

@mrtoxas · 22.09.2017, 20:01

Вы же сами все это подняли.

CSS
1
2
3
4
5
6
#content_header {
    /* ... */
    position: relative;
    top: -150px;
    /* ... */
}

И исправьте ошибки в разметке - https://validator.w3.org/

@inquisitor · 22.09.2017, 20:52 **[ТС]**

Error: Stray end tag td.
From line 155, column 18; to line 156, column 9
</td>↩ </td>↩ <

Error: End tag for body seen, but there were unclosed elements.
From line 162, column 1; to line 162, column 7
↩ ↩</body>↩</htm

Error: Unclosed element div.
From line 108, column 5; to line 108, column 20
↩ <div id ="menu"> ↩

я с таблицами все напутал потому валидатор и ругаеться.

Добавлено через 4 минуты
справил ошибки валидатора

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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html >
<head>
    <title> Верстка реального сайта </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" href="styles/styles.css"/>
   <!-- a persistent style sheet -->
 
<!--[if ite IE 7]>
<link rel="stylesheet" href="ie6ie7.css"/>
<![endif]-->
</head>
    <body>
    
        <div id = "logo">
            <table>
                <tr>
                    <td>
                        <img src="images/logo.jpg"   alt="Логотип"/>
                    </td>
                    
                    <td class ="right" >
                        <p class ="gray">For Addition Information,Contact Us!  </p> 
                        <p class ="green">info@memostra.com </p>    
                    </td>
                
                </tr>
            </table>
        </div>
        
            <div  id = "topmenu">
                <ul>
                    <li class ="active" >
                        <a href ="#">
                            <span> Home</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> About</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> Clothing</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span> Soes</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span>Electronics</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                            <span>Pefumes</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href ="#">
                        <span>Contact Us</span>
                        </a>
                       </li>
                </ul>
            </div>
                
                
                
                
                    <div   id = "contacs">
                        <a href ="#">
                            <img src="images/facebook.jpg"   alt="facebook"/>
                        </a>
                        
                        <a href ="#">
                            <img src="images/email.jpg"   alt="email"/>
                        </a>
                    </div>
                
                
                <div class ="clear">
                </div>  
            
            
            <div class ="header">
                    <img src="images/header.jpg"   alt="Шапка сайта"/>
                    <div id ="content_header">
                        <h1>Welcome to Mostra!</h1>
                        <h3>Qualitu Products -Freat prices!</h3>
                        <p>
                                <a href ="#">
                                    <span>Check it out!</span>
                                </a>
                        </p>
                    </div>
            </div>  
        
    <div id ="menu">    
         <table>
              <tr>
                 <td>
                    <table> 
                     <tr>         
                         <td class ="active">
                             <a href ="#">
                             <span>All categories</span>
                             </a>
                         </td>
                
                          <td>
                             <a href ="#">
                             <span>Men</span>
                             </a>
                          </td>
                
                           <td>
                                <a href ="#">
                                <span>Women</span>
                                </a>
                          </td>
                    </tr>
                    </table>
                </td>
            
             <td class="right">
                    <div id ="search">
                        <form name="searchform" action="#" method="post">
                            <table>
                                <tr>
                                    <td>
                                        <div>
                                            <input type="text" name="words" value="Brouse products"/>
                                        </div>
                                    </td>
                                
                                    <td>
                                        <input type="image" src="images/search.jpg" alt="button search"/>
                                    </td>
                               </tr>
                            </table>
                        </form>
                    </div>
            </td>
       </tr>     
    </table>
    </div>
    
    
    
    <div class="separator">
    </div>
        
</body>
</html>

Добавлено через 2 минуты

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

Вы же сами все это подняли.

Что посоветуете с этим делать,удалить полность как класс с цсс файла или величину top:-150 px уменшить,поиграться в Firebug /webdevelopere в мазицеле фаервокс?

@mrtoxas · 22.09.2017, 20:55

Уберите top: -150px;

@inquisitor · 22.09.2017, 21:35 **[ТС]**

CSS
1
2
3
4
5
6
#content_header {
    /* ... */
    position: relative;
    top: 30px;//помогло
    /* ... */
}

Теперь осталось меню сделать видимым

Добавлено через 37 минут
Исправил цвет меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#topmenu ul li.active a, #topmenu ul li a:hover{
background-color: #375c84;//Цвет заливки темно синий для первого пункта меню и при наведении на остальные
color:#fff;//белый цвет шрифта  первого пункта меню Home
}
 
 
#topmenu ul li a{
 color: #fff;//белый цвет шрифта остальных пунктов меню при наведении и без него
 font-size:120%;
 display:block;
 padding:10px 20px;
 text-decoration:none;
 background-color:#538bc5; //заливка ближе к голубой
}

@inquisitor · 22.09.2017, 21:52 **[ТС]**

Осталось еще две задачи

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	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 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097

	Опустить кнопку и текст в ячейку таблицы 22.09.2017, 19:52. Показов 2025. Ответов 7 Метки нет (Все метки) realsite.rar Она оранжевого цвета в верхнем правом углу.Ее нужно опустить на шапку шайта.Делал верстку блочно табличным методом и у меня где то она таблица поместилась в другую.А вот где. еще меню над шапкой там где синим Home после него вправо еще 7 пунктов есть.Только они доступны при наведении мыши.А это неправильно. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	22.09.2017, 20:55
	Уберите `top: -150px;` 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	22.09.2017, 21:52 [ТС]
	Осталось еще две задачи 0

Опции темы