none
Маркеры BulletedList RRS feed

  • Вопрос

  • Добрый вечер. Вот что у меня получается

    .img
    {margin-right: 20px;
    float:left;}

    .bull
    {
    padding:0px 0px 0px 0px;
    }

    Как можно маркеры передвигать к тексту BulletedList? ,если это конечно возможно

    6 апреля 2012 г. 15:59

Ответы

  • > нужно обтекание картинки списком


    для .bull надо указать list-style-position



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .img
            {
                width: 50px;
                height: 50px;
                border: 1px solid red;
                float: left;
                margin-right: 10px;
            }
            .bull
            {
                list-style-position: inside;
                margin-left: -40px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <img src="1.png" class="img" />
            <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bull">
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
            </asp:BulletedList>
        </div>
        </form>
    </body>
    </html>
      
      
    • Предложено в качестве ответа YatajgaEditor 7 апреля 2012 г. 11:55
    • Помечено в качестве ответа Program-s.g 9 апреля 2012 г. 7:54
    7 апреля 2012 г. 11:45
  • Ну я понял Вашу идею, на практике реализовать такое не очень просто.

    1. Вариант пеовый, это применять два списка, один под картинкой и другой наверху. Привязать часть данных верхнему, а остальную нижнему. Т.е. осуществить разделение данных при привязке. Очень неэффективный способ, не рекомендую.
    2. Отказаться от использования маркированного списка (ul, на самом деле он генерируется BulletedList), а использовать обычный текст, следующим способом.
    <html>
    <head id="Head1" runat="server">
      <title></title>
      <style type="text/css">
        .block
        {
          width: 500px;/**/
          margin: 2px 2px 2px 2px;
          padding: 0px 0px 0px 2px;
        }
        .img
        {
            float: left;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="block">
        <img src="1.png" class="img" />
        <%for (int i = 0; i < 10; i++)
          {%>
            <span style="display: block">Ваше один элемент из привязки</span>
          <%} %>
      </div>
      </form>
    </body>
    </html>

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

    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 9:31
    7 апреля 2012 г. 8:23
    Модератор
  • Здравсвтуйте.

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


    Для связи [mail]

    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 9:31
    7 апреля 2012 г. 8:33
    Модератор
  • > Malobukv, я сделал как вы сказали, но BulletedList поместился под картинкой. Посмотрите я создал "чистый проект" [...] .bull{padding:0px 0px 0px 0px;} [...] <asp:BulletedList ID="BulletedList1" runat="server">
     
     
    в asp:BulletedList не указан css. надо добавить CssClass
    <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bull">
    ...
    </asp:BulletedList>
    
    и в .bull надо добавить float:left;
    .bull
    {
       padding: 0px 0px 0px 30px;
       float: left;
    }
    

    p.s.
    как вариант используйте table:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <table>
            <tr>
                <td><img src="1.png" alt="" /></td>
                <td style="padding-left: 20px;">
                    <asp:BulletedList ID="BulletedList1" runat="server">
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                    </asp:BulletedList>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
        
      
    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 10:02
    7 апреля 2012 г. 9:38

Все ответы

  • Подробней, если можно? А то пока ничего не понятно.
    6 апреля 2012 г. 17:50
    Модератор
  • <img src="Photos/<%#Eval("img") %>.png" class="img" />  
              <asp:BulletedList ID="BulletedList2" runat="server" class="bull"
                   DataSourceID="SqlDataSource2" DataTextField='<%#Eval("name") %>' 
                   DataValueField="Name">
               </asp:BulletedList>
           

    Вот часть кода aspx, думаю так будет ясно в чем проблема, маркеры распалагаются до картинки, а пункты после (как показано на скрине)

    • Изменено Program-s.g 6 апреля 2012 г. 18:10
    6 апреля 2012 г. 18:09
  • "Как можно маркеры передвигать к тексту BulletedList? ,если это конечно возможно" - конечно возможно, просто у Вас похоже и ещё глобальные стили есть, которые наследуются. А то маркеры должны быть рядом со списком. И ещё padding:0px 0px 0px 0px; уберите. Посмотрите при помощи firebug (firefox) или developer tools(ie) генерируемую разметку. Если не получится придётся скинуть все стили к странице, чтобы можно было посмотреть.
    6 апреля 2012 г. 19:08
    Модератор
  • А что вы хотите реализовать, поместить список рядом с картинкой?

    6 апреля 2012 г. 20:05
    Модератор
  • > Как можно маркеры передвигать к тексту BulletedList?
     
     
     
    в .bull надо добавить float:left;

    .bull
    {
        padding: 0px 0px 0px 0px;
        float: left;
    }
     
    работает при <!DOCTYPE html>
      
     
    • Изменено Malobukv 6 апреля 2012 г. 20:17
    6 апреля 2012 г. 20:14
  • "в .bull надо добавить float:left;" в ие 7 и ниже работать не будет, надо бы посмотреть весь стилевой код страницы и идею, что собсвенно надо сделать.
    6 апреля 2012 г. 20:24
    Модератор
  • Malobukv, я сделал как вы сказали, но BulletedList поместился под картинкой. Посмотрите я создал "чистый проект", где только BulletedList и картинка, что получается, в конструкторе показывает как надо, но в браузере нет, 

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .block { width:500px; display:block; float:left; margin:2px 2px 2px 2px; padding:0px 0px 0px 2px; } .bull { padding:0px 0px 0px 0px; } .img {margin-right: 20px; float:left;} </style> </head> <body> <form id="form1" runat="server"> <div class="block"> <img src="1.png" class="img" /> <asp:BulletedList ID="BulletedList1" runat="server"> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> <asp:ListItem>some text</asp:ListItem> </asp:BulletedList> </div> </form> </body> </html>

    7 апреля 2012 г. 4:55
  • Вот рабочий кроссбраузерный вариант.

    <html>
    <head id="Head1" runat="server">
      <title></title>
      <style type="text/css">
        .block
        {
          width: 500px;
          margin: 2px 2px 2px 2px;
          padding: 0px 0px 0px 2px;
        }
        .d1
        {
            float: left;height: 100%; width:100px;
        }
        .d2
        {
            margin-left: 100px; height:100%; width:400px;
        }
        .bull
        {
            padding:0;
        }
        .img
        {
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="block">
        <div class="d1"><img src="1.png" class="img" /></div>
        <div class="d2"><asp:BulletedList ID="BulletedList1" runat="server">
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
          <asp:ListItem>some text</asp:ListItem>
        </asp:BulletedList></div>
      </div>
      </form>
    </body>
    </html>

    На основе шаблона плавающих блоков, применяю его очень часто.

    Что касается этого стиля, то

    .block
    {
        width:500px;
        display:block;/*не зачем блочный элемент делать блочным, он итак такой*/
        float:left;/*и это лишнее если он один*/
        margin:2px 2px 2px 2px;
        padding:0px 0px 0px 2px;
     }



    7 апреля 2012 г. 6:21
    Модератор
  • У меня опять не работает, теперь блок выглядит вот так

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

    7 апреля 2012 г. 6:56
  • Значит надо корректировать следующие классы

    .d1 { float: left;height: 100%; width:100px;/*Увеличиваем скажем на 200px, ну Вы под свои требования*/ } .d2 { margin-left: 100px; /*Увеличивае на 200px*, анологично/

    height:100%; width:400px;/*Регулируем ширину*/ }

    Главное чтобы d1 width => d2 margin-left.


    7 апреля 2012 г. 7:02
    Модератор
  • Понятно но теперь проблема в другом, если список будет большим, под картинкой будет много свободного места, нужно обтекание картинки списком,то что получилось в конструкторе, идеально подходит для этого случая, но в браузерах не работает
    7 апреля 2012 г. 7:31
  • Ну я понял Вашу идею, на практике реализовать такое не очень просто.

    1. Вариант пеовый, это применять два списка, один под картинкой и другой наверху. Привязать часть данных верхнему, а остальную нижнему. Т.е. осуществить разделение данных при привязке. Очень неэффективный способ, не рекомендую.
    2. Отказаться от использования маркированного списка (ul, на самом деле он генерируется BulletedList), а использовать обычный текст, следующим способом.
    <html>
    <head id="Head1" runat="server">
      <title></title>
      <style type="text/css">
        .block
        {
          width: 500px;/**/
          margin: 2px 2px 2px 2px;
          padding: 0px 0px 0px 2px;
        }
        .img
        {
            float: left;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="block">
        <img src="1.png" class="img" />
        <%for (int i = 0; i < 10; i++)
          {%>
            <span style="display: block">Ваше один элемент из привязки</span>
          <%} %>
      </div>
      </form>
    </body>
    </html>

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

    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 9:31
    7 апреля 2012 г. 8:23
    Модератор
  • Здравсвтуйте.

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


    Для связи [mail]

    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 9:31
    7 апреля 2012 г. 8:33
    Модератор
  • Проблема оказалась гораздо труднее, чем я думал. Думаю, действительно будет лучше использовать другие варианты (например список непосредственно под картинкой) Спасибо большое за советы!!!

    7 апреля 2012 г. 9:31
  • > Malobukv, я сделал как вы сказали, но BulletedList поместился под картинкой. Посмотрите я создал "чистый проект" [...] .bull{padding:0px 0px 0px 0px;} [...] <asp:BulletedList ID="BulletedList1" runat="server">
     
     
    в asp:BulletedList не указан css. надо добавить CssClass
    <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bull">
    ...
    </asp:BulletedList>
    
    и в .bull надо добавить float:left;
    .bull
    {
       padding: 0px 0px 0px 30px;
       float: left;
    }
    

    p.s.
    как вариант используйте table:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <table>
            <tr>
                <td><img src="1.png" alt="" /></td>
                <td style="padding-left: 20px;">
                    <asp:BulletedList ID="BulletedList1" runat="server">
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                        <asp:ListItem>some text</asp:ListItem>
                    </asp:BulletedList>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
        
      
    • Помечено в качестве ответа Program-s.g 7 апреля 2012 г. 10:02
    7 апреля 2012 г. 9:38
  • > нужно обтекание картинки списком


    для .bull надо указать list-style-position



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .img
            {
                width: 50px;
                height: 50px;
                border: 1px solid red;
                float: left;
                margin-right: 10px;
            }
            .bull
            {
                list-style-position: inside;
                margin-left: -40px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <img src="1.png" class="img" />
            <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bull">
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
                <asp:ListItem>some text</asp:ListItem>
            </asp:BulletedList>
        </div>
        </form>
    </body>
    </html>
      
      
    • Предложено в качестве ответа YatajgaEditor 7 апреля 2012 г. 11:55
    • Помечено в качестве ответа Program-s.g 9 апреля 2012 г. 7:54
    7 апреля 2012 г. 11:45
  • Огромное спасибо!!!
    9 апреля 2012 г. 7:55