Css Code for 3 “about me” “..of the month” and “latest” mini promo boxes/container

CMS & WordPress
1

I’ve been trying to add this to the end of a post page… At first i tried making it into a simple image and overlaying the buttons but because each box is 300x300 The text was barely readable…

I hate people that don’t search or try to sort a problem on their own, after messing around with frames (horrible idea i know) I then tried to use a css auto generator (my css knowledge is not that great, i can edit it easily enough but that’s about it), thinking that what i wanted was in essence a micro page, Container [header/content with left column/footer] but it resulted in a complete mess, chrome didn’t like it so much i had to ctrl-alt-del my way out of it :S

My css skills are alot poorer than my understanding of php, and though i’ve tried reading and searched like mad for a tutorial that might match i’ve found nothing. I do know enough not to use frames however. As for the 3 boxes side by side i already have the code to manage that from a previous addition to the site.

I could use the code alot… :slight_smile:

Here’s is an example of exactly what i’m trying to achieve:

http://static.inky.ws/image/2488/image.jpg

I’m sorry for the link, but inky is a respectable image pastebin and the image uploader wasn’t accepting my img… :S

2

You can try something like this as a starting point and optimize it and make it more modular so that you need less code for three boxes:


.contentBox {
    border: 1px solid #b3e5c0;
    border-radius: 8px;
    float: left;
    min-height: 300px;
    padding: 0 0 10px 0;
    width: 30%;
}


.contentBox img, .contentBox, h3, .contentBox p {
    margin: 0 10px 10px 0;
}


.contentBox img {
    display: inline; /* legacy IE */
    float: left;
    margin: 0 10px;
    padding-bottom: 10px;
}


.contentBox h2 {
    background: #f5f5f5 url(i/sampleBG.png) repeat-x bottom;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #8f7f6e;
    line-height: 1;
    margin: 0 0 10px 0;
    padding: 10px;
    text-transform: uppercase;
}


.contentBox h3 {
    color: #8f7f6e;
    font-style: italic;
}


.contentBox .links {
    border-top: 2px dotted #8f7f6e;
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 90%;
}


.contentBox .links a {
    border-radius: 12px;
    color: #fff;
    display: inline;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}


.contentBox a.more:link,
.contentBox a.more:visited {
    background: #6f9a7c;
}


.contentBox a.contact:link,
.contentBox a.contact:visited {
    background: #8f7f6e;
}




    <div class="contentBox">
            <h2>This is a title</h2>
            <img src="i/sampleIMG.jpg" alt="Sample image" width="120" height="150">
            <h3>This is a subtitle</h3>
            <p>And this is a simple paragraph.</p>
            <div class="links">
                <a class="more" href="#">read more</a>
                <a class="contact" href="#">contact</a>
            </div>
    </div>

I have only tested it in Chrome, but it should work in all browsers respectively, see here: http://lab.rockatee.com/simple-box.html

3

A more modular approach would be to create generic styles that you can use for all three columns and then just adding the column-specific styles separately like so:

/* ===  Basic styles for all three boxes === */


.contentBox {
    border-radius: 8px;
    float: left;
    margin-right: 10px;
    min-height: 300px;
    padding: 0 0 10px 0;
    width: 30%;
}


.contentBox img {
    display: inline; /* legacy IE */
    float: left;
    margin: 0 10px 10px 0;
}


.contentBox .inner {
    overflow: hidden; /* contain floats */
    padding: 10px;
}


.contentBox .links {
    clear: both;
    margin: 10px auto;
    padding: 10px 0;
    text-align: center;
    width: 98%;
}


.contentBox .links a {
    border-radius: 12px;
    color: #fff;
    display: inline;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}


.contentBox h2 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    line-height: 1;
    margin: 0 0 10px 0;
    padding: 10px;
    text-transform: uppercase;
}


/* Styles for individual columns */




/* === Green column === */


.one {
    border: 1px solid #b3e5c0;
}


.one h2 {
    background: #f5f5f5 url(i/sampleBG.png) repeat-x bottom;
    color: #8f7f6e;
}


.one h3 {
    color: #8f7f6e;
    font-style: italic;
}


.one .links {
    border-top: 2px dotted #8f7f6e;
}


.one a.more:link,
.one a.more:visited {
    background: #6f9a7c;
}


.one a.contact:link,
.one a.contact:visited {
    background: #8f7f6e;
}

/* === Pink column === */

/* Rinse and repeat */

/* === Yellow column === */

/* Rinse and repeat */

This means that you’d use one more <div> but it’s easier to maintain and less code overall.

And the HTML:

    <div class="contentBox one">
            <h2>This is a title</h2>
                <div class="inner">
                    <img src="i/sampleIMG.jpg" alt="Sample image" width="120" height="150">
                    <h3>This is a subtitle</h3>
                    <p>And this is a simple paragraph.</p>
                    <div class="links">
                        <a class="more" href="#">read more</a>
                        <a class="contact" href="#">contact</a>
             <!-- end links --></div>
            
              <!-- end inner --></div>
<!-- end contentBox-->   </div>
4

Thank you so much :slight_smile: I’m going to try this right away :smiley: