news box със заоблени ъгли без изображения
Сега ще ви покажа един начин как можете да си направите някакъв блок за новини примерно, без да ползвате таблици и изображения! Може да не слагате контейнерите center и right и да ги замените с left, но сьм го написал така за ваше влеснение.

Демо може да видите тук - http://store3.data.bg/akolevutd/uroci/newsboxcss.html

css code

body {
background-color: #FFFFFF;
}
.nifty {
width: 250px;
background: #C5E100;
margin: 0 auto;
color: #FFFFFF;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #C5E100;
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }

.title {
font-size: 19px;
font-weight: bold;
text-align:center;
font-family: arial, sans-serif, helvetica;
}
.new {
padding: 5px 5px 5px 5px;
text-align: center;
color: #fff;
font-size: 15px;
font-family: arial, sans-serif, helvetica;
}
#left {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
}
#center {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}
#right {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}


html code
<div id="left">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">

Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="center">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="right">

<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>


Автор | akolevutd


/ Трябва да сте регистриран за да напишете коментар /
От: ReD_z0n3
16:18 04-02-2010
Много е красиво :)
От: batmanabg
13:19 22-07-2011
Полезен урок.
1