Jump to content
  • 0

Маркированный список

lena vereschagina

Asked by lena vereschagina,

 Share

Question

lena vereschagina Explorer

lena vereschagina

Posted
Posted

Это моя первая работа с css поэтому заранее прошк прощения за тупость. Подскажите, как сделать: нужно в css файле шаблона сайта создать такой стиль, чтобы маркированный список выводился с красными квадратиками (т.е. с заданными картинками, вместо там точечек итп), но при этом оставалась возможность создавать и обыкновенные маркированныке списки (с точечками) а то пока на сайте списки выглядят как абзацы (

)

с рядом поставленными картинками ( ) :)

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
maddogrts Explorer

maddogrts

Posted
Posted

давай для того чтобы придать реалистичность, вы что нибудь выложите, например минимальный код страницы с вашим списком (именно минимальный)

И будем учится.

А то если вам написать то вы и забудете через час )

Link to comment
Share on other sites
  • 0
mav Explorer

mav

Posted
Posted

стиль "list-style-image: url("картинко.gif")" надобно прописывать для тэга

то есть такого вида будет код:

<html>
<head>
<style>
.red {
 list-style-image: url("чегототамкрасное.ххх");
}

.blue {
 list-style-image: url("чегототамсинее.ххх");
}

</style>
</head>
<body>

<ul class="red">
 <li>раз</li>
 <li>дваз</li>
 <li>триз</li>
</ul>

<ul class="blue">
 <li>раз</li>
 <li>дваз</li>
 <li>триз</li>
</ul>

</body>
</html>

или для других списков вообще ничего не писать, тогда они будут выглядеть стандартно %)

Link to comment
Share on other sites
  • 0
lena vereschagina Explorer

lena vereschagina

Posted
  • Author
Posted

maddogrts:

"<ahttp://www.osobastudio.ru/img/toch.gif"/> Мы -  это Команда профессиональной Ногтевой Студии.

"<ahttp://www.osobastudio.ru/img/toch.gif"/> Красивые ноготки - это наше вдохновение, любовь и драйв.

"<ahttp://www.osobastudio.ru/img/toch.gif"/> В нашей студии собрались лучшие из лучших мастеров по Моделированию (Наращиванию) ногтей в Санкт-Петербурге. (Да и не только в Санкт-Петербурге, некоторые из нас имеют золотые медали и известность уже на мировой арене)

"<ahttp://www.osobastudio.ru/img/toch.gif"/> Мы владеем всеми прогрессивными технологиями в области ногтевой индустрии на высочайшем уровне и продолжаем оттачивать свое мастерство на профессиональных конкурсах, тренингах и мастер-классах.

"<ahttp://www.osobastudio.ru/img/toch.gif"/> Мы знаем о ногтях все. Поэтому мы легко вам подберем, посоветуем, расскажем и сделаем то, что будет подходить Именно Вам лучше всего и сделает ваши ручки изящными, и великолепными.

"<ahttp://www.osobastudio.ru/img/toch.gif"/> Мы создаем приятную, дружескую и позитивную атмосферу в нашей студии.

это вот список на странице http://www.osobastudio.ru/about/

вот, а надо чтобы обязательно через css и по-человечески

там сейчас в template_styles.css написано :

li

{list-style-image: http://www.osobastudio.ru/img/toch.gif(toch.gif);

}

Link to comment
Share on other sites
  • 0
maddogrts Explorer

maddogrts

Posted
Posted

Что такое маркированный список ? Каким тегом задается маркированный список и списки вообще ?

Лично я думал всегда что тег p это параграф.

Т.е у вас уже изначально стоит неправильная формулировка задачи.

Следует либо написать как добавить к параграфам маркер, либо поменять верстку на списки

Link to comment
Share on other sites
  • 0
lena vereschagina Explorer

lena vereschagina

Posted
  • Author
Posted

maddogrts: Уж не знаю зачем они это написали используя параграфы :) нужен именно список, я так понимаю тот, что написал mav. Они просто попытались написать li

{list-style-image: http://www.osobastudio.ru/img/toch.gif(toch.gif);

}

в template_styles.css - но резуьтат не получился. развели руками, сказали пусть я делаю. А я никогда c css не сталкивалась, вот и спрашиваю :(

Link to comment
Share on other sites
  • 0
~Kitty~ Explorer

~Kitty~

Posted
Posted

А, кстати, мне очень часто приходится делать списки имено таким образом (как написал maddogrts), потому что очень часто в IE и FF вертикальное выравнивание маркера оставляет желать лучшего. А надо, что бы одинаково. А у list-style-image нету понятия выравнивания. Тем более по вертикали =)

Только надо не забыть про padding-left для li - у нас же маркер фоном =)

Link to comment
Share on other sites
  • 0
~Kitty~ Explorer

~Kitty~

Posted
Posted

IE и FF по разному воспринимают его положение. И подчас он оказывается далеко не по центру, а выше или ниже. Смотрится просто убийственно. Поэтому и приходится извращаться таким вот образом.

Link to comment
Share on other sites
  • 0
mav Explorer

mav

Posted
Posted

в этом случае, все так %) но один момент, что в общем виде это делается именно на

  • без извращений, а потом уже, если надо, исправляется бекграундом %) код должен быть максимально простым, это любой прогер скажет
Link to comment
Share on other sites
  • 0
~Kitty~ Explorer

~Kitty~

Posted
Posted

Да это и любой уважающий себя верстальщик скажет =) Иначе разобраться нереально, даже в сво?м %)

Но вот просто по статистике моих работ (видимо, мне так вез?т с дизайнерами) - в 99% случаев приходится делать именно через фон.

Ну этот код скорее так - для информации девушке, вдруг у не? возникнет та же ситуация. Там смотря какой квадратик у не? и какой размер шрифта и отступы =)

Link to comment
Share on other sites
  • 0
mav Explorer

mav

Posted
Posted

2maddogrts:

вижу, любите подсирать (извиняюсь за свой французский) %) так вот, коль уж за вас в обсуждении принял участие другой человек, при этом конценсус был достугнут и непонятки разрешены, то вам бы следовало заткнуться и не сорить подобными высказываниями теша свое самолюбие а-ля "я был прав, я крут" %)

за сим я все сказал %) можете начинать тяфкать %)

ЗЫ: не надо пытаться меня понять %) у самого не получается уже столько лет %)

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