Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: кросбраузерная картинка + рядом текст
 
 автор: Axxil   (29.07.2008 в 09:25)   письмо автору
 
 

Подскажите, как грамотно делать такую вёрстку:

Иконка + рядом текст. Если просто ставить <img src="/icon/path/"> Some text , то текст слазит скачет то наверх то вниз. Если ставить у картинки align то картинка убегает вообще непонятно куда.

Я сейчас делаю иконку бекграундом. Т.е. если надо сделать линк с иконкой то
<a style="background-image:url('/path/to/ico/');padding-left:20;">Some text</a>


То иногда надо чтобы картинка явно прописана в коде.

Как сделать такое?

  Ответить  
 
 автор: AlexSol   (29.07.2008 в 09:56)   письмо автору
 
   для: Axxil   (29.07.2008 в 09:25)
 

<div> <img src="xxx" styl="float:left"> xxx
<div style="clear:both"></div>
</div>

  Ответить  
 
 автор: Axxil   (29.07.2008 в 10:23)   письмо автору
3.2 Кб
 
   для: AlexSol   (29.07.2008 в 09:56)
 

Всё равно текст выравнивается по нижней границе иконки (см. аттач)

  Ответить  
 
 автор: AlexSol   (29.07.2008 в 10:25)   письмо автору
 
   для: Axxil   (29.07.2008 в 10:23)
 

margin-top для картинки или line-height текту. может тексту тоже float

  Ответить  
 
 автор: Axxil   (29.07.2008 в 10:37)   письмо автору
 
   для: AlexSol   (29.07.2008 в 10:25)
 

Ага, сенкс, line-height - камень преткновения тут был.

Итоговое решение, если кому надо будет.

<style>
  dd, dt{float:left;}
  dt{line-height:0.8em;} /*подбирается вручную*/
</style>
<dl><dd><img src="/path/"></dd><dt>&nbsp;text</dt></dl>

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования