SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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..

    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. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code css:
    .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;
    }

    Code:
        <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
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code css:
    /* ===  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:

    Code:
        <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>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much I'm going to try this right away


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •