[Kinax]

Привет всем...
Оч интересует вопрос закругления углов таблиц и полосы заголовков на сайте, подскажите как реализовать... я вот чтото нашел но мозги немного не оттуда ростут.... Если кому не сложно подскажите что сделать...

http://designformasters.info/posts/r...ners-no-image/

[666]

не понятен вопрос, ведь в статье всё есть. в цсс пишеш

PHP код:

.r1, .r2, .r3 {
    display: block;
    height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#rounded-box-3 .inner-box, #rounded-box-3  b {
    background-color: #CCCCCC;
}

.inner-box {
    padding:1em;
}
.r1, .r2, .r3 {
    overflow: hidden; 
    font-size:1px;
} 


а те блоки которые хочеш скруглить пишеш в тегах

PHP код:

<div id="rounded-box-3">
    <b class="r3"></b><b class="r1"></b><b class="r1"></b>
    <div class="inner-box">
        <h3>Элемент с закругленными углами R=3px</h3>
        <p>Этот способ закругления углов подсмотрен на GMail.</p>
    </div>
    <b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div> 


[Sheffavenger]

всё понятно написанно..
Это идёт в шаблон

<div id="rounded-box-3">
<b class="r3"></b><b class="r1"></b><b class="r1"></b>
<div class="inner-box">
<h3>Элемент с закругленными углами R=3px</h3>
<p>Этот способ закругления углов подсмотрен на GMail.</p>
</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>

А Это в CSS:

.r1, .r2, .r3 {
display: block;
height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}

.inner-box {
padding:1em;
}
.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}

[Kinax]

ок... давай проще....
вот код

<table cellpadding='0' cellspacing='0' class='portal_table' align='center' width='100%'>
<tr><td class='header'> текст шапки</td></tr>
<tr>
<td class='portal_box'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="movie" width="100%" align="center" id="movie">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Carousel.swf?xmlfile=home.xml">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<embed src="Carousel.swf?xmlfile=home.xml" menu="false" quality="high" wmode="transparent" width="100%" name="movie" align="right" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</tr>
</table>

как сделать чтоб у него шапка была с округленными улами?

[Kinax]

то что в css я скопировал и вставил без изменений

[666]

ну можно гдето так

PHP код:

<link rel="stylesheet" type="text/css" href="style.css" />

<table cellpadding='0' cellspacing='0' class='portal_table' align='center' width='100%'border=0>
<tr><td ><div id="rounded-box-3"> 
    <b class="r3"></b><b class="r1"></b><b class="r1"></b> 
    <div class="inner-box"> 
        <h3>Элемент с закругленными углами R=3px</h3> 
        <p>Этот способ закругления углов подсмотрен на GMail.</p> 
    </div> 
   <b class="r1"></b><b class="r1"></b><b class="r3"></b> 
</div>  
</td>

</tr>
<tr>
<td class='portal_box'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="movie" width="100%" align="center" id="movie">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Carousel.swf?xmlfile=home.xml">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<embed src="Carousel.swf?xmlfile=home.xml" menu="false" quality="high" wmode="transparent" width="100%" name="movie" align="right" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</tr>
</table> 


в файлике style.css должно лежать

PHP код:

.r1, .r2, .r3 {
display: block;
height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}

.inner-box {
padding:1em;
}
.r1, .r2, .r3 {
overflow: hidden; 
font-size:1px;
} 


[Kinax]

не получается... если оставить фоновый цвет то он его круглит, а если картинку то он ее повторяет вниз 3 раза и не круглит :(

[666]

)) дык этоже как раз и придумали, чтоб не картинками скругливать.
если у тебя там фоновая картинка, то в фотошопе её скругли как нужно

[Kinax]

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

td.topbar2, td.topbar2_center {
background-image: url(../images/menu_bg.gif);
background-repeat: repeat-x;
vertical-align: top;
}

тоесть я понимаю что с двух сторон можно подставить картинку с округлением но как, или чтоб концы картинки брались только по краям а по полосе дублировалось центральная часть картинки....

[666]

гыгы. repeat-x - это значит, что твоя фоновая картинка будет повторятся по оси икс(по горизонтали). эту строчку убери, а шапку зделай широкой, с двумя круглыми углами, ну и вставь 1м рисунком