Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: В новом окне должна выйти выбранная картинка и текст

Помогите...
Я начала писать программу, но не знаю, как сделать так, чтобы выбранная картинка появилась в новом окне с текстом.
<html>
<head>
<title>Страничка по заказу</title>
<script>
function zakaz()
{
var win=window.open("","","width=400,height=300");
win.document.open();

-----------Вот тут должна быть часть, где в новом окне появится выбранная нами картинка с текстом-----



}
</script>
</head>
<body>
<H1>Страничка по заказу</H1>
<HR>
<FORM >
Заголовок <INPUT type="text" size="40" value="Введите текст">
<P>
<TABLE border="0" cellspacing="0" cellpadding="6">
<TR valign="top">
<TD> Выберите картинку </TD>
<TD>
<label><input type="radio" value="2" name="Q2"/> Веселая маска</label><BR>

<label><input type="radio" value="2" name="Q2"/> Грустная маска</label><BR>

<label><input type="radio" value="2" name="Q2"/> Подмигивающая маска</label><BR>

<label><input type="radio" value="2" name="Q2"/> Злая маска</label><BR>
</TD>
<TR>
</TABLE><INPUT type="button" value="Сброс">
<INPUT type="button" value="Показать">
</body>
</html>
Ответ:
Код HTML5
1
2
3
<button onclick="zakaz();">
click
</button>
Код Javascript
1
2
3
4
5
6
7
8
function zakaz()
{
data="<title>Новое окно</title><p>Это текст в новом окне</p>"+"<br><img width='300' height='200' src='1.jpg' alt='1' title='картинка'>"+"<br><button style='text-align:center' onclick='window.close();'>Закрыть</button>";
var win=window.open("","","width=400,height=300");
win.document.open();
win.document.write(data);
win.document.close();
}
Вопрос: Как разместить картинку с текстом в диве

Сейчас у меня дивы выглядят так (1 картинка,голубой фон).
А надо так (2 картинка).

Блок в котором распологается картинка и текст выглядит так:

CSS
1
2
3
4
5
6
7
.users{
    width: 80%;
    border-radius: 6px;
    background-color: #f5f7fa;
    margin: auto;
    margin-top: 10px;
}
Картинка и текст которые располагаются в диве users выглядят так:
CSS
1
2
3
4
5
6
7
8
9
10
.users img {
    border-radius: 6px;
}
 
 
.ctext{
    color: #3e6790;
    font-family: 'Roboto Condensed', sans-serif;
    text-decoration: none;
}
Что надо применить к .users img и .ctext что бы они располагались как на 2ой картинке?
Ответ:
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing:border-box}
        .box{
            display:table;
            width: 100%;
            background: #ccc;
            padding:10px;
        }
        .box>div{
            vertical-align: middle;
            display:table-cell
        }
        .box>div:first-child{
            width: 8%;
        }
        div>img{
            width: 100px;
        }
        .text>div{
            width: 49%;
            display: inline-block
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="http://mirgif.com/6/45.gif" alt="">
        </div>
        <div class="text">
            <div></div>
            <div>
                <span>Нухрик</span>
            </div>
        </div>
    </div>
    <div class="box">
        <div>
            <img src="http://mirgif.com/6/45.gif" alt="">
        </div>
        <div class="text">
            <div></div>
            <div>
                <span>Нухрик 2</span>
            </div>
        </div>
    </div>
    <div class="box">
        <div>
            <img src="http://mirgif.com/6/45.gif" alt="">
        </div>
        <div class="text">
            <div></div>
            <div>
                <span>Нухрик 3</span>
            </div>
        </div>
    </div>
</body>
</html>
Вопрос: Картинка + выравнивание текста

Нужно сделать так что б картинка обтекалась текстом а сам текст был как при align="justify"

Добавлено через 41 минуту
Или же другими словами картинку размером с абзац
Ответ:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    p{text-align: justify;color:#E52B50;}
    img{float:left;}
  </style>
</head>
<body>
  <p><img src="http://www.cyberforum.ru/images/cyberforum_logo.png" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia.<img src="http://www.cyberforum.ru/images/cyberforum_logo.png" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet error, sunt, veniam amet voluptatem laudantium consequuntur modi deserunt ipsa nesciunt placeat iure mollitia. Tempora ipsum eligendi, fugit asperiores esse error.Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</body>
</html>
Вопрос: Как отпустить картинку с текстом "Подробности в описании к видео" чуть ниже?

Привет!

Как отпустить картинку с текстом "Подробности в описании к видео" чуть ниже? Чтобы выло видно, что это говорит Алмаз из Уфы?

Сейчас выглядит немного коряво
Гуглил, но не смог найти подходящий тег для изображений.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Уфимцы на бизнес-тренингах Тони Роббинса</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="head">
<p><font face="Droit Serif"><em>Белеме барҙың ҡәҙере бар. <br>Выше всего ценятся знания (башкирская пословица). <br>Знание - половина ума (русская пословица).</em></font></p>
<img src="значок стрелка вниз.png" width="48" height="48" alt=""/><br>
<img src="самолетик.png" width="48" height="48" alt=""/><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xS7sIBztBCI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>
<br>
<br>
<br>
<img src="speech balloon with words.png" width="280" height="157.5" alt=""/><br>
<p><font face="Droit Serif"><a href="https://youtu.be/xS7sIBztBCI">Алмаз из Уфы (с 00:40:54): "Изменилось очень многое. Физиология... Изменения <br>в бизнесе, то есть финансы. Ну, мы и до этого были не бедные люди. Скачок был <br>феноменальный. Изменения впечатляющие. Серьезные цифры."</a></font></p>
<p><font face="Droit Serif"><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1">По� �мотреть другие видеоотзывы и обучающие ролики Тони Роббинса"</a></font><img src="значок класс.png" width="" height="" alt=""/><img src="значок play.png" width="" height="" alt=""/></p>
<br>
<br>
<br>
<p>Фото: (CC BY 2.0)</p>
</div>
</body>
</html>
Ответ:
отлично получилось
Вопрос: При наведении на картинку накладывается другая картинка

Как посредством css написать следующее: При наведении на картинку, на нее накладывается другая картинка, которую я сделал прозрачной. Данный метод нужен для видео, т.е при наведении на картинку появляется значок PLAY. Сделал через hover, но так картинка, которая должна накладываться, оказывается под первоначальной картинкой.
Ответ:
Сообщение от maximkou
для картинки в hover указать z-index.

Добавлено через 6 минут
Сейчас выложу вам примерчик небольшой.

Добавлено через 17 минут
Код 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
<html>
<head>
    <style type="text/css">
        #two
        {
            position: relative; top: -40px;width:40px; height: 40px; z-index: 50; opacity: 0.5;
        }
        #one
        {
            position: relative; z-index: 100;width:40px; height: 40px;
        }
        #one:hover
        {
            z-index: 10;
        }
        #two:hover
        {
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="width:40px; height: 40px;">
        <img id="one" src="img.jpg"/>
        <img id="two" src="img2.jpg"/>
    </div>
</body>
</html>
 
Например вот так, в нашем случае img2 лежит изнаально под начальной картинкой и ее прозрачность 50%
Использовал ваш код но теперь не могу выставить 4 кнопки в одну линию. Будет какой то совет?
Вопрос: Накладывается текст при увеличении текста

Доброго дня всем!

Подскажите пожалуйста, всю голову сломал.
Прикрутил увеличение текста для слабовидящих на основе скрипта:

Код PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
    var tgs = new Array( 'div','td','tr', 'a');
    var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
    var startSz = 2;
    function ts( trgt,inc ) {
      if (!document.getElementById) return
      var d = document,cEl = null,sz = startSz,i,j,cTags;
      sz += inc;
      if ( sz < 0 ) sz = 0;
      if ( sz > 6 ) sz = 6;
      startSz = sz;
      if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
      cEl.style.fontSize = szs[ sz ];
      for ( i = 0; i < tgs.length; i++ ) {
      cTags = cEl.getElementsByTagName( tgs[ i ] );
      for ( j = 0; j < cTags.length; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
      }
    }
    </script>
Где отмечены абзацы в <p> </p> идёт накладывание текста, без этого тега текст отображается нормально.
http://pixs.ru/showimage/Bezimyanni_...4_17145768.jpg

Может необходимо добавить дополнительное выравнивание?
Ответ: Fedor92, пробовал, видимо не там пробую.
В куске
Код PHP
1
2
3
4
body, td
{
    font: 32px/2.5 Tahoma, Verdana, Helvetica, sans-serif;
}
Отступ везде меняется, но не в основном тексте.

Добавлено через 1 минуту
Весь .css

Код PHP
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
html, body, form{   margin: 0;  padding: 0;}
 
 
 
body, td
{
    font-size: 12px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif;
    color: #575952;
    background-color: #fcfcfb;
    
}
 
p{margin: 0; padding: 0 0 8px 0; line-height:16px}
a:link,a:visited,a:active {color: #047ed3; text-decoration: underline;}
a:hover{color:#DD0000;}
 
 
 
 
 
#header{
    background: url(images/body_bg.jpg) repeat-x white; 
}
 
#logo{margin:  0 0 0 30px;}
#note{
width: 222px;
height: 147px;
background: url(images/note.gif) no-repeat; 
margin:  50px 0 0 30px;
text-align: center;
}
 
 
 
 
 
 
 
#head{padding: 0 30px 0 30px;}
#content{padding: 0 30px 0 30px; min-height: 400px}
 
#content ol, #content ul{
    padding: 0;
    margin: 0 0 10px 30px;
}
#content ul{
    list-style: square;
}
#content li{
    margin: 6px 0 0 0;
}
 
 
#content .c ol, #content .c  {  padding: 0;     margin: 0;}
 
 
#title{}
 
#breadcrumb{padding:0 0 20px 0; margin:0;list-style:none;}
#breadcrumb li{display:inline;}
#breadcrumb a{color: #7b7b7b; text-decoration: underline;}
 
 
/* Правая колонка */
#right{padding: 0 30px 0 0; width: 220px;}
 
#search{
    width:220px;
}
#search .q{
height:19px;    
border: 0px;
color: #7e6a58;
padding: 0 0 0 5px;
width: 95%;
}
 
#search .submit {
background: url(images/search.gif) no-repeat; width: 27px; height:27px; color:#FFFFFF; border:none;
margin: 0 0 0 5px;
cursor: pointer;
}
 
#box{width:220px; }
 
#box .top{background: url(images/box/top.gif) no-repeat; width: 220px; height:3px;}
#box .text{ padding:  5px 5px 0 8px;}
/*#box .bot1{background: url(images/box/bottom.gif)no-repeat ; width: 220px; height:60px;}*/
#box  .bot{ 
background-image: url(images/box/bottom.gif); 
background-repeat: no-repeat; 
width: 220px; 
height:6px;  
background-position: bottom; }
 
#box  .bot2{ 
background-image: url(images/box/bottom2.gif); 
background-repeat: no-repeat; 
width: 250px; 
height:6px;  
background-position: bottom; }
 
 
 
 
#box #blink{
padding: 0; 
margin: 0
}
 
#box #blink li{
list-style: none; 
padding: 0px 0px 10px 10px; 
background: url(images/icon/li_green.gif) no-repeat 0 6px;
}
 
 
 
#bottom td
{
background: url(images/bottom_bg.gif) repeat-x top;
height: 137px;
 
}
#bottom .copyright{
    margin:  0 0 10px 20px;
 
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
#menu_parent{padding:0 0 0 30px; margin: 0 0 0 0;}
#menu_parent a:link,#menu_parent a:visited,#menu_parent a:active {color: #797d70; text-decoration: underline;}
#menu_parent a:hover,#menu_parent li a.selected{color:#DD0000;}
 
/* Главное меню */
#menu_parent li{
list-style: none;
font-size:18px;
padding: 0 0 10px 0;
     
}
/* Подменю 2 */
#menu_parent ul{
padding: 15px 0 5px 0px;
margin: 0;
}
 
#menu_parent ul li{
list-style: none;
padding: 0 0 10px 10px;
font-size:14px;
}
 
#menu_parent ul li.selected{
list-style: none; 
background: url(images/icon/li_red.gif) no-repeat 0 6px;
}
/* Подменю 3 */
#menu_parent ul ul {
padding: 5px 0 0 0;
}
#menu_parent ul ul li{
font-size:11px;
padding: 0 0 5px 10px;
}
 
 
 
 
 
/* Меню однлуровневое */
#menu_one {
padding: 5px 0 5px 0px;
margin: 0;
}
 
#menu_one li{
list-style: none;
padding: 0 0 10px 10px;
font-size:14px;
background: url(images/icon/li_green.gif) no-repeat 0 6px;
}
 
 
 
.rndbxg b.trg, .rndbxg b.brg { display: block }
.rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
.rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
.rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
.rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
.rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
.rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
.rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
.rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
 
.wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
.wrndbxg2 b.trg b, .wrndbxg2 b.brg b { background: #cccccc }
 
.wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
.wrndbxg2 b.trg i, .wrndbxg2 b.brg i, .wrndbxg2 b.trg u, .wrndbxg2 b.brg u, .wrndbxg2 .rndbxCg { background: #ecffeb; border-color: #cccccc }
 
.grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
.rndbxg .rndbxCg .pad{padding: 6px 7px 3px 7px;}
 
 
.thumb-img {
 
    border-top:1px solid #CCC; border-left:1px solid #CCC; border-bottom:1px solid #AAA; border-right:1px solid #AAA;
    position:relative; 
    width:100px; height:70px;
    margin:5px; padding:5px;
    background:#FFF;
}
.thumb-inner {
    position:relative; overflow:hidden; width:100%; height:100%; 
}
.thumb-img img {
    border:0;
}
 
.thumb-strip {
    /*
    position:absolute; width:100px; height:18px; bottom:6px; left:6px;
    background:#FFF;
    
    filter: alpha(opacity=60);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    -moz-opacity: 0.60;
    opacity:0.60;
    */
}
.thumb-zoom {
    background:url(images/zoom.png) no-repeat;
    position:absolute; width:22px; height:22px;
    right:3px; bottom:3px;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
#form{width: 100%;}
#form td{vertical-align: top; padding: 0 5px 10px 0;}
#form input{}
#form .scroll{
    height: 100px; 
    width: 100%; 
    overflow: auto;
    font-size: 10px;
}
 
.w100{
    width:100%;
}
 
.w80{
    width:80%;
}
 
 
 
 
 
 
 
 
 
#tree{
    padding: 0; margin: 0;
}
#tree ul {
padding: 0;
margin: 10px 0 10px 0;
 
}
 
#tree li {
list-style: none;
font-size: 15px;
margin: 0 0 3px 20px;
}
 
 
 
table.border{
border-collapse:collapse
}
 
table.border td, table.border th{
white-space: normal;
border:1px solid #7b7b7b;
padding: 3px;
}
table.border th{
    background-color: #f5f5f5;
}
table.border p{
padding: 0 0 0 0;
margin: 0 0 5px 0;
}
 
.small{
font-size: 10px;
}
.small td{
font-size: 10px;
}
 
td .pr
{
padding: 0 20px 0 0;
}
 
 
 
table.none td, table.none  th{
border:none;
}
 
 
.photo{
float: right;
margin: 0 0 5px 10px;
border: 1px solid gray;
padding: 3px;
width:250px;
 
}
 
 
 
 
 
 
/* Стилизование ссылок на файлы */ 
a.ppt {background-image:url(images/icon/ppt.gif);}
a.pdf {background-image:url(images/icon/pdf.png);}
a.doc {background-image:url(images/icon/doc.png);}
a.jpg {background-image: url(images/icon/jpg.png);}
a.txt {background-image: url(images/icon/txt.png);}
a.archive {background-image: url(images/icon/archive.gif);}
a.email {background-image: url(images/icon/email.png);}
a.external {background-image: url(images/icon/ext_link.png);}
a.xls {background-image: url(images/icon/xls.gif);}
a.pdf,a.doc,a.jpg,a.txt,a.archive,a.email,a.external,a.xls,a.ppt{padding-left: 20px;line-height: 16px;background-position: left top; background-repeat: no-repeat;}
 
 
 
 
 
 
 
 
 
 
 
 
.sCaptioned{
    border:3px solid #C0C0C0;
    margin-bottom:20px;
    }
    
    
 
    
    
.small{
font-size: 10px;
}
 
.disable {color:gray;}
 
 
 
.question b
{font-weight:normal; color: #047ed3;border-bottom: 1px dashed #047ed3;  margin-bottom: 3px; text-decoration: none;cursor: pointer;}
 
 
 
 
#calendar a.free {color:#047ed3;text-decoration: none;}
#calendar a.free:hover {text-decoration: underline;}
 
#calendar a.pay {color:#c72522;text-decoration: none;}
#calendar a.pay:hover {text-decoration: underline;}
#calendar .border {border:none;  border-bottom:1px solid #f9d586;}
Добавлено через 3 минуты
Fedor92, спасибо за пинок!

Поиграю с параметром p{margin: 0; padding: 0 0 18px 0; line-height:26px}
И размер подгоню от каждого элемента.
Вопрос: Картинка и текст

Всем привет.

Столкнулся с такой проблемой: пришлось поставить картинку 16x16 и после нее текст, в итоге получилось так, что картинка высокая, а текст в самом низу. Как можно выровнять их вертикально по центру, т.е. чтобы они были на одном уровне? Изменять размер шрифта не вариант.

Спасибо.
Ответ:
чел воспользуйся этим кодом
PHP:

  1.  
  2. ("Content-type: image/png");
  3. $string = "test";
  4. $im    = ("img_01.jpg"); //тут где находится картинка
  5. $orange = ($im, 220, 210, 60);
  6. ($im, 3, 49, $string, $orange);
  7. ($im);
  8. ($im);
  9.  
Вопрос: Как оформить картинку и текст в один ряд?

В общем-то, сабж. Прикрепил картинку с примером того, что должно получится.
Ответ: Общий правильный вид кода:
Код HTML5
1
2
3
4
5
6
<div style="float: left;">
<img src="путь" ширина, высота и т д/>
</div>
<div style="float: left;">
текст
</div>
Вот результат:
Вопрос: Картинка накладывается на текст

Всем привет.
Можете подсказать, как сделать, чтобы картинка не накладывалась на текст?



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="news1">
<h1>Rush to protect lucrative antibody patents kicks into gear</h1>
<p id="header">A federal court decision has left universities and companies working to preserve intellectual property rights worth billions.</p>
<p сlass="text">US universities and biotechnology companies are scrambling to protect some of their most valuable assets: patents on antibodies. These immune-system molecules form the basis of drugs that rake in about US$100 billion per year. But securing intellectual-property rights to antibodies has become much more difficult, under guidelines released in February by the US Patent and Trademark Office (USPTO). The revised rules come after a federal court decision last October narrowed the scope of antibody patents — including those that have already been handed out. “People are still trying to make sense of it,” says Ulrich Storz, a patent attorney at Michalski HГјttermann Partner in DГјsseldorf, Germany. “These were very powerful patents.” Storz and others will discuss the implications of the shift on 6 June as part of a panel at the Biotechnology Innovation Organization annual meeting in Boston, Massachusetts.</p>
<p class="header_text">Broad protections</p>
<p сlass="text">Antibodies are proteins made by the immune system that bind to a specific target, such as a protein produced by a microbe, to interfere with its ability to promote disease. This has made them powerful drugs against some illnesses.</p>
<p сlass="text">Therapeutic antibodies are structurally complex, and many changes to their amino-acid sequences will not affect their function. So a patent based solely on an antibody’s sequence might be vulnerable to competition, says Barbara Rigby, a patent attorney at Dehns in Brighton, UK. A competitor could tweak the sequence to create a new antibody that performed the same function.</p>
<p сlass="text">In addition, for many years researchers lacked the technology to characterize an antibody fully. Given these challenges, the USPTO routinely granted broad patents that covered the suite of antibodies that attached to a particular target, rather than a specific antibody developed by an inventor.</p>
<div class="image"></div>
<p class="header_text">Specifics, please</p>
<p сlass="text">Over time, however, the technology for antibody analysis has improved. In 2014, two pharmaceutical heavyweights — Amgen of Thousand Oaks, California and Sanofi of Paris — launched a battle over patents covering a potentially lucrative antibody treatment for high cholesterol. The case reached a federal appeals court, where judges determined last year that inventors must provide a better description of the actual invention — a more defined set of antibodies — that they wanted to patent.</p>
<p сlass="text">The USPTO responded with new guidelines for its examiners this year. Since then, patent rejections have piled up. A few weeks ago, patent attorney John Kilyk of Leydig, Voit Mayer in Chicago, Illinois, learned that an application he was handling had run into trouble. “It was sufficient a few months ago, and now it’s not,” he says.</p>
<p сlass="text">The court ruling is retroactive, so the move also jeopardizes existing antibody patents. “There’s no doubt that the biotech companies that have been patenting antibodies are going to be harmed,” says Storz.</p>
<p class="header_text">Devil in the details</p>
<p сlass="text">Universities in particular might struggle to put together the information now needed to win an antibody patent, says Rodney Sparks, an attorney with the University of Virginia’s technology-transfer office in Charlottesville. Examiners are asking for more detail about the range of antibodies that can bind to a target, and specifically where on the target those antibodies will attach.</p>
<p сlass="text">“In universities, our guys want to publish,” Sparks says. “We don’t have the ability, typically, early on to make lots and lots and lots of antibodies and screen for all of those characteristics.” As a result, he says, universities will need to file narrower patents covering only a few of the possible antibodies, and might struggle to find companies willing to license them.</p>
<p сlass="text">And applicants are facing pushback from patent examiners who are extending the tightened rules on an invention’s written description to other kinds of patent applications, says Rigby. A broad patent for a method to treat disease by targeting a specific protein, she says, might now also be in question.</p>
<p сlass="text">Yet the shift has been an unexpected boon to some companies. Benjamin Doranz, president of Integral Molecular, a company in Philadelphia, Pennsylvania, that produces and analyses antibodies, says that clients used to request analyses mainly to learn more about how their antibodies functioned. But increasingly, he says, the company’s data are being used to bolster patent applications. Some of its clients are now patent-law firms.</p>
<p сlass="text">Patenting antibodies has become much more treacherous, Doranz says. “But they’re still of great value,” he says, “so everyone is trying to figure out the new patent landscape, and how do we navigate it.”</p>
</div>
<div class="news2">
<h1>Asteroid that killed the dinosaurs caused massive global warming</h1>
</div>
</div>
</body>
</html>


* {
margin: 0;
padding: 0;
background: Bisque;
}

.news1 {
position: relative;
top: 10px;
background: Bisque;
column-count: 6;
text-align: justify;
line-height: 1.2rem;
height: auto;
}
.news1>h1 {
text-align: center;
margin-bottom: 15px;
column-span: all;
}

#header {
font-style: italic;
font-size: 18px;
text-align: center;
margin-bottom: 15px;
column-span: all;
}
.news1 p {
margin-bottom: 15px;
}

.header_text {
margin-top: 15px;
margin-bottom: 15px;
font-weight: bold;
}
.image {
position: fixed;
width: 300px;
height: 200px;
background-image: url("d41586-018-05273-z_15789198.jpg");
background-position: top;
background-repeat: no-repeat;

}
.news2 {
position: relative;
top: 20px;
background: Bisque;
column-count: 6;
text-align: justify;
line-height: 1.2rem;
}
.news2>h1 {
text-align: center;
margin-bottom: 15px;
column-span: all;
}
Ответ:
Получилось заменив fixed на relative, хотя свойство position можно вообще убрать как оказалось
Вопрос: Удалить вложенные теги в определенных тегах, но сохранить текст и картинки, находящийся в глубине

Добрый день,

Есть тег div с классом .editor, внутри которого осуществляется чистка:

Сначала удаляю теги style, если тег - не картинка

Вложенность вложенных ненужных тегов может варьироватся (Как сгенерирует визуальный редактор, который нужен только для загрузки и позиционирования картинки в тексте).

Интересует как из:

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
<div class="editor">
  <p>
    <img style="float:left">
    <p>
      <span>
        <font>
          Текст 1
        </font>
      </span>
    </p>
  </p>
  <p>
    <p>
    <img style="float:left">
      <span>
        <font>
          Текст 3
        </font>
      </span>
    </p>
  </p>
  <ul>
    <li>
      <span>
        <font>
          <p>Текст 3</p>
        </font>
      </span>
    </li>
    <li>
      <font>
        <p>Текст 4</p>
      </font>
    </li>
  </ul>
</div>
Получить вот это:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="editor">
  <p>
    <img style="float:left">
    Текст 1
  </p>
  </p>
  <p>
  <p>
    <img style="float:left">
    Текст 2
  </p>
  </p>
  <ul>
    <li>
      Текст 3
    </li>
    <li>
      Текст 4
    </li>
  </ul>
</div>

Т.е. надо чистить все:
Javascript
1
2
3
$('.editor > p')
$('.editor > ul > li')
$('.editor > h[1-6]')

При этом важно, чтобы картинки, на каком бы уровне вложенности они не были, не удалялись.

Может еще кто-то чистил результат визуальных редакторов?)
Ответ: а что понимается по чисткой: удаление всего вложенного или лишних атрибутов?

Сообщение от EVOSandru6
Сначала удаляю теги style, если тег - не картинка
Тега style в вашем коде нет, есть атрибут style. Отсюда вопрос вы убираете атрибут style у всех тегов, кроме img? Или удаляете все теги, кроме img, у которых имеется атрибут style?

Добавлено через 9 минут
а в целом мне это напоминает классические задачки по "Алгоритмам и структурам данных" на обход деревьев. И в данном случае надо скорее всего проходить от листьев к стволу (root).