За последние 24 часа нас посетили 20094 программиста и 1695 роботов. Сейчас ищут 1844 программиста ...

рамка с округленными углами не работает в таблице

Тема в разделе "HTML и CSS", создана пользователем Skyers, 15 май 2009.

  1. Skyers

    Skyers Активный пользователь

    С нами с:
    1 май 2009
    Сообщения:
    54
    Симпатии:
    0
    Помогите решить проблему...

    код css

    [css]
    /**
    * Spanky Corners -- CSS Rounded Corners by SitePoint
    *
    * Auto generated code
    * Details @ http://tools.sitepoint.com/spanky/
    * @version 1.1b
    */


    body {
    background-color: #ffffff;
    color: #333333;
    font-size:62.5%; /* Explain @ www.clagnut.com/blog/348/ */
    }

    /* all curved boxes get the bottom-left corner */
    div.rounded {
    background: #b8c7da url(bl_18_b8c7da_ffffff.gif) no-repeat bottom left;
    color: #333333;
    position: relative;
    padding-top: 0;
    padding-bottom: 18px;
    margin: 1em 10px 0 0 ;
    height:100%
    }

    /* all elements in 'div.rounded' gets the B-R corner */
    div.rounded * {
    background: #b8c7da url(br_18_b8c7da_ffffff.gif) no-repeat bottom right;
    color: #333333;
    padding: 1em 2em 18px 0;
    margin: 0 0 -18px 18px;
    height:100%;
    }

    /* Scrub that B-R corner from all elements *2+* levels deep*/
    div.rounded * * {
    padding: 0;
    margin: 0;
    background: none;
    color: #333333;
    height:auto
    }

    /* Set up some H's as 'box heads' with the T-R and T-L corners */
    div.rounded h1, div.rounded h4 {
    color: #ffffff;
    background: #b8c7da url(tr_18_b8c7da_ffffff.gif) no-repeat top right;
    display: list-item;
    list-style-image: url(tlc_18_b8c7da_ffffff.gif);
    list-style-position: inside;
    list-style-type:none;
    padding: 0;
    margin: 0;
    position: relative;
    }

    div.rounded h1 {
    font-size: 3.2em;
    }
    div.rounded h4 {
    font-size: 2em;
    }
    [/css]

    код HTML

    HTML:
    1.  
    2. <div class="rounded">
    3.   <h4>Heading</h4>
    4.      <p>Lorem ipsum... </p>
    5. </div>
    6.  
    Тут все нормально работает... все красиво и т.д.

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

    HTML:
    1.  
    2. <table width="100%"  border="0">
    3.   <tr>
    4.     <th scope="col"><p><div class="rounded">
    5.   <h4>Heading</h4>
    6.      <p>Lorem ipsum... </p>
    7. </div> </p></th>
    8.   </tr>
    9.  
    Подскажите что поправить...
     
  2. kas1e

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    хосспади, откуда столько велосипедных мастерских начало появляться? :(

    http://malsup.com/jquery/corner/

    краткость - сестра таланта. а время велосипедастроительства лучше использовать для тех целей, которые еще никем не сделаны.
     
  3. kas1e
    ты походу, бог верстки, если сайтпоинт для тебя велосипедная мастерская
     
  4. kas1e

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    я не бог, но я могу сказать точно: если есть способ, сводящий до минимума работу, проделанную сотнями людьми, причем реализация на порядок стабильнее чем у какого-то сайтпоинта, о котором я не наслышан настолько, чтобы его обожествлять... то я воспользуюсь более стабильным вариантом )

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

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

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    в голове два смысла. в таблицу вставляется объект с рамкой. либо нацепить стили НА таблицу(а не В). тока как с "div." в стилях это можно пытаться сделать и таки добиваться О_о? или тут не тот код, что в проекте?

    склоняюсь к первому варианту. поэтому и посоветовал то что выше.
     
  7. Skyers

    Skyers Активный пользователь

    С нами с:
    1 май 2009
    Сообщения:
    54
    Симпатии:
    0
    буду оочень признателен, если вы русским языком обьясните что с этим делать...

    скачал jquery.corner.js
    подключаю

    HTML:
    1.  
    2. <script type="text/javascript" src="jquery.corner.js"></script>
    3. <div class="demo"><h1>Round 30px</h1> <p>$(this).corner("30px");</p></div>
    4.  
    и ровные прямоугольные углы )

    что я не так сделал ? )
     
  8. kas1e

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    нужно сам jQuery скачать и подрубить =) это ведь лишь для него плагин.

    www.jquery.com

    присмотритесь, откроет множество возможностей без надобности написания кучи кода )
     
  9. Skyers

    Skyers Активный пользователь

    С нами с:
    1 май 2009
    Сообщения:
    54
    Симпатии:
    0
    HTML:
    1.  
    2. <!doctype html>
    3. <html>
    4. <head>
    5. <title>JQuery Corner Demo</title>
    6. <link rel="stylesheet" type="text/css" media="screen" href="jq.css" />
    7. <script type="text/javascript" src="jquery-1.3.1.js"></script>
    8. <script type="text/javascript" src="jquery.corner.js"></script>
    9. </head>
    10. <body>
    11. <div class="demo"><h1>Round 30px</h1> <p>$(this).corner("30px");</p></div>
    12. </script>
    13. </body>
    14. </html>
    15.  
    kas1e Подскажи что еще сюда вписать что бы оно работало ?
    не хочет закруглять... (((
    буду ООЧЕНЬ БЛАГОДАРЕН
     
  10. kas1e

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    <script language="javascript">
    $('.demo').corner();
    </script>

    Грубо говоря без функции рейди жкверевской )
     
  11. Skyers

    Skyers Активный пользователь

    С нами с:
    1 май 2009
    Сообщения:
    54
    Симпатии:
    0
    все стили в jq.css засунул
    <!doctype html>
    <html>
    <head>
    <title>JQuery Corner Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jq.css" />
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="jquery.corner.js"></script>
    <script language="javascript"> $('.demo').corner(); </script>

    </head>
    <body>
    <div class="demo"><h1>Sharp</h1> <p>$(this).corner("sharp");</p></div>
    </body>
    </html>
     
  12. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    Господи, уже и углы с помощью jQuery делают. Наверное, скоро будут цвет активной ссылки менять с помощью jQuery.
     
  13. kas1e

    kas1e Активный пользователь

    С нами с:
    6 апр 2009
    Сообщения:
    280
    Симпатии:
    0
    да, где-то писал генерацию тегов статей на лету с помощью жквери. а почему бы не использовать, если и так подключен? зачем возиться с другими решениями, зачастую не везде эффектно работающими?