Не могу справится с позиционированием

@КаКойРеГИсТР · Регистрация: 29.01.2016

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

Привет всем,
Я новенький в HTML/CSS прошёл курсы на кодеакадеми.цом и решил создать свой сайтик маленький.
Так вот проблемка в чём когда меняешь расширение сдвигаются кнопки в шапке и нижнею подпись я не могу зделать универсальной щяс она стоит на отступ 738пх от верху. Помогите побороть этот недуг также интересны ваши замечания как упростить или какие ошибки.

Добавил пару фотак и сам сайт

html:

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
<!DOCTYPE html>
<html> 
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css"/> 
        <title>One more Portfolio</title>
    </head>
    <body>
    <div class"wrap">
        <div class="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/Contact.html">Contact</a></li>
                <li><a href="">Shop</a></li>
            </ul>
        </div>
        <div class="main-card">
            <div>
                <h1>Johnny Catsville</h1>
            </div>
 
            <div>
                <img class="img-card" src="https://yt3.ggpht.com/-uQfq5ONW9MY/AAAAAAAAAAI/AAAAAAAAAAA/CAUQbkHSEbo/s900-c-k-no/photo.jpg">
            </div>
 
            <div>
                <h2>About Me:</h2>
                <p class="p-card">Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. <span>Miaaauuuuuu...</span>Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. </p>
            </div>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/johnny_catsville"><img src="css/img/facebook.png"></a>
            <a href="https://www.instagram.com/johnny_catsville"><img src="css/img/instagram.png"></a>
            <a href="https://www.twitter.com/johnny_catsville"><img src="css/img/twitter.png"></a>
        </div>
        <div class="footer">
            Created by Johnny Catsville, 2016.
        </div>
    </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
body {
    background: url("img/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main-card {
    background: url("img/card-bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: 6px 6px 30px #888888;
    border-radius: 10px;
    margin-left: 35%;
    margin-right: 35%;
    margin-top: 2%;
    margin-bottom: 3%;
    background-color: white;
    text-align: center;
    font-style: bold;
    padding-top: 1%;
    padding-bottom: 1%;
    position: absolute;
    top: 80px;
 
}
.p-card {
    border: 0px solid white;
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
 
}
 
.img-card {
    border: 1px solid #888888;
    box-shadow: 0px 0px 30px #888888;
    border-radius: 10px;
    width: 260px;
    height: 260px;
}
span {
    font-style: italic;
}
 
.social {
    margin-top: 10%;
    margin-left: 70%;
    position: fixed;
}
 
div ul li {
    display: inline;
    background-color: #ff9932;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1.3px;
    padding: 10px 40px;
}
 
div ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}
 
div ul {
 
    margin-left: 30%;
}
 
 
.nav {
    border: 2px solid black;
    border-radius: 5px;
    background-color: #ff9932;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
 
}
 
a:link {
    text-decoration: none;
}
 
a:visited {
    text-decoration: none;
}
 
a:hover {
    color: red;
}
 
.footer {
    
    position: absolute;
    width: 99%;
    top: 738px;
    text-align: center;
}

@Resume · 29.01.2016, 21:47

в 8 строчке нужно добавить знак =:

CSS
1
<div class="wrap">

Что еще бросилось в глаза:
1. background-color уже редко используется. Вместо него можно просто прописать background: цвет;
2. Используйте сокращенную запись для padding и margin.
3. Не указан размер блока .wrap. Из-за этого у Вас были проблемы с footer.
4. Используйте тэги HTML5. В вашей работе без особых проблем тэги <header>,<footer>,<nav> можно использовать.
5. Картинки должны хранится в отдельной папке, то есть не в папке с css, а отдельно.
6. text-decoration:none в a:visited и a:link не нужно прописывать, потому что вы прописали их в div ul li a.

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
<!DOCTYPE html>
<html> 
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css"/> 
        <title>One more Portfolio</title>
    </head>
    <body>
    <div class="wrap">
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/Contact.html">Contact</a></li>
                <li><a href="">Shop</a></li>
            </ul>
        </nav>
        <div class="main-card">
            <div>
                <h1>Johnny Catsville</h1>
            </div>
            <div>
                <img class="img-card" src="https://yt3.ggpht.com/-uQfq5ONW9MY/AAAAAAAAAAI/AAAAAAAAAAA/CAUQbkHSEbo/s900-c-k-no/photo.jpg">
            </div>
            <div>
                <h2>About Me:</h2>
                <p class="p-card">Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. <span>Miaaauuuuuu...</span>Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. </p>
            </div>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/johnny_catsville"><img src="css/img/facebook.png"></a>
            <a href="https://www.instagram.com/johnny_catsville"><img src="css/img/instagram.png"></a>
            <a href="https://www.twitter.com/johnny_catsville"><img src="css/img/twitter.png"></a>
        </div>
        <footer>
            Created by Johnny Catsville, 2016.
        </footer>
    </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
body {
    background: url("img/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:0;
    margin:0;
}
 
.wrap{
position:relative;
height:745px;
}
 
.main-card {
    background: url("img/card-bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: 6px 6px 30px #888888;
    border-radius: 10px;
    margin:2% 35% 3% 35%;
    background: white;
    text-align: center;
    font-style: bold;
    padding:1% 0;
    position: absolute;
    top:80px;
}
.p-card {
    text-align: justify;
    margin:0 20px;
}
 
.img-card {
    border: 1px solid #888888;
    box-shadow: 0px 0px 30px #888888;
    border-radius: 10px;
    width: 260px;
    height: 260px;
}
span {
    font-style: italic;
}
 
.social {
margin:10% 0 0 70%;
position: fixed;
}
 
div ul li {
    display: inline;
    background: #ff9932;
    font:600 18px 'Raleway', sans-serif;
    letter-spacing: 1.3px;
    padding: 10px 40px;
}
 
div ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}
 
div ul {
    margin-left: 30%;
}
 
nav {
    border: 2px solid black;
    border-radius: 5px;
    background-color: #ff9932;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
        }
 
a:hover {
    color: red;
}
 
footer {    
    position: absolute;
    width: 99%;
    bottom:0;
    text-align: center;
}

@КаКойРеГИсТР · 29.01.2016, 22:44 **[ТС]**

Спасибо, за советы вроде как ко всем прислушался, но шапка всё равно двигается при изменение расширения экрана, а футер может спокойно за лазить на текст теперь

@Focus_RS · 29.01.2016, 22:57

Дабы не создавать новую тему спрошу в этой: из-за логотипа, box которого занимает всю строку (при просмотре кода <div class="logo"> и <div class="slogan"> в браузере), не получается в шапке разместить номер телефона и изображение с ссылкой на поиск.
Подскажите пожалуйста - как исправить?
Огромное спасибо!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">  
    <div class="main_container">
        <div class="logo"><a href="index.html">111111 111</a></div>
        <div class="slogan"><a href="index.html">1111111-111111111111111 11111</a></div> 
        <div class="search"><a href="#"><img src="https://www.cyberforum.ru/images/search_icon.png" alt="Поиск!" border="0" /></a>8 111 <b>111-11-11</b></div>
    </div>
</div>
</div>

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
body{
font-family: 'Segoe UI';
padding:0;
font-size:12px;
margin:0 auto;
color:#333333;
background:url(images/bg.gif) repeat top left;
}
p{
padding:5px 0 5px 0;
margin:0px;
line-height:18px;
text-align:left;
}
a{
text-decoration:none;
}
h1{font-family:'Segoe UI';font-size:24px;font-weight:bold;margin:0px;padding:10px 0 10px 0px;color:#666666;}
h2{font-family:'Segoe UI';font-size:30px;color:#e90606;padding:10px 0 10px 0;margin:0px 0 20px 0;font-weight:normal;}
h3{font-family:'Segoe UI';font-size:30px; color:#666666; padding:0; margin:0px; font-weight:normal;}
h4{font-family:'Segoe UI';font-size:50px; color:#ffffff; padding:0; margin:0px; font-weight:normal;}
.main_container{
width:960px;
height:100%;
padding:0px 0 0px 0; 
margin: 0 auto;
background: url(images/logo.png) 220px 5px no-repeat, url(images/border_icon.png) 900px 29px no-repeat;
}
#header{ 
width:100%; 
height:90px; 
background:#e90606;
}
.logo{
padding:8px 0 0 35px;
font-size:40px;
word-spacing:40px;
letter-spacing: 3px;
margin:0px 0 0 0;
}
.logo a{ 
color:#ffffff; 
}
.slogan a{
color:#ffffff; 
}
.slogan{
padding:0px 0 0 37px;
font-size:11px;
word-spacing:83px;
margin:0px 0 0 0;
color:#ffffff; 
font-weight:500;
}
.search{
padding:50px 0 0 0;
float:right;
margin:0;
font-size:20px;
color:#ffffff;
}
.search a{
float:right; margin:0 3px 0 3px;
}

@Focus_RS · 29.01.2016, 23:58

Для наглядности прилагаю скриншот!

@КаКойРеГИсТР · 30.01.2016, 16:53 **[ТС]**

Вроде разобрался что было с заголовком теперь он по центру при изменение масштаба, но есть какое то небольшое количество пикселей которое мешает быть ему точно по центру. А также всё ещё футер за лазит на текст .... Всё наглядно видно на скриншоте ниже.

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
<!DOCTYPE html>
<html> 
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css"/> 
        <title>One more Portfolio</title>
    </head>
    <header>
        <div class="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/Contact.html">Contact</a></li>
                <li><a href="">Shop</a></li>
            </ul>
        </div>
    </header>
    <body>
    <div class"wrap">
        
        <div class="main-card">
            <div>
                <h1>Johnny Catsville</h1>
            </div>
 
            <div>
                <img class="img-card" src="https://yt3.ggpht.com/-uQfq5ONW9MY/AAAAAAAAAAI/AAAAAAAAAAA/CAUQbkHSEbo/s900-c-k-no/photo.jpg">
            </div>
 
            <div>
                <h2>About Me:</h2>
                <p class="p-card">Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. <span>Miaaauuuuuu...</span>Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau </p>
            </div>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/johnny_catsville"><img src="css/img/facebook.png"></a>
            <a href="https://www.instagram.com/johnny_catsville"><img src="css/img/instagram.png"></a>
            <a href="https://www.twitter.com/johnny_catsville"><img src="css/img/twitter.png"></a>
        </div>
        
    </div>
    </body>
    <footer>
        <div class="footer">
            Created by Johnny Catsville, 2016.
        </div>
    </footer>
</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
body {
    background: url("img/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:0;
    margin:0;
}
 
.wrap {
    position:relative;
    height:745px;
 
}
.main-card {
    background: url("img/card-bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: 6px 6px 30px #888888;
    border-radius: 10px;
    margin: 2% 35%  3% 35%;
    background: white;
    text-align: center;
    font-style: bold;
    padding: 1% 0% 1% 0%;
    position: absolute;
    top: 80px;
 
}
.p-card {
    text-align: justify;
    margin: 0px 20px 0px 20px;
 
}
 
.img-card {
    border: 1px solid #888888;
    box-shadow: 0px 0px 30px #888888;
    border-radius: 10px;
    width: 260px;
    height: 260px;
}
span {
    font-style: italic;
}
 
.social {
    margin: 10% 0% 0% 70%;
    position: fixed;
}
 
div ul li {
    display: inline;
    background: #ff9932;
    font-family: 600 18px 'Raleway', sans-serif;
    letter-spacing: 1.3px;
    padding: 10px 40px;
}
 
div ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}
 
 
.nav {
    border: 2px solid black;
    border-radius: 5px;
    background: #ff9932;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
 
}
 
a:hover {
    color: red;
}
 
.footer {
    
    position: absolute;
    width: 99%;
    bottom: 0px;
    text-align: center;
}

@Resume · 30.01.2016, 22:37

У вас ошибки в коде.
Блоки <header> и <footer> нужно засунуть в тело( <body>).
Вы не задаете высоту для <header> и <footer>.
Вы забыли поставить ЗНАК РАВНО вот тут:

CSS
1
<div class!!!ВОТ ТУТ ЗНАК РАВНО!!!!"wrap">

Пока так:

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
<!DOCTYPE html>
<html> 
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css"/> 
        <title>One more Portfolio</title>
    </head>
        <body>
        <header>
            <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/Contact.html">Contact</a></li>
                <li><a href="">Shop</a></li>
            </ul>
            <nav>
        </header>
    <div class="wrap">
        <div class="main-card">
            <div>
                <h1>Johnny Catsville</h1>
            </div>
            <div>
                <img class="img-card" src="https://yt3.ggpht.com/-uQfq5ONW9MY/AAAAAAAAAAI/AAAAAAAAAAA/CAUQbkHSEbo/s900-c-k-no/photo.jpg">
            </div>
 
            <div>
                <h2>About Me:</h2>
                <p class="p-card">Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. <span>Miaaauuuuuu...</span>Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau.Miau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miauMiau miau miau miau, miau miau miau miau miaaaau Miau Miau miau miau miau miau miau miau! MIAU miau miau. Miau miau miau miau miau miau miau miau. Miau miau miau miau, miau miau miau miau </p>
            </div>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/johnny_catsville"><img src="css/img/facebook.png"></a>
            <a href="https://www.instagram.com/johnny_catsville"><img src="css/img/instagram.png"></a>
            <a href="https://www.twitter.com/johnny_catsville"><img src="css/img/twitter.png"></a>
        </div>      
    </div>
    <footer>        
            Created by Johnny Catsville, 2016.
    </footer>
    </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
body {
    background: url("img/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:0;
    margin:0;
}
 
.wrap {
    height:745px;
}
.main-card {
    background: url("img/card-bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: 6px 6px 30px #888888;
    border-radius: 10px;
    margin: 2% 35%  3% 35%;
    background: white;
    text-align: center;
    font-style: bold;
    padding: 1% 0% 1% 0%;
    position: absolute;
    top: 80px;
 
}
.p-card {
    text-align: justify;
    margin: 0px 20px 0px 20px;
 
}
 
.img-card {
    border: 1px solid #888888;
    box-shadow: 0px 0px 30px #888888;
    border-radius: 10px;
    width: 260px;
    height: 260px;
}
span {
    font-style: italic;
}
 
.social {
    margin: 10% 0% 0% 70%;
    position: fixed;
}
 
div ul li {
    display: inline;
    background: #ff9932;
    font-family: 600 18px 'Raleway', sans-serif;
    letter-spacing: 1.3px;
    padding: 10px 40px;
}
 
div ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}
 
 
nav {
    border: 2px solid black;
    border-radius: 5px;
    background: #ff9932;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
 
}
 
a:hover {
    color: red;
}
 
footer {
    width: 99%;
    text-align: center;
}

Советую разобраться с блочной версткой. Материалов на эту тему много. Как только хорошо разберетесь, то вы свои ошибки исправите и ваш footer будет на своем месте.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@КаКойРеГИсТР 0 / 0 / 0 Регистрация: 29.01.2016 Сообщений: 3
	29.01.2016, 22:44 [ТС]
	Спасибо, за советы вроде как ко всем прислушался, но шапка всё равно двигается при изменение расширения экрана, а футер может спокойно за лазить на текст теперь Миниатюры 0

@Focus_RS 1 / 1 / 1 Регистрация: 04.05.2014 Сообщений: 109
	29.01.2016, 23:58
	Для наглядности прилагаю скриншот! Миниатюры 0