CODEWITHSUNDEEP
cssimagehtml
getaway
getaway

Reputation: 8990

i want to design these 2 boxes using css[image]?

alt text

i want to create this effect using css, can you see the big box with the title and the blog post, and little box with the date on it and the number of comments on it. its been puzzling me, an example would be great thanks guys :))

Upvotes: 1

Views: 410

Answers (4)

Jakub Hampl
Jakub Hampl

Reputation: 40543

The main trick would be in using the CSS3 border-radius property. That makes the boxes round. You'll have to use vendor prefixes to get this working in current browsers:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

Upvotes: 0

Breezer
Breezer

Reputation: 10490

don't quite understand what's so puzzleling but if it's how the divs are arranged there's 100 ways it could be done one way would be something like

http://img715.imageshack.us/img715/1650/exampleai.png

if it's about how to get rounded corners it would be like jakub mentioned here is a sample

http://www.jsfiddle.net/KKpPQ/3/

Upvotes: 1

meo
meo

Reputation: 31249

its pretty easy with some css3:

http://jsfiddle.net/meo/J9SjQ/

Upvotes: 1

ow3n
ow3n

Reputation: 6597

In the HTML just create two separate divs, one for the details and the other for the content.

<div class="post">
    <div class="post_details">
        <div class="post_date">
            <div class="post_day">26</div>
            <div class="post_month">NOV/10</div>
        </div>
        <div class="post_comments">2</div>
    </div>
    <div class="post_text">
        <div class="post_title">PASSION SUCCESS AND MONEY</div>
        <div class="post_title">A lot of people...</div>
    </div>
</div>

With the CSS you could float them both left or absolute position the details box off to the side.

.post         { clear:both; width:600px; }
.post_details { float:left; width:53px; height:93px; background:#fff; }
.post_date    { width:48px; background:#ddd; }
.post_month   { width:48px; background:#666; }
.post_text    { float:left; width:545px; background:#fff; }

Upvotes: 1

Related Questions