На един ред!

P

purko

Registered
<div class="kartinka"><img src="images/kartinka.gif"/></div>tekst tekst

Как да направя текста да излиза на един ред с картинката и да и се пада по средата, а не в долния край на картинката?
Ето каква имам досега
Код: 
.kartinka { padding-left:10px; padding-top:5px; padding-bottom: 5px;}

Преди това всичко това е в друг див!
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.kartinka { padding-left:10px; padding-top:5px; padding-bottom: 5px; float:left;}
</style>
</head>

<body>
<div class="kartinka"><img src="emagi.png"/><span style="position:relative; top:-15px;">sgh sdfhs dfh sdfh</span></div>
</body>
</html>
Увеличете...
Вече според това, каква стойност задаваш:
top:-15px;
Увеличете...
може да регулираш височината
 
Код: 
.igrachi { width: 550px; overflow: hidden; }
		.igrachi .bg-gore { background:url(../images/title-bg-ver.gif) repeat-x 0 0 #eef8dc;}
		.igrachi .bg-dolu { background:url(../images/title-border.gif) repeat-x 0 bottom;}
		.igrachi .bg-lqvo { background:url(../images/title-border.gif) repeat-y left 0;}
		.igrachi .bg-dqsno { background:url(../images/title-border.gif) repeat-y right 0;}
		.igrachi .ugul-lqvo-gore { background:url(../images/title-corner-left-top.gif) no-repeat 0 0;}
		.igrachi .ugul-dqsno-gore { background:url(../images/title-corner-right-top.gif) no-repeat right 0;}
		.igrachi .ugul-lqvo-dolu { background:url(../images/title-corner-left-bot.gif) no-repeat 0 bottom;}
		.igrachi .ugul-dqsno-gore { background:url(../images/title-corner-right-bot.gif) no-repeat right bottom; overflow:hidden; }
		.igrachi .text {vertical-align:center;}
		.igrachi .kartinka { padding-left:10px; padding-top:5px; padding-bottom: 5px; float:left; }
Е да ама имам това.
И вижте кво става
6jd92kcd30dzzt81ev0z.gif
 
Код: 
  <style>
  img{float: left;}
  p{clear: right;}
  </style>


Код: 
  <div>
  <img src="картинка"> <p>asdas<br />saddassda</p>
  
  </div>

;)
 
Код: 
<table style="vertical-align:middle;">
			<tr>
				<td>
					<img src="pic.jpg"/>
				</td>
				<td>
					sdfdsf sdf df dfsdsfsdfssfsdfdsf
				</td>
			</tr>
</table>
Това е най лесния и удобен начин.

Ако се търси динамика - картинката да е различна върши идеална работа , от колкото да задаваш падинги и т.н.
 
shterev каза:
Код: 
<table style="vertical-align:middle;">
			<tr>
				<td>
					<img src="pic.jpg"/>
				</td>
				<td>
					sdfdsf sdf df dfsdsfsdfssfsdfdsf
				</td>
			</tr>
</table>
Това е най лесния и удобен начин.

Ако се търси динамика - картинката да е различна върши идеална работа , от колкото да задаваш падинги и т.н.
Увеличете...

И при моето има много голяма динамика :) Твоето не ми харесва, защото примерно ако имаме една картинка и искаме текста да продължи и под нея, той няма да продължи, защото е в отделна клетка. Ще си продължи надоло, но под картинката ще остане празно.
 
deam0n каза:
shterev каза:
Код: 
<table style="vertical-align:middle;">
			<tr>
				<td>
					<img src="pic.jpg"/>
				</td>
				<td>
					sdfdsf sdf df dfsdsfsdfssfsdfdsf
				</td>
			</tr>
</table>
Това е най лесния и удобен начин.

Ако се търси динамика - картинката да е различна върши идеална работа , от колкото да задаваш падинги и т.н.
Увеличете...

И при моето има много голяма динамика :) Твоето не ми харесва, защото примерно ако имаме една картинка и искаме текста да продължи и под нея, той няма да продължи, защото е в отделна клетка. Ще си продължи надоло, но под картинката ще остане празно.
Увеличете...

като е тай работата се прави с падинг или за по-добър резултат трябва да се ползва js ,който да езима размера на картинката и да задава падинг на елемента където е текста.То зависи размерите на картинката до колко са динамични.А тук не е казал , че иска да обхожда картинката.
 
@purko аз в твоя случай бих го направил, картинката да е бекграунд, не виждам кое може а му е динамичното на това 'човече' и текста как ще слиза на долу. Бекграунда на човечето и заобленото поле.После с падинг ще си наместя къде да е текста. Не да си играя с <img/>
 
Ами това човече ще сте сменя в зависимост потребителя дали е онлайн или не :wink:
Текста няма да става дълъг е дя отива под картинката, защото ще е само една дума.
Няма да стане с фон понеже може да се налага да е различна всеки път :wink:
 
purko каза:
Ами това човече ще сте сменя в зависимост потребителя дали е онлайн или не :wink:
Текста няма да става дълъг е дя отива под картинката, защото ще е само една дума.
Няма да стане с фон понеже може да се налага да е различна всеки път :wink:
Увеличете...
Защо да не стане да е бекграунд? Просто ще зададеш пътя така:

<div class="change" style="background-image:url(dinamic.gif);">online</div>

css:

.change{
background: no-repeat left top;
padding:3px 0 0 10px;
width:100px;
height20px;
}

Какъв проблема?Просто вместо да задаваш пътя на имг тага го задаваш да е като бекграунд.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе