Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Matvey221
1 / 1 / 0
Регистрация: 18.09.2016
Сообщений: 43
1

Некорректно работает CSS-код

18.09.2016, 19:44. Просмотров 936. Ответов 4
Метки css, html (Все метки)

Здравствуйте, уважаемые программисты и верстальщики! Я учусь верстке сайтов, и у меня возникла трудность. Появился непонятный отступ. Верстка частично табличная(в таблице и проблема), CSS стили подключаю через файл. Прилагаю коды, кто знает, в чем косяк/проблема, откликнитесь! Заранее спасибо!
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>Реальная вёрстка</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
    <div id="logo">
        <table>
            <tr>
                <td>
                    <img src="images/logo.jpg" alt="logo" />
                </td>
                <td class="right">
                    <p class="info">For Additional Information, Contact Us!</p>
                    <p class="post">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>Shoes</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Electronics</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Perfumes</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Contact Us</span>
                </a>
            </li>
        </ul>
        <div id="icon">
            <a href="#">
                <img src="images/mail.jpg" alt="Mail" />
            </a>
            <a href="#">
                <img src="images/facebook.jpg" alt="Facebook" />
            </a>
        </div>
        <div class="clear"></div>
    </div>
    <div id="header">
        <img src="images/header.jpg" alt="header" />
        <div id="header_text">
            <h1>Welcome to Mostra!</h1>
            <h3>Quality Products - Great 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="Browse Products" />
                                        </div>
                                    </td>
                                    <td>
                                        <input type="image" src="images/search.jpg" />
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </td>
            </tr>
        </table>        
    </div>
    <div class="separator"></div>   
</body>
</html>


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
body{
    font-family: Arial, "Times New Roman", sans-serif;
    font-size: 12pt;
    padding-top: 28px;
    padding-right: 44px;
    padding-bottom: 0px;
    padding-left: 43px; 
}
.clear{
    clear: both;
}
#logo table{
    width:100%;
}
.right{
    text-align:right;
}
#logo p{
    margin:0;
    font-style: italic;
}
.info{
    color: #b6b4b4;
 
}
.post{
    color: #87ac75;
    font-weight: bold;
}
#topmenu{
    background-color: #218cc8;
    margin-top: 30px;
}
#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: 16px 22px 17px 21px;
    text-decoration: none;
}
#topmenu ul li.active a, #topmenu ul li a:hover{
    background-color: #125c87;
}
#icon{
    float: right;
    margin: 13px 14px 13px 8px;
}
#icon a{
    text-decoration: none;
}
#header{
    margin-top:20px;
}
#header img{
    width:100%;
}
#header_text{
    float:right;
    text-align: right;
    position: relative;
    top: -150px;
    right:20px;
}
#header_text h1, #header_text h3{
    margin:0;
}
#header_text h1{
    color: #5390b4;
    font-size: 210%;
}
#header_text h3{
    color: #87abbf;
    font-size: 100%;
}
#header_text p{
    margin-top: 30px;
}
#header_text a{
    text-decoration: none;
    background-color: #f28221;
    color: #fff;
    padding: 10px 20px;
}
#menu{
    margin-top: 15px;
}
#menu table {
    text-align: center;
    width: 100%;
}
#menu table table {
    width: auto;
}
#menu .right {
    text-align: right;
}
#menu td a{
    background-color: #ededed;
    color: #a2a1a1;
    display: block;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
}
#menu td.active a, #menu td a:hover{
    background-color: #dfedf5;
    color: #136392;
}
#search {
    float: right;
}
#search div {
    border: 1px solid #a5c796;
    margin-top: -4px;
}
#search div input{
    border: 3px solid #c5debb;
    color: #ededed;
    height: 30px;
    padding-left: 5px;
    width: 230px;
}
.separator{
    border-top: 1px dashed #b1c7de;
    height: 1px;
    margin-top: 20px;
    width: 100%;
}
0
Вложения
Тип файла: rar thirdclass.rar (1.7 Кб, 3 просмотров)
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.09.2016, 19:44
Ответы с готовыми решениями:

Некорректно работает адаптация CSS медиа запросы
Доброго дня! Есть сайт, который изначально разрабатывался без адаптации к экранам мобильных...

Mozilla некорректно отображает выпадающее меню на CSS
Mozilla некорректно отображает выпадающее меню на CSS. При наведении показывается нормально, а...

CSS, не работает ссылка на .css документ через java script
&lt;head&gt; &lt;title&gt;Сайта&lt;/title&gt; &lt;script language=JavaScript&gt; if...

Css не работает - HTML, CSS
Не показывает css-код в комментарии GRID из Html-кода PORTFOLIO В html ввожу картинки, все...

Некорректно работает z-index
Здравствуйте. По каким-то причинам, я не могу выставить красный блок на верхний слой. Хотя в...

4
mrtoxas
Модератор
Эксперт HTML/CSS
2673 / 1976 / 1220
Регистрация: 12.07.2015
Сообщений: 5,294
Записей в блоге: 3
18.09.2016, 22:40 2
Какой именно отступ? У вас там все поехавшее. Вы по каким учебникам учитетесь? Выкидывайте их подальше, вместе с частично табличной версткой.
0
Matvey221
1 / 1 / 0
Регистрация: 18.09.2016
Сообщений: 43
19.09.2016, 16:37  [ТС] 3
Отступ после изображения, меню All Categories, Men , Women должно быть сразу под изображением. К тому же, где я возьму хорошие курсы? У меня нет на них денег... Или в 15 стоит брать кредит на курс за 20-50к? Посоветуйте, пожалуйста хорошие учебники/курсы!
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2888 / 2452 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
19.09.2016, 16:41 4
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

Цитата Сообщение от Matvey221 Посмотреть сообщение
Посоветуйте, пожалуйста хорошие учебники/курсы!
И тут я опять такой из-за угла, опаньки... А по коду mrtoxas уже всё сказал, надо всё срочно разверстать по-человечески блоками и в пятой спецификации HTML, очень уж морально устарел Ваш код, да и его легче переделать, чем латать... А если Вы ещё и учиться пытаетесь, то нужно переверстать обязательно...
1
Matvey221
1 / 1 / 0
Регистрация: 18.09.2016
Сообщений: 43
19.09.2016, 20:56  [ТС] 5
Огромное спасибо, Федор, буду думать! По хорошему бы надо иметь связи, но увы, буду учиться пока так. Удачи!
Пы.Сы:
504 Gateway Time-out - это первая ссылка лаганула
redirecting.... - вторая
А на литературу перекинуло, будем читать)
0
19.09.2016, 20:56
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.09.2016, 20:56

Некорректно работает <input>
Здравствуйте! Ну вот все хорошо шло, а вот поиск создал мне проблемы.. Никак не могу сделать, чтобы...

Некорректно работает position: absolute
Сделал div футер, присвоил ему position: absolute; bottom: 0px;, а тут такое =-O Страница...

Некорректно работает transition-duration
Добрый день! Я уже замучился, не пойму в чем проблема. Делаю так, чтобы при наведении на главный...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru