Обрамление виджетов как

Подскажите пожалуйста, как сделать обрамление выводимых виджетов, т.е. на данный момен, я использую табличное обрамление, а как седлать, чтобы выводилось автоматически, при добавлении нового виджета. Если не совсем понятно изложил вопрос, посмотрите у меня на сайте в правой колонке в самом верху, где название виджета "Уникальные посетители", там сделано таблицей, а мне нужно, чтобы верхняя рамка сливалась с шапкой виджета, и все это, повторюсь, нужно автоматически. Я понимаю, что можно через стили, но в CSS, я говорю сразу, я не силен, если можно подробнее объясните пожалуйста, чтобы я смог в дальнейшем сам делать, и не задавать глупых вопросов, – просто нужен пример форматирования для наглядности.
Заранее всем откликнувшимся благодарен

Когда делаю обрамление, т.е. в стилях ставлю border 1px правая колонка съезжает

#r_sidebar {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    display: inline;
    float: right;
    border: 1px solid #990000;
    width: 200px;
    margin: 10px 0px 15px 0px;
    display: block; /* floats are handled as block elements, this is to fix 
                               a margin collapsing bug in IE */
}

Если съезжает, значит, не влазит. Возможно, места отведено 200, а Вы пытаетесь впихнуть туда 202.

пробовал меньше, то же самое, а если меняю и влевом и вправом, то вообще разбивает, и черт что отображается там, где должна быть верстка сайта

Всем спасибо разобрался, просто не учел margin, сделал еще меньше и все как надо. Только вот ворос, как отделить виджет от виджета, на данный момент левая и правая колонка обрамлены, но виджеты разделяются только шапкой, а нужно сделатьчтобы шапка следующего виджета отстояла на пару пикселей от предыдущего. Как?

Тот же самый margin.

Что-то не катит, где в данном коде, что нужно заменить? Подскажите плиз.

/*********************************************
        Left Sidebar
*********************************************/
#l_sidebar {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    display: inline;
    float: left;
    border: 1px solid #990000;
    width: 190px;
    margin: 5px 5px 15px 0px;
    display: block; /* floats are handled as block elements, this is to fix 
                        a margin collapsing bug in IE */
}
#l_sidebar p {
    padding: 5px;
}
#l_sidebar img {
    text-align: center;
}
#l_sidebar form {
    padding: 0px;
    margin: 5px;
}
#l_sidebar ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#l_sidebar ul li {
    padding: 0px 0px 10px 0px;
}
#l_sidebar ul li ul {
    padding: 0px 0px 0px 0px;
}
#l_sidebar ul li ul li {
    padding: 0px;
    margin: 5px;
}
#l_sidebar ul li ul li a {
    color: #666;
    text-decoration: none;
}
#l_sidebar ul li ul li a:hover {
    color: #000;
    text-decoration: underline;
}
#l_sidebar ul li ul li ul {
    padding: 0px;
    margin: 0px;
}
#l_sidebar ul li ul li ul li {
    padding: 0px;
    margin: 5px 10px 5px 5px;
}

Ну, не знаю, скажем что-то типа
#l_sidebar ul li {
padding: 0px 0px 10px 0px;
margin: 0px 0px 20px 0px;
}

В данном случае увеличивается расстояние от контента предыдущего виджета до шапки следующего, а мне нужно чтобы обрамление предыдущего отступало от шапки нижеследующего

тогда уберите padding из того кода, что Ю.Б. выше дал и оставьте только margin
И вообще было бы неплохо Вам самому глянуть в html код станицы чтобы понять куда margin-bottom: 20px пристоить, а не тащить из нас телепатов 🙂

тогда уберите padding из того кода, что Ю.Б. выше дал и оставьте только margin
И вообще было бы неплохо Вам самому глянуть в html код станицы чтобы понять куда margin-bottom: 20px пристоить, а не тащить из нас телепатов :)

html-код какого файла?

Anonymous
Отправить
Ответ на: