Проблема с размещением картинки относительно текста

Zexler · October 17, 2009

Возникла проблема с размещением картинки относительно текста:

<html>
<head>
<title>Site</title>
 <style type="text/css">
	BODY { 
	 font-family: Arial, Helvetica, sans-serif;
	}
	.text { 
	 font-family: Arial, Helvetica, sans-serif;
	 color: black; 
	 font-size: 13px;
	 position: relative;

	}
	.top {
	 font-family: Comic Sans MS, sans-serif;
	 color: white;
	 font-size: 32pt;
	}
	.pic {
	color: #2E5C82;
	}
	.zag {
	font-size: large;
	font-family: Comic Sans MS, sans-serif;
	color: #2E5C82;
	}
  </style> 
</head>
<body>
<center>
<table><tr><td width=500>
<span class="zag">
<p style="text-align: center;">
Орки</span>
</p>

<span class="pic">
<img bordercolor="#9CBCDF" border="5" align="right" width=200 height=200>
</span>

<span class="text">
<span class="zag">
Ранняя история
</span>
<br>
Орки Дренора жили в благородном шаманистском обществе, кочуя племенами по зелёным полям Награнда, 

их пыльного мира, более 5000 лет. Они жили в мире c дренеями и воевали с ограми. В конце концов, 

присутствие дренеев привело Пылающий Легион на Дренор. Могущественный повелитель демонов Кил'джеден 

обманом заставил уважаемого шамана Нер'зула поверить в то, что дренеи являлись врагами орков. 

Взамен службы Легиону Нер'зул и все орки получили силы, необходимые для захвата новых земель. Для 

этого оркам пришлось испить крови Маннороха Разрушителя. Гром Хеллскрим был первым и убедил других 

вождей кланов последовать за ним. Но вождь клана Морозных Волков (англ. Frostwolf) Дуротан начал 

подозревать неладное и не дал своему клану пить. Из-за этого Гул'дан (бывший ученик Нер'зула) 

изгнал клан Морозных Волков из Орды. Затем он сделал легкоуправляемого Блэкхенда вождём всех орков. 

Чтобы управлять Ордой из-за кулис, Гул'дан создал Теневой Совет (англ. Shadow Council), состоящий 

из него и других «достойных» колдунов. Блэкхенд тоже был членом совета, но на самом деле Ордой 

управлял Гул'дан.
</td></tr></table>
</center>
</body>
</html>

Вы видите пример, в котором картинка начинаеться как бы вместе с заглавием, а мне надо сделать чтобы она была на уровне обычного текста. То есть на 1 строку смещенна вниз она должна быть. Пороботал с , но ничего не получилось!

Помогите пожалуйста!

s0rr0w · October 18, 2009

Возникла проблема с размещением картинки относительно текста:
Вы видите пример, в котором картинка начинаеться как бы вместе с заглавием, а мне надо сделать чтобы она была на уровне обычного текста. То есть на 1 строку смещенна вниз она должна быть. Пороботал с , но ничего не получилось!
Помогите пожалуйста!

Для начала исправьте все синтаксические ошибки. Ваш код не валиден.

Zexler · October 18, 2009

Для начала исправьте все синтаксические ошибки. Ваш код не валиден.

о_О

А чем именно, можешь сказать? А то как-то не целесообразно говорить что он не очень точный (строгий), и не говорить в чем именно. Я ж сюда за помощью да советом обратился, а не в обычных указаниях что что-то не так =)

s0rr0w · October 18, 2009

о_О
А чем именно, можешь сказать? А то как-то не целесообразно говорить что он не очень точный (строгий), и не говорить в чем именно. Я ж сюда за помощью да советом обратился, а не в обычных указаниях что что-то не так =)

Берете вот этот ресурс http://validator.w3.org/ и проверяете им свою страницу.

Или устанавливаете вот этот плагин к Firefox'у: https://addons.mozilla.org/en-US/firefox/addon/249

Я вам очень ценный совет дал - привести для начала код в порядок.

PoshtarBoba · October 21, 2009

У тебя не закрыт и вообще, некошерный код какой-то.

и в заглавии теги и непоочередно закрываются.

<h2> - используй для заглавия

- используй для абзацев.

- инлайновый тег, то есть, внутристрочный. Используй его для изменения свойств кусочка текста в строке (изменения цвета, шрифта; для выделения жирным используй )

Чтоб картинка вклеилась в текст - приклей её к краю свойством float вначале строки и текст будет начинаться у её верхнего края и обтекать её к низу. Задав margin или padding:0 8px 8px 0; - убережешь картинку от прилипания к ней текста вплотную (т.к. у тебя есть рамка вокруг картинки, то задавать нужно маргин).

<html><head>
<title>Site</title>
<style type="text/css">
 BODY {font:normal 13px Arial, Helvetica, sans-serif; color: black;}
 .pic {color: #2E5C82; float:left; margin:0 12px 12px 0; padding:0;}
 h2 {font:bold 22px Comic Sans MS, sans-serif; color: #2E5C82;}
</style>
</head><body><center>
<table><tr><td width=500>
<center><h2>Орки</h2></center>
<h2>Ранняя история</h2>
<img class="pic" bordercolor="#9CBCDF" border="5" width="200" height="200" />
<p>Орки Дренора жили в благородном шаманистском обществе, кочуя племенами по зелёным полям Награнда,
их пыльного мира, более 5000 лет. Они жили в мире c дренеями и воевали с ограми. В конце концов,
присутствие дренеев привело Пылающий Легион на Дренор. Могущественный повелитель демонов Кил'джеден
обманом заставил уважаемого шамана Нер'зула поверить в то, что дренеи являлись врагами орков.</p>

<p>Взамен службы Легиону Нер'зул и все орки получили силы, необходимые для захвата новых земель. Для
этого оркам пришлось испить крови Маннороха Разрушителя. Гром Хеллскрим был первым и убедил других
вождей кланов последовать за ним. Но вождь клана Морозных Волков (англ. Frostwolf) Дуротан начал
подозревать неладное и не дал своему клану пить. Из-за этого Гул'дан (бывший ученик Нер'зула)
изгнал клан Морозных Волков из Орды. Затем он сделал легкоуправляемого Блэкхенда вождём всех орков.
Чтобы управлять Ордой из-за кулис, Гул'дан создал Теневой Совет (англ. Shadow Council), состоящий
из него и других «достойных» колдунов. Блэкхенд тоже был членом совета, но на самом деле Ордой
управлял Гул'дан.</p>
</td></tr></table>
</center>
</body>
</html>

Sign In

Проблема с размещением картинки относительно текста

Question

Zexler

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Zexler

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information