Jump to content
  • 0

Вставка картинки.

LOLA1111

Asked by LOLA1111,

 Share

Question

LOLA1111 Explorer

LOLA1111

Posted
Posted

Всем привет!

У меня два глупых вопроса :rolleyes:

Вопрос 1: У меня не получается вставить ДВЕ картинки РЯДОМ!

Пишу вот так:

<H5>Подмосковье</H5><img src="images/88.jpg" width="200" height="150">

<H5>Краснодарский край</H5><img src="images/55.jpg" width="200" height="150">

и получается одна картинка сверху, другая--снизу, а мне надо, чтобы они стояли рядом. ;)

Вопрос 2: И слово "Подмосковье" у меня получается НАД (или ПОД) картинкой, а я хочу, чтобы оно было НА картинке.

Как это осуществить? Что нужно сделать?

Всем спасибо.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
onqu Explorer

onqu

Posted
Posted

Можно таблицей.

Можно еще так:

<H5 style="display:inline-block; width:200px; height:200px; background: url(images/88.jpg); text-align: center;zoom:1;*display:inline;">Подмосковье</H5>

<H5 style="display:inline-block; width:200px; height:200px; background: url(images/55.jpg); text-align: center;zoom:1;*display:inline;">Краснодарский край</H5>

Еще так:

<H5 style="display:block; float:left; width:200px; height:200px; background: url(images/88.jpg); text-align: center;">Подмосковье</H5>

<H5 style="display:block; float:left; width:200px; height:200px; background: url(images/55.jpg); text-align: center;">Краснодарский край</H5>

<p style=" clear:left;"><p>

И еще кучи способов есть...

Link to comment
Share on other sites
  • 0
lancer Explorer

lancer

Posted
Posted (edited)

Я придерживаюсь мнения, что заголовочные теги могут вкладываться в <li></li> только в том случае, если каждый отдельный <li> может быть заголовоком страницы или ее раздела. И при этом они расположены списком. Пример: главное меню сайта, в нем каждый отдельный <li> является заголовком для своей страницы.

Иначе, я верстаю это либо просто списком, либо просто заголовками.

Города бы я сверстал все же в <ol></ol>, а не в <ul></ul>, так как это хоть и не нумерованный, но упорядоченный по алфавиту список. Но тут уже дело предпочтений.

Edited by lancer
Link to comment
Share on other sites
  • 0
LOLA1111 Explorer

LOLA1111

Posted
  • Author
Posted

Всем спасибо за ответы.

onqu, делала как вы написали, все получилось, но теперь размеры картинки никак подобрать не могу! :rolleyes: , если ширину и высоту уменьшить, картинки полностью не видно, а если увеличить,то картинка слишком большая — не одно, так другое! ;)

А вообще, я хочу, чтобы было как на этом сайте ( http://www.delfin-tour.ru/ ).

Видите, там стоят картинки рядом с друг другом, а на них города- ссылки.

Вот такого результата я хочу добиться! :)

Link to comment
Share on other sites
  • 0
lancer Explorer

lancer

Posted
Posted (edited)
Какая разница, это список, а как он оформлен это уже другое дело, хотя я с семантикой не особо дружу...

Victor, форматирование текста заголовками — это синтаксическое(семантическое) форматирование, но никак не оформительское.

Да и вообще за оформление должно отвечать только CSS. (Не затрагиваем тему отключенных CSS, поскольку, тогда оформления впринципе нет никакого, кроме как элементарно логического)

LOLA1111, выложите архив с вашей версткой и скажите, что у вас не получается в вашей верстке. Пока что ничего не понятно.

Edited by lancer
Link to comment
Share on other sites
  • 0
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted
Victor, форматирование текста заголовками — это синтаксическое(семантическое) форматирование, но никак не оформительское.

Я имел ввиду цифровой и маркерованый список. Есть ли разница, если потом все равно будем применять list-style-type:none; ?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

LOLA1111 Короче:

то, что вы хотите получить, делается на списках

1) Каждому li назначается Ширина, Высота и Фон

2) Каждый li получает обтекание слева : float: left; и отступы от соседних li

3) Уже потом в каждом li пишется текст, или что вы там хотите

4) ВСЁ!!! :rolleyes:

Кстати на том сайте это делается таблицей и каждый квадрат с текстом - это ячейка, но это по моему мнению не удобно,много лишних элементов, и труднее управлять всей этой конструкцией, лучше делать списком всёже, как я написал ;)

Edited by psywalker
Link to comment
Share on other sites
  • 0
LOLA1111 Explorer

LOLA1111

Posted
  • Author
Posted
LOLA1111 Короче:

то, что вы хотите получить, делается на списках

1) Каждому li назначается Ширина, Высота и Фон

2) Каждый li получает обтекание слева : float: left; и отступы от соседних li

3) Уже потом в каждом li пишется текст, или что вы там хотите

4) ВСЁ!!! :rolleyes:

Кстати на том сайте это делается таблицей и каждый квадрат с текстом - это ячейка, но это по моему мнению не удобно,много лишних элементов, и труднее управлять всей этой конструкцией, лучше делать списком всёже, как я написал :)

Списком не получается да и не устривают меня эти списки!!

И делаю я таблицей. И таблица в 2 строки. Первая строка--шапка, а во вторую строку я хотела вставить эти картинки-квадратики. ;)

Но ничего не получается и объяснить конкретно никто не может.

Я не могу вникнуть и понять логику.

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

Всем спасибо!

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

LOLA1111

Не нервничай дружище, я тебе сделаю в двух вариантах, и таблицей и списком, может чуть позже, а может завтра, потерпи немного)))

Я не могу вникнуть и понять логику.

Да естественно, все не могли сначала понять, это со временем всё приходит, с опытом, все так начинали, так что не паникуй, всё у тя получиться, а насчёт Списков, это ты зря, списками делать намного удобнее, вот я те покажу пример, ты сам поймёшь, жди :rolleyes:

Вот смотри вобщем, тут Два варианта, Таблицей и Списком: http://psywalker.ru/table-div/ ;)

Edited by psywalker
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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept