Как правильно расположить изображение на веб-странице, задав его координаты с помощью CSS?

[motek]

Что касается правил, то это изначальные правила, как таблица умножения в школе, еще до того как мы начинаем изучать элементы родители.

можно ссылочку на эти правила?

Если же нам необходимо оборвать поток текста, например, строчного элемента, то мы пользуемся тегом <br> , вставляя его в конце строки в месте разрыва.

обилие "быров" на странице - признак говнокода

Например блочные элементы. Когда мы задаем их, нам не нужно задумываться о разрыве строки. Они будут располагаться один под другим с определенным отступом задавая новый абзац.

не так...блочный элемент занимает все пространство окна браузера, если у него не выставлены размеры

И суть была не в том, что изображено на картинке, а в том как позиционировать это изображение относительно другого. Представьте, что там не название сайта, а изображение велосипеда к примеру.

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

 

[Deni]

[member=motek],
1.Букварь:
авторы: Эрик Фримен, Элизабет Фримен
название: Изучаем HTML, XHTML и CSS
глава 12: Разметка и позиционирование (Определение потока)

Это действительно букварь и вам как специалисту это будет не интересно. Там азы.
Я просто указываю источник по вашей просьбе, где это можно найти.

2. Со вторым замечанием я полностью согласен. Речь просто шла не про <br>. Я пытался до вас донести о чем я говорил.
Что блочные элементы заливаются на страницу сверху вниз, а строчные один за другим слева на право на сколько хватает ширины окна браузера, а затем переход на следующую строку. Это принцип заливки элементов - основной алгоритм организации потока, а не какой-то конкретный код. Я наверное не очень доходчиво изъясняюсь. Я не говорю о конкретном коде или правилах его коректного написания, я говорю о последовательности чтения кода браузером.

3. Тоже самое, что и 2. Я свами полностью согласен, но я не про то) Попытайтесь абстрагироваться и понять меня.

4. Совершенно верно. Но в этом случае мы используем позиционирование.


Изначально мой вопрос был адресован господину BaNru, т.к. он предложил сверстать данную страницу, не используя позиционирования. Возможно я что-то не так понял из его слов.
Я не пытаюсь спорить с такими специалистами как вы, я пытаюсь понять.

 

[BaNru]

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

Мухи отдельно, котлеты отдельно
Т.е. стили отдельно, HTML отдельно.
Есть такое слово background.
А с приходом CSS3 и мультибэкгроунд.
А еще есть псевдоэлементы.

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

Теоретические знания это очень хорошо. Но надо понимать, что технологии развиваются. И сейчас, так называемые потоки имеют малый вес. Главное семантика. И ещё чуть-чуть и придут на помощь grid, flex (улучшеный box). Флексбоксы почти пришли, уже можно пользоваться при graceful degradation.

 

[Deni]

[member=BaNru], согласен. Практики очень мало. Можно сказать я даже в ней нуждаюсь, поэтому и задаю вопросы.
Если есть возможность помочь с практическими примерами и задачами, буду признателен.

И какие могут быть обиды) Я пытаюсь учиться, а не тупо спорить. Суть моих вопросов не в том, что я пытаюсь что-то доказать,
а в том, чтобы понять.

Благодарю за ответ.

 

[BaNru]

Если есть возможность помочь с практическими примерами и задачами, буду признателен.

1) Ищи в интете макеты, коих много и верстай. Этим ты будешь увеличивать скорость. И конечно совершенствовать можно постоянно (семантика, отделяя мух от котлет), ища варианты реализациям.
2) Старайся отвечать на вопросы на форумах, можно даже старые (отвечать для себя). Искать разные варианты решения. Тут даже не важно, сам придумаешь, или где-то подсмотришь. Во втором случае главное понять почему оно так, а не иначе.
3) Придумывать себе задачки. Я например, когда писал у себя в блоге статьи про анимации CSS3, для закрепления результата решил написать слайдер на CSS3. Или допустим делал меню когда-то, ради спортивного интереса - искал разные варианты решения. Конечно не довел результат до конца, до того что требовалось, но познал много интересного. И это не единичные случаи.

В общем задачи найти и придумать не сложно, было бы желание.

 

[Deni]

[member=BaNru], спасибо за совет.
Если для начала есть более приземленные советы, а не общие, то подскажите подробнее.
То что нужно работать и искать, это я знаю, чем и занимаюсь. А вот на сколько я это правильно делаю - это вопрос...
Поэтому у меня и привалируют теоретические знания на данном этапе над практикой.
Я конечно не прошу решения задач за меня, т.е. я скорее нуждаюсь в удочке, а не в рыбе.
Просто сейчас важно выбрать правильную "удочку". Если собираешься ловить сначала в реке, то для этого не нужно покупать
спининг для ловли акул в океане... До всего важно доходить последовательно и выбирать для этого оптимальный путь.
Поэтому я сейчас нахожусь на неком распутье... Нужны задачи, которые необходимо решать, а я пока их либо нахожу случайно,
как основной вопрос данный темы, либо сам для себя пытаюсь генерировать. Но когда пытаешься помочь в решении проблемы
для кого-то, либо просто поучавствовать в этом решении, предприняв попытку, то это создает дополнительный стимул ответственности
и разнообразия. Надеюсь, что я достаточно ясно объясняю ситуацию...

 

[BaNru]

Ну я вроде и так сказал приземлено. Приземленнее - это только задачи ставить.
Могу добавить только, что при поиске решения - лучше самому попытаться решить задачу, потом поискать как другие делают тоже самое. Брать от них лучшее. Смотреть чужой код, и не кого либо, в кто себя положительно зарекомендовал. Блоги ITишников. Даже тот же хабр, там есть решения многих задач, рекомендации. Есть много зарубежных хороших сайтов,например
http://www.cssplay.co.uk/
http://net.tutsplus.com/
http://css-tricks.com/
http://www.css3.info/
И обязательно комментарии.
Ну и видеоуроки обходить стороной. Видеокурсы, типа яндекса, можно посматривать, хотя они мне не нравятся.
Верстать макеты, и верстать - не ища легких путей. Применять то, чего не знаешь или плохо знаешь, изучая/подкрепляя практикой.

Ну и еще несколько ссылок из закладок
http://xiper.net/
http://whatwg.org/
http://w3.org/

 

[Deni]

[member=BaNru], спасибо

 

[Oleg556677]

Спасибо всем ответившим за полезные советы!