Я новичок. Как исправить оформление блога

@Animeshka1996 · Регистрация: 25.11.2015

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

Здравствуйте я новичок в web-программировании. У меня возникла проблема с оформлением своего блога. Подскажите как подогнать картинки через 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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=cp1251" />
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<meta>
<title>AB: Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
<style type="text/css">
 #navigation  li {  
    display: inline-block; 
    background: Plum ; 
    margin-right: 2px; 
    -webkit-transform: skewX(-30deg); 
    -moz-transform: skewX(-30deg); 
    -o-transform: skewX(-30deg); 
    -ms-transform: skewX(-30deg); 
    transform: skewX(-30deg); 
   }
#navigation   a {
    color: #000; 
    display: block; 
    padding: 4px 20px; 
    text-decoration: none; 
    -webkit-transform: skewX(30deg); 
    -moz-transform: skewX(30deg); 
    -o-transform: skewX(30deg); 
    -ms-transform: skewX(30deg); 
    transform: skewX(30deg);
    font-color: DarkBlue;
   }
 #navigation  li:hover {
    background: #333; 
   }
 #menu a {
  display: block;
  margin-left: 12px;
  }
 #vc P{
  margin: 8px;
  color: black 
  }
  
 body {
  background-image: url(images/fn1.gif);
  }
 div.c4 {font-size: 0.8em; left: 229px; margin-bottom: 1.0em; margin-top: 1.0em; position: absolute; text-align: center; top: 0px; width: 210px}
 div.c3 {text-align: center}
 td.c2 {BACKGROUND-REPEAT: no-repeat}
 li.c1 {list-style: none}
 
 
</style>
 
<style type="text/css">
 div.c2 {position: absolute; left: 770px; top: 130px; width: 250px;}
 div.c1 {position: absolute; left: 220px; top: 0px; width: 50px;}
</style>
</head>
<body>
<div class="c3">
<table id="table" width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="images/index_001.gif" width="1000" height="171" alt=""></td>
</tr>
<tr>
<td colspan="6"><img src="images/index_003.gif" width="838" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/index_002.gif" width="102" height="54" alt=""></td>
<td colspan="3" valign="top" width="1000" height="0" class="c2">
<div id="navigation">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="galer.html">Арты</a></li>
<li><a href="voc.html">Вокалоид</a></li>
<li><a href="jpop.html">J-POP</a></li>
<li><a href="histanime.html">История Аниме</a></li>
<li class="c1">&gt;</li>
</ul>
</div>
</td>
<td rowspan="2"><img src="images/index_004.gif" width="101" height="54" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/index_006.gif" width="905" height="29" alt=""></td>
</tr>
<tr>
<td colspan=2 valign=top background="images/index_007.gif" width=199 height=377 class=c2>
<div id="menu">
<p class="head2">ТОП-5 Аниме жанра: романтика/комедия/драма</p>
<a href="">С Места на Место</a><br>
<hr>
<a href="">Меж двух огней девушки и подруги детства</a><br>
<br>
<br>
<hr>
<a href="">История любви Тамако и Лавочка Тамако</a><br>
<br>
<hr>
<a href="">Твоя апрельская ложь</a><br>
<br>
<hr>
<a href="">Синтетические воспоминания</a><br>
<br>
<div class="c3">
<p class="head2">ТОП-5 Аниме жанра: этти/романтика/комедия</p>
</div>
<a href="">Ямада и семь ведьм</a><br>
<hr>
<a href="">Старшая школа: Демоны против падших</a><br>
<br>
<br>
<hr>
<a href="">Любовные неприятности</a><br>
<br>
<hr>
<a href="">Рандеву с жизнью</a><br>
<hr>
<a href="">Президент школьного совета моя невеста</a><br>
<br>
<br>
<div class="c3">
<p class="head2">ТОП-5 Аниме жанра: приключения</p>
</div>
<a href="">Шарлотта</a><br>
<hr>
<a href="">Точка Кипения</a><br>
<hr>
<a href="">Герои шестицветия</a><br>
<hr>
<a href="">Пожиратель богов</a><br>
<hr>
<a href="">Война красного дракона</a><br></div>
</td>
<td valign=top background="images/index_008.gif" width=1001 height=692 class=c2>
<div id="vc">
<div class="c3">
<p class="head">О блоге</p>
</div>
<br>
<br><br>
<p>Блог создан: 29.09.2015</p>
<p>Нужна помощь? Обращайтесь к создателю EMAIL: <strong>mil.animesh2015@yandex.ru</strong></p>
<br>
<br>
<div class="c3">
<p class="head">Новости</p>
</div>
<br>
<p>Последнее обновление: 4.12.2015<br>
<br>
Версия блога: 0.2.8<br>
<br>
Блог завершен на 5%<br>
<br>
<strong>1.</strong>-Удаление <strong>2.</strong>-Изменение <strong>3.</strong>-Добавление<br>
<br>
<strong>Список изменений:</strong><br>
<br>
<strong>2.</strong>-Новости<br>
<br>
<strong>2.</strong>-Размер шрифта<br>
<br>
<strong>2.</strong>-Страницы дополнены информацией<br>
<br>
<strong>2.</strong>-Названия страниц<br>
<br>
<strong>2.</strong>-Оформление<br>
<br>
<strong>2.</strong>-Проверен на Валидаторе (исправлены ошибки)<br>
<br></p>
<br>
<br></div>
</td>
<td colspan=2 valign=top background="images/index_009.gif" width=199 height=377 class=c2>
<div id="menu">
<p class="head2">ТОП-5 Аниме жанра: фантастика/фентази/киберфентази</p>
<a href="">Владыка</a><br>
<hr>
<a href="">Игра на выживание</a><br>
<br>
<hr>
<a href="">Стражи Барьера</a><br>
<hr>
<a href="">Мастера меча онлайн</a><br>
<br>
<hr>
<a href="">Инструктор боевых магов</a><br>
<br>
<div class="c3">
<p class="head2">ТОП-5 Аниме жанра: мистика/психология</p>
</div>
<a href="">Бездомный Бог</a><br>
<hr>
<a href="">Явись, Азазель</a><br>
<hr>
<a href="">На самом деле я...</a><br>
<hr>
<a href="">Всадник без головы</a><br>
<hr>
<a href="">Клятый коварный кубик</a><br>
<br>
<div class="c3">
<p class="head2">ТОП-5 Аниме жанра: меха/фантастика/приключения</p>
</div>
<a href="">Алдноа Зеро</a><br>
<hr>
<a href="">Акварион Логос</a><br>
<hr>
<a href="">Фантастические куколки</a><br>
<br>
<hr>
<a href="">Басквош!</a><br>
<br>
<hr>
<a href="">Тяжелый объект</a><br></div>
</td>
</tr>
<tr>
<td colspan="5"><img src="images/index_010.gif" width="1000" height="23" alt=""></td>
</tr>
<tr>
<td><img src="images/index_005.gif" width="102" height="68" alt=""></td>
<td colspan="3" valign=top background="images/index_012.gif" width="906" height="68" class="c2">Создатель: Анимешник Анимешник
<div class="c3">AnBlog2015<br>
<br></div>
</td>
<td><img src="images/index_011.gif" width="99" height="68" alt="" class="c2"></td>
</tr
<tr>
<td colspan="3" valign=top background="images/index_013.gif" width="906" height="68" class="c2"></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="542" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="32" height="1" alt=""></td>
</tr>
</table>
</div>
<div class="c4" id="box"><a href="reg.html"><strong><input type="submit" name="button2" value="Регистрация"></strong></a> <a href="vhod.html"><strong><input type="submit" name="button1" value="Вход"></strong></a><br></div>
<div id="box" class="c2"><input type="search" placeholder="Поиск..." name="go">
<div id="box" class="c1"><input type="button" value="Найти"></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
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
165
166
167
168
BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px Verdana; COLOR: #6F999C; PADDING-TOP: 0px ;scrollbar-DarkShadow-Color:#232B38;
scrollbar-Track-Color: #D6E6FF; 
scrollbar-Face-Color: #DADADA; 
scrollbar-Shadow-Color:#AEC8C7;
scrollbar-3dLight-Color:#000000; 
scrollbar-Highlight-Color:#ffffff;
}
 
input[type="search"] {
    padding: 5px;
    width: 217px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}
 
input[type="button"]    {
    margin: 0;
    padding: 5px;
    border: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f5f5f5;
}   
 
 
input[type="submit"]    {
    margin: 0;
    padding: 5px;
    border: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f5f5f5;
}   
 
A {
    COLOR: #000000; HEIGHT: 9px; FONT-WEIGHT: bold
}
A:hover {
    COLOR: #000000; FONT-WEIGHT: bold
}
IMG {
    BORDER-RIGHT: 0px; BORDER-TOP: 5px; BORDER-LEFT: 2px; BORDER-BOTTOM: 0px
}
P {
    FONT-SIZE: 12px; COLOR: #F5FED5; FONT-FAMILY: Verdana; TEXT-ALIGN: justify
}
UL {
    FONT-SIZE: 10px; COLOR: #F5FED5; FONT-FAMILY: Verdana; TEXT-ALIGN: justify
}
LI {
    FONT-SIZE: 10px; COLOR: #F5FED5; FONT-FAMILY: Verdana; TEXT-ALIGN: justify
}
TD {
    FONT-SIZE: 11px; FONT-FAMILY: Verdana; COLOR: #4B4B4B;
}
.head {
    MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px; TEXT-TRANSFORM: uppercase; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid
}
.head2 {
    MARGIN-TOP: 1px; MARGIN-Bottom: 1px; BACKGROUND-COLOR: #8BAEE6; FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BORDER-Top: #000000 1px solid; TEXT-ALIGN: center
}
H1 {
    MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px; TEXT-TRANSFORM: uppercase; COLOR: #A9A9A9; BORDER-BOTTOM: #000000 1px dotted
}
H2 {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #9f91c6; FONT-FAMILY: Verdana; LETTER-SPACING: 5px; TEXT-ALIGN: left
}
ACRONYM {
    BORDER-BOTTOM: white 1px dashed
}
.navtop {
    BORDER-RIGHT: #929292 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #929292 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: url(navheader.jpg) no-repeat; VERTICAL-ALIGN: middle; TEXT-TRANSFORM: uppercase; BORDER-LEFT: #929292 0px solid; WIDTH: 121px; COLOR: #3d3859; BORDER-BOTTOM: #929292 1px solid; HEIGHT: 29px; TEXT-ALIGN: right
}
#graphics {
    TEXT-ALIGN: center
}
#graphics IMG {
    MARGIN: 12px
}
#table {
    BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
.toptable {
    BORDER-RIGHT: #a6a6a6 1px solid; BORDER-TOP: #a6a6a6 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 9px; BORDER-LEFT: #a6a6a6 1px solid; COLOR: #a6a6a6; BORDER-BOTTOM: #a6a6a6 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #161616; TEXT-ALIGN: center
}
.tablelinks {
    BORDER-RIGHT: #a6a6a6 1px solid; BORDER-TOP: #a6a6a6 1px solid; FONT-SIZE: 9px; BORDER-LEFT: #a6a6a6 1px solid; COLOR: #a6a6a6; BORDER-BOTTOM: #a6a6a6 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #dadbe5; TEXT-ALIGN: center
}
.laytop {
    BORDER-RIGHT: #cecdc9 1px solid; BORDER-TOP: #cecdc9 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: url(content.jpg) #ffffff; MARGIN-BOTTOM: 2px; BORDER-LEFT: #cecdc9 1px solid; COLOR: #c2bc90; BORDER-BOTTOM: #cecdc9 1px solid; FONT-FAMILY: Verdana; LETTER-SPACING: 5px; TEXT-ALIGN: center
}
#layimg {
    BORDER-RIGHT: #cecdc9 1px solid; BORDER-TOP: #cecdc9 1px solid; BORDER-LEFT: #cecdc9 1px solid; BORDER-BOTTOM: #cecdc9 1px solid
}
#contenttable {
    BORDER-RIGHT: #cecdc9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #cecdc9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9px; PADDING-BOTTOM: 2px; MARGIN: 5px 5px 8px; BORDER-LEFT: #cecdc9 1px solid; COLOR: #8e8d88; PADDING-TOP: 2px; BORDER-BOTTOM: #cecdc9 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ededed
}
#prevdlinks {
    BORDER-RIGHT: #cecdc9 1px solid; BORDER-TOP: #cecdc9 1px solid; FONT-WEIGHT: bold; MARGIN: 0px; TEXT-TRANSFORM: uppercase; BORDER-LEFT: #cecdc9 1px solid; BORDER-BOTTOM: #cecdc9 1px solid; BACKGROUND-COLOR: #ededed; TEXT-ALIGN: center
}
#prevdlinks A {
    DISPLAY: block; FONT-SIZE: 10px; COLOR: #9dac80
}
#prevdlinks A:hover {
    COLOR: #97979e; BACKGROUND-COLOR: #fffde0; text-size: 11px
}
#right {
    TEXT-ALIGN: right
}
.dynamicnav {
    FONT-WEIGHT: bold; WORD-SPACING: 10px; TEXT-ALIGN: right
}
#header {
    PADDING-LEFT: 15px; FONT-SIZE: 11px; BACKGROUND: url(angelface_01.jpg); VERTICAL-ALIGN: middle; WIDTH: 770px; COLOR: #959287; HEIGHT: 29px; TEXT-ALIGN: left
}
#footer {
    CLEAR: both; PADDING-RIGHT: 7px; BORDER-TOP: #979489 1px solid; MARGIN-TOP: 20px; PADDING-LEFT: 7px; BACKGROUND: url(footer.gif); PADDING-BOTTOM: 7px; PADDING-TOP: 7px; HEIGHT: 16px; TEXT-ALIGN: center
}
#navtd {
    WIDTH: 182px
}
#nav2 {
    BORDER-RIGHT: #839F47 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #839F47 1px solid; PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px auto 8px; BORDER-LEFT: #839F47 1px solid; WIDTH: 117px; PADDING-TOP: 0px; BORDER-BOTTOM: #839F47 1px solid; BACKGROUND-COLOR: #F3FDD4
}
#nav2 H1 {
    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: url(navh1.gif); PADDING-BOTTOM: 8px; MARGIN: 0px auto; TEXT-TRANSFORM: uppercase; PADDING-TOP: 8px; BORDER-BOTTOM: #c0beb8 1px solid; TEXT-ALIGN: right
}
#nav2 A {
    PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; COLOR: #6F999C; PADDING-TOP: 2px; BORDER-BOTTOM: #4B4F58 1px solid
}
#nav2 A:hover {
    BACKGROUND-COLOR: #C4DB71
}
#nav {
    BORDER-RIGHT: #839F47 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #839F47 1px solid; PADDING-LEFT: 0px; FLOAT: left; MARGIN: 0px auto 8px; BORDER-LEFT: #839F47 1px solid; WIDTH: 121px; PADDING-TOP: 0px; BORDER-BOTTOM: #839F47 1px solid; BACKGROUND-COLOR: #F3FDD4
}
#nav H1 {
    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: url(navh1.gif); PADDING-BOTTOM: 8px; MARGIN: 0px auto; TEXT-TRANSFORM: uppercase; PADDING-TOP: 8px; BORDER-BOTTOM: #c0beb8 1px solid; TEXT-ALIGN: right
}
#nav A {
    PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; COLOR: #6F999C; PADDING-TOP: 2px; BORDER-BOTTOM: #4B4F58 1px solid
}
#nav A:hover {
    BACKGROUND-COLOR: #C4DB71
}
#lastdesign {
    MARGIN: 2px; HEIGHT: 113px
}
#acont {
    BORDER-RIGHT: #c0beb8 1px solid; BORDER-TOP: #c0beb8 1px solid; BACKGROUND: url(contbg.gif) #e7e8e5 repeat-x; MARGIN-BOTTOM: 10px; BORDER-LEFT: #c0beb8 1px solid; WIDTH: 522px; BORDER-BOTTOM: #c0beb8 1px solid
}
#cont {
    BORDER-RIGHT: #232B38 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #232B38 1px solid; PADDING-LEFT: 5px; BACKGROUND: url(content.jpg) #232B38 no-repeat; PADDING-BOTTOM: 5px; MARGIN: 15px 2px 2px; BORDER-LEFT: #232B38 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #232B38 1px solid; WIDTH: 468px;
}
.newstit {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: url(content.jpg) #ededed no-repeat right 100%; COLOR: #c2bc90; LETTER-SPACING: 2px
}
.newsub {
    BORDER-RIGHT: #cecdc9 1px solid; BORDER-TOP: #cecdc9 1px solid; MARGIN-BOTTOM: 2px; BORDER-LEFT: #cecdc9 1px solid; COLOR: #cecdc9; BORDER-BOTTOM: #cecdc9 1px solid; BACKGROUND-COLOR: #ededed
}
.inthead {
    FONT-WEIGHT: bold; FONT-SIZE: 10px
}
IMG {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px;
    }

@whiteapps · 04.12.2015, 11:43

Animeshka1996, что именно и куда подогнать

@Animeshka1996 · 04.12.2015, 11:50 **[ТС]**

как двигать картинки через css?

@whiteapps · 04.12.2015, 11:58

Animeshka1996,
через margin или через left, top, right, bottom если свойство position установлено absolute или relative
если это фоновая картинка то background-position

@Animeshka1996 · 04.12.2015, 12:02 **[ТС]**

а как можно увеличить картинку через css?

@whiteapps · 04.12.2015, 12:06

Animeshka1996,
width и height
для фоновых background-size

@Animeshka1996 · 04.12.2015, 12:08 **[ТС]**

привидите пример пожалуйста с загрузкой картинки

@whiteapps · 04.12.2015, 12:12

Animeshka1996, https://jsfiddle.net/cn4wfrdy/

HTML5
1
2
3
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></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
#test1 {
  background-image: url('http://www.2do2go.ru/uploads/a9f23271d5cdfbffbf6dd240399afdf0_w256_h256.jpg');
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-size: 100px 100px;
  border: 1px solid #333;
}
#test2 {
  background-image: url('http://www.2do2go.ru/uploads/a9f23271d5cdfbffbf6dd240399afdf0_w256_h256.jpg');
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-size: 100px 350px;
  border: 1px solid #333;
}
#test3 {
  background-image: url('http://www.2do2go.ru/uploads/a9f23271d5cdfbffbf6dd240399afdf0_w256_h256.jpg');
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-size: 700px 700px;
  border: 1px solid #333;
}

@Animeshka1996 · 04.12.2015, 12:25 **[ТС]**

большое спасибо)

Добавлено через 11 минут
получается если я сделаю так:

CSS
1
2
3
4
5
6
7
8
9
 #x007 {
  background-image: url('images/index_007.gif');
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  bottom: 500px;
  background-size: 200px 350px;
  border: 1px solid #333;
  }

HTML5
1
2
3
<div id="x007">
<td colspan=2 valign=top background="images/index_007.gif" width=199 height=377 class=c2>
</div>

картинка будет грузится 2 раза?

@whiteapps · 04.12.2015, 12:53

Animeshka1996,
1) а зачем так делать??
2) браузер умный. он не будет одну и ту же картинку грузить два раза

@Animeshka1996 · 04.12.2015, 12:56 **[ТС]**

а у меня грузит( 2 раза т.т

Добавлено через 1 минуту
как будет правильно в моем случае

@whiteapps · 04.12.2015, 12:57

Animeshka1996, что вы подразумеваете под "грузит два раз"?
то что она два раза выводится? это естественно, к этому и был обраще мой первый вопрос
но загружена она будет один раз, браузер совершит только один запрос, а в остальных случаях будет использовать картинку из кэша

@Animeshka1996 · 04.12.2015, 13:00 **[ТС]**

"то что она два раза выводится?" да выводится 2 раза. Как исправить? Картинка вышла в двух местах(

@whiteapps · 04.12.2015, 13:03

Animeshka1996, чтобы картинка не отображалась в двух местах, нужно не отображать ее в двух местах
вообще, в общем случае, нужно отображать картинку ровно столько раз сколько нужно и только в тех местха где вам нужно
в тех местах где она не нужна - не отображать
и отображать строго не более стольки раз, скольк нужно вам

в приведенном вами примере нужно, либо убрать ее из css

CSS
1
background-image: url('images/index_007.gif');

либо из верстки

HTML5
1
background="images/index_007.gif"

и в будущем стараться не добовлять ненужные картинки

@Animeshka1996 · 04.12.2015, 13:05 **[ТС]**

а как тогда div id дать если не будет картинки?

@whiteapps · 04.12.2015, 13:08

Animeshka1996, я не понял вашего вопроса

и вообще, td не должен находится внутри div
почитайте про таблицы http://htmlbook.ru/html/table

@Animeshka1996 · 04.12.2015, 13:09 **[ТС]**

я сделал вот так, но картинка не двигается когда меняю координаты(

HTML5
1
2
3
<div id="x007">
<td colspan=2 valign="top" class=c2>
</div>

CSS
1
2
3
4
5
6
7
8
9
 #x007 {
  background-image: url('images/index_007.gif');
  background-repeat: no-repeat;
  width: 199px;
  height: 377px;
  bottom: 90px;
  background-size: 200px 350px;
  border: 1px solid #333;
  }

Добавлено через 47 секунд
чем тогда заменить td?

@whiteapps · 04.12.2015, 13:10

Animeshka1996, как вы меняете координаты

а td, в вашему случае заменить другим div

@Animeshka1996 · 04.12.2015, 13:12 **[ТС]**

ну и как я должен записать( я не понимаю т.т

@whiteapps · 04.12.2015, 13:13

Animeshka1996, вообще у вас все очень плохо
я смогу только вечером просмотреть всю вашу страницу и помочь поправить все ашипки
если до 21:00 МСК никто другой не поможет, скину вам исправеллную верстку

Добавлено через 52 секунды
Animeshka1996, а зачем вам там вообще

HTML5
1
<td colspan=2 valign=top background="images/index_007.gif" width=199 height=377 class=c2>

какую роль оно по-вашему выполняет?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 11:43
	Animeshka1996, что именно и куда подогнать 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 11:50 [ТС]
	как двигать картинки через css? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 11:58
	Animeshka1996, через margin или через left, top, right, bottom если свойство position установлено absolute или relative если это фоновая картинка то background-position 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 12:02 [ТС]
	а как можно увеличить картинку через css? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 12:06
	Animeshka1996, width и height для фоновых background-size 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 12:08 [ТС]
	привидите пример пожалуйста с загрузкой картинки 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 12:53
	Animeshka1996, 1) а зачем так делать?? 2) браузер умный. он не будет одну и ту же картинку грузить два раза 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 12:56 [ТС]
	а у меня грузит( 2 раза т.т Добавлено через 1 минуту как будет правильно в моем случае 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 12:57
	Animeshka1996, что вы подразумеваете под "грузит два раз"? то что она два раза выводится? это естественно, к этому и был обраще мой первый вопрос но загружена она будет один раз, браузер совершит только один запрос, а в остальных случаях будет использовать картинку из кэша 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 13:00 [ТС]
	"то что она два раза выводится?" да выводится 2 раза. Как исправить? Картинка вышла в двух местах( 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 13:05 [ТС]
	а как тогда div id дать если не будет картинки? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 13:08
	Animeshka1996, я не понял вашего вопроса и вообще, td не должен находится внутри div почитайте про таблицы http://htmlbook.ru/html/table 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.12.2015, 13:10
	Animeshka1996, как вы меняете координаты а td, в вашему случае заменить другим div 0

@Animeshka1996 1 / 1 / 0 Регистрация: 25.11.2015 Сообщений: 82
	04.12.2015, 13:12 [ТС]
	ну и как я должен записать( я не понимаю т.т 0