Подравняване на текст и снимка ?

C

confiscate

Registered
Здравейте,
Искам да получа следнто http://store.picbg.net/pubpic/A8/43/12d1389a4a38a843.jpg
Текстът и картинката да са на една линия и да са в средата на очертания бар.
Пробвах по следния начин: направих един див , зададох му фон самия очертан градиент и след това в този див сложих параграф включващ картинката и текста и на параграфа зададох стил:
Код: 
vertical-align: middle;
, но не се получи :?

Бихте ли ми помогнали ?

Благодаря предварително за помощта !!!
 
Предполагам нещо не си направил както трябва дай код , ако искаш или виж направо това :wink:
http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html
 
confiscate каза:
Зададох му , пак не се получи :?Мести се целият бар , незнайно защо
Увеличете...

Я дай кода, да видим какво не се получава?
vertical-align: middle; се ползва само от таблици ;)
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<meta name="description" content="Изработка на уеб сайтове за малкия и среден бизнес на топ цени" /> 
<meta name="keywords" content="уеб , сайт , дизайн , изработка " />
<title>VEM WEB</title>
<link rel='shortcut icon' href='favicon.ico'/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="leftTopBar">
<p> 
  <img src="img/arrowBar.png" width="14" height="14" alt="arrow" />
  TEXT
   </p>
</div>
</div>
</body>
</html>

Код: 
/* Main style */
body { margin: 0; padding:0; font-size:14px; line-height:1.5em; font-family: Arial,Verdena,sans-serif; text-align:left; background: #566d7b;}
img { border:none;}

/* Container */
#container { margin: 0 auto; width:1000px;}

.leftTopBar { background: url(img/leftTopBar.jpg) no-repeat; width:685px; height:40px;}
.leftTopBar p{ padding-top: 13px; padding-left:13px;}
 
И в момента както ти е стрелката във .leftTopBar p дива е нормално всичко да се смъква със padding-а ;)
 
То принципно си работи , добре се вижда в браузарите , но като го гледам в dreamweaver пада по този начин: http://store.picbg.net/pubpic/F7/65/cf22af630373f765.jpg и за това си мисля , че нещо не е наред. И забелязах , че това е заради параграфа ако го направя този текст като линк го няма този проблем.
 
след като това няма да е иконка за кликане, защо не я зададеш като бекраунд, мн. по-добре е от колкото да е картинка

HTML: 
<div class="text">Текст</div>

.text{
  padding:0 0 0 0;
  width:150px;
  height:30px;
 background: url(images/image/gif) no-repeat 0px 5px;
}
Нещо такова, все пак не знам на изуст ;)
 
Ами принципно нищо , ама не се ли отразява после в самия изглед при някои резолюции и браузери. Иначе май ще го заредя като background както каза " shterev " :wink: Нов съм в това начинание , отдавна правя дизайни и се занимавам с това , но преди ги кодирах с готов плъгин на photoshop. Сега реших да се науча сам да си ги кодирам , и се извинявам ако задавам тъпи въпроси ;)
 
Ко речи? Не, точно това няма да причини размествания! Не я гледай тази програма! Стреми се да изглежда добре при теб и кода ти да е валиден!
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе