Jump to content
  • 0

Правильное выравнивание картинки в текст контента


Igorpurgen
 Share

Question

Добрый день! Вот хочу поделится траблой, или точнее просто своей озабоченностью по поводу размещения картинок в контенте сайта.

Например, есть у нас некоторая область сайта, которую мы никогда не меняем, т.е. например футер, хедер, не суть.

И есть у нас область контента, на которой размещены, как правило, текст и т.д.

Контент на каждой странице разный, но суть размещения, т.е. как он размещается на странице одинакова.

Вопрос заключается в том что я не знаю как лучше разместить картинки внутри текста контента, это приходится делать часто, и как то хочется унифицировать этот способ, к тому же чтобы он был правилен, к примеру:

1. Картинка в ссылке идет между текстом. Охота, чтобы картинка была по центру. Пишем класс для img, где указываем display:block; margin:auto. Да она у нас по центру, все бы было бы хорошо если бы не была бы картинка ссылкой. Получается, что ссылка идет на весь блок. Как быть я не знаю. Ну уж больно не охота использовать тег div в контенте. Есть ли какой-либо альтернативный способ занесения контента на сайт в таком виде.

<html><p>Текст</p>

<a href="#"><img src="" alt="" /></a>

<p>Текст</p></html>

2. Далее слышал, что считается, что по правильному у тегов вообще не должно быть никаких атрибутов, т.е. все должно писаться классами, и в css. Отсюда следующий вопрос. Например, у нас перед текстом стоит картинка, и текст должен как бы обтекать картинку справа. Как сделать так, чтобы img был без атрибута align, но с тем же эффектом. А так же я глянул на сайте http://htmlbook.ru/html/img и как бы понял, что получается, что img везде зелененький, т.е. его можно использовать во всех браузерах, а атрибут align http://htmlbook.ru/html/img/align подсвечивается фиолетовым и красненьким HTML:4.01 5.0 и XHTML:1.0 1.1. Что это значит точно не знаю, но на вид кажется что это значит, что использовать данный атрибут не желательно, или это мне кажется в силу своего ассоциативного мышления, или просто мне до этого сказали, что везде нужно использовать классы и не использовать атрибуты.

<html><img src="" alt="" />

<p>Текст</p></html>

К чему я это все сказал, я если честно не верстальщик. Я заношу контент. Но, занося его, мне бы хотелось делать это, по крайней мере, качественно. Чтобы можно было легко в последствии использоваться css. Мне бы хотелось узнать, есть ли у кого нибудь свои методы (способы) работы в данном случае с картинками. Мне все это видится так, что нужно будет в любом случае писать классы для img'гов. Первый в по центру, второй по еще чему нибудь и так далее. Или же использовать все таки атрибут align. Кроме выравнивания по центру. Вот хотелось бы услышать как Вы думаете об этом, может быть есть какой-нибудь совет здесь. Плюс, как Вы бы посоветовали назвать имя класса для картинок, например выравнивающихся по центру, если учесть, что класс будет использоваться часто, на всем сайте, в контенте. Большое спасибо, если дочитали до конца или хотя бы хоть сколько ниубдь))) -_-

Edited by Igorpurgen
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

1. блок и маргин применять к <a>

2. float

имхо(!) при заполнении контента не должно быть классов так как классы всё-таки для чего-то большого, обобщающего. Я лично всё пихаю в параметр style. По поводу неиспользования параметров вы совершенно правы, их не должно быть. Естественно за исключением href, alt, src, style, class, id и прочего...

Link to comment
Share on other sites

  • 0
1. блок и маргин применять к <a>

Все равно ссылка будет тянуться на всю ширину. Тут смысл в том, что поля (margin) являются продолжением элемента.

Насколько я знаю (а знаю я не очень много -_-, то красивого решения для картинки с ссылкой по центру нет, только таблицы использовать.

Естественно за исключением href, alt, src, style, class, id и прочего...

А еще для изображения можно width и height применить. Ведь если изображения не является частью дизайна, то логичнее указать это прям в теге без использования CSS.

Edited by Serlutin
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy