Witam.
Chcę z mojej skórce zmienić brzegi nagłówku newsa na zaokrąglony. Posługuję się CSS3. I piszę taki kod:
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
Wszędzie to działa, ale nie w tych nagłówkach. Stopkę zrobiłem z tą własnością - działa, header - działa. Nawet w stopce newsa działa.
Funkcja render_page wygląda tak: function render_news($subject, $news, $info) {
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
echo "<td align='left class='capmain-left'></td>\n";
echo "<td class='capmain'>".$subject."</td>\n";
echo "<td align='right' class='capmain-right'></td>\n";
echo "</tr>\n</table>\n";
echo "<table width='100%' cellpadding='0' cellspacing='0' class='spacer'>\n<tr>\n";
echo "<td class='main-body'>".$news."</td>\n";
echo "</tr>\n<tr>\n";
echo "<td align='center' class='news-footer'>\n";
echo newsposter($info," ·").newsopts($info,"·").itemoptions("N",$info['news_id']);
echo "</td>\n";
echo "</tr>\n</table>\n";
}
A classy capmain-left, capmain i capmain-right tak: .capmain {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background: -moz-linear-gradient(top, #EDAC13, #FEC745);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDAC13), to(#FEC745));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#EDAC13, endColorstr=#FEC745);
padding: 6px 0 6px 4px;
}
.capmain-left {
background: -moz-linear-gradient(top, #EDAC13, #FEC745);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDAC13), to(#FEC745));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#EDAC13, endColorstr=#FEC745);
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
.capmain-right {
background: -moz-linear-gradient(top, #EDAC13, #FEC745);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#EDAC13), to(#FEC745));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#EDAC13, endColorstr=#FEC745);
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
Dlaczego używam CSS3? Nie chcę się bawić w jakieś pliki graficzne. Wolę napisać kodzik. Mogę wtedy łatwiej i szybciej edytować. ;)
EDIT:
Udało mi się, ale tylko z prawej strony, dodając szerokość, czyli linijkę: width: 5px;
Z lewej strony już tak kolorowo nie jest. :(
Edytowane przez Borek dnia 23.08.2011 20:37:12
Nie pomagam przez GG, PW itp. Tylko tutaj.
|
v7.02.05
