Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css вопрос / 7 сообщений из 7, страница 1 из 1
26.10.2015, 15:10
    #39086964
tadeyiloda
tadeyiloda
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
выполняю задание по css
Код: sql
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.
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Испытание: макет-прототип</title>
    </head>
    <body>
        <div class="header">
            <div class="logo">Лого</div>
            <div class="contacts">+7 (812) 33-4-55</div>
        </div>
        <div class="about-us">
            <h1>Наша компания</h1>
            <p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p>
            <p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p>
        </div>
        <div class="main-menu">
            <a href="#about">О нас</a><br>
            <a href="#contacts">Вакансии</a><br>
            <a href="#contacts">Контакты</a><br>
        </div>
        <div class="footer">
            &copy; 2015 — Keksby Web Production
        </div>
    </body>
</html>

/* Общие стили для документа и блоков, менять не надо */

body {
    width: 450px;
    margin: 0;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
    padding: 10px 20px 10px 20px;
    background-color: #f5f5f5;
    border: 2px solid #cccccc;
}

/* Собственные стили блоков */

.header {
    min-height: 40px;
    margin-bottom: 20px;
}

.logo {
    float: left;
    width: 230px;
    text-align: center;
    font-weight:bold;
}

.contacts {
    float: right;
    width: 110px;
    text-align: center;
    font-style:italic;
}

.about-us {
    width: 230px;
    margin-bottom: 20px;
    float:left;
}

.about-us h1 {
     font-size: 20px;
}

.about-us p {
    font-size: 12px;
}

.main-menu {
    width: 110px;
    float: right;
    
}

.footer {
    clear:both;
    
}

.logo,
.contacts,
.footer {
    
    background-color: #333333;
    color:#ffffff;
}



почему about-us margin-bottom: 20px; влияет на отступ footer? ведь логичнее что main-menu должен влиять на отступ ведь main-menu ниже about-us
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 15:21
    #39086980
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
tadeyilodaведь логичнее что main-menu должен влиять на отступ ведь main-menu ниже about-us
По картинке так не скажешь...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
body {
    width: 450px;
    margin: 0;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
.logo,
.contacts,
.about-us,
.main-menu,
.footer {
    padding: 10px 20px 10px 20px;
    background-color: #f5f5f5;
    border: 2px solid #cccccc;
}
.header {
    min-height: 40px;
    margin-bottom: 20px;
}
.logo {
    float: left;
    width: 230px;
    text-align: center;
    font-weight:bold;
}
.contacts {
    float: right;
    width: 110px;
    text-align: center;
    font-style:italic;
}
.about-us {
    width: 230px;
    margin-bottom: 20px;
    float:left;
}
.about-us h1 {
     font-size: 20px;
}
.about-us p {
    font-size: 12px;
}
.main-menu {
    width: 110px;
    float: right;
}
.footer {
    clear:both;
}
.logo,
.contacts,
.footer {
    
    background-color: #333333;
    color:#ffffff;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
	<div class="header">
		<div class="logo">Лого</div>
		<div class="contacts">+7 (812) 33-4-55</div>
	</div>
	<div class="about-us">
		<h1>Наша компания</h1>
		<p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p>
		<p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p>
	</div>
	<div class="main-menu">
		<a href="#about">О нас</a><br>
		<a href="#contacts">Вакансии</a><br>
		<a href="#contacts">Контакты</a><br>
	</div>
	<div class="footer">
		&copy; 2015 — Keksby Web Production
	</div>
</body>
</html>


Менюшка явно меньше по вертикали...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 15:42
    #39087025
tadeyiloda
tadeyiloda
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
https://htmlacademy.ru/courses/41/run/15
вот этот пример
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 15:46
    #39087042
tadeyiloda
tadeyiloda
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
у какого элемента больше ширина тот и задает точку отсчета?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 16:41
    #39087144
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
tadeyiloda https://htmlacademy.ru/courses/41/run/15
вот этот пример
Там какую-то регистрацию требуют...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 16:41
    #39087147
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
tadeyilodaу какого элемента больше ширина тот и задает точку отсчета?
Не ширина, а высота...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.10.2015, 17:23
    #39087227
tadeyiloda
tadeyiloda
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css вопрос
точно высота,спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css вопрос / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 363ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1445675]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 54ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 56ms
get tp. blocked users:
 2ms
others: 204ms
total:  363ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]