Grow your CSS skills. Land your dream job.

Need Help With Columns For Text

  • # March 28, 2012 at 9:22 pm

    I’m having trouble keeping the text in the small boxes and in the main content area. How would I go about’s fixing this problem? go to first-aidtraining.ca

    Also the client selected and h2 heading for there text and it all comes out the same as the title, how can I fix this so when they pick an h2 heading for there text it doesn’t come out the same as the titles? I’m using wordpress.

    # March 31, 2012 at 2:21 am

    Try this bud…also, for your h2, you just need to locate the css and change it…

    The following link has the HTML and CSS you need to fix the box issue…BUT i only fixed one box…If you want i will help you fix the other two boxes as well, just let me know…

    http://jsfiddle.net/pseud0cool/ZzMfb/

    xpy
    # March 31, 2012 at 3:27 am

    Box two needs spaces before and after so the words can wrap…

    # April 1, 2012 at 2:15 pm

    I tried adding the code in and nothing happened. Not sure which of my code I need to remove for it to take affect but here is what my css looks like after trying to fiddle with it. I’m going to have to clean it up abit.

    html {
    background: url(images/main_bg.jpg) repeat;
    }

    body {
    color: #626262;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 100%;
    }

    p {
    color: #626262;
    line-height: 21px;
    padding:5px 5px 10px;
    }

    h2 {
    color: #363era;
    font-size: 30px;
    }

    ul {
    font-size: 12px;
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px;
    display: block;
    }

    #container {
    margin: 0 auto;
    width: 921px;
    text-align: left;
    }

    #header {
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    }

    #header h1 {
    text-indent: -9999px;
    background: url(images/logo.png) no-repeat;
    }

    #header small {
    color: #a3a3a3;
    position: absolute;
    font-size: 14px;
    top: .63em;
    left: 403px;
    }

    #nav_main {
    background: url(images/navbg.png) repeat-x;
    overflow: hidden;
    height: 57px;
    margin: 0 auto;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #CCC;
    }

    #nav_main li {
    background: url(images/hover_a.png) no-repeat;
    display: block;
    font: italic bold 16px monaco, sans-serif;
    text-align: center;
    float: left;
    line-height: 48px;
    list-style-type: none;
    margin: 5px auto;
    }

    #nav_main li a {
    text-decoration: none;
    color: #413f3e;
    width: 115px;
    height: 45px;
    margin: 0 auto;
    float: left;

    }

    #nav_main li a:hover {
    background: url(images/hover_b.png) no-repeat;
    }


    #banner {
    float:left;
    background: url(images/bannerbg.png) no-repeat #9a131a;
    height: 243px;
    position: relative;
    margin-bottom: 0px;
    }

    #welcome {
    float: left;
    width: 521px;
    }

    #welcome h1 {
    font-size: 25px;
    margin-left: 30px;
    margin-right: 28px;
    margin-bottom: 0;
    margin-top: 20px;
    color: #ffffff;
    border-bottom: 1px dashed #CCC;
    }

    #welcome p {
    margin-left: 30px;
    margin-right: 5px;
    color: #ececec;
    font-size: 14px;
    margin-top: .1em;
    }

    #slider {
    float: left;
    width: 400px;
    }

    #content_wrap {
    clear: left;
    float: left;
    position: relative;
    background: #ffffff;
    padding-bottom: 4em;
    padding-top: 5px;
    width: 920px;
    }

    #sub_content {
    float: left;
    padding-left: 10px;
    text-align: left;
    }

    #sub_content p {
    float: left;
    font-size: 10px;
    padding: 0 20px 0 10px;
    }

    #box_one {
    float: left;
    width: 290px;
    background: url(images/sub_bg.png) center repeat-y;
    margin: 10px 0;
    padding-left: 11px;
    }

    #box_two {
    float: left;
    width: 290px;
    background: url(images/sub_bg.png) center repeat-y;
    margin: 10px 0;
    padding-left: 11px;
    }

    #box_three {
    float: left;
    width: 290px;
    background: url(images/sub_bg.png) center repeat-y;
    margin: 10px 0;
    padding-left: 11px;
    }

    #sub_content h1 {
    float: left;
    color: white;
    font-size: 20px;
    font: Georgia, "Times New Roman", Times, serif;
    background: url(images/h1_bg.png) no-repeat;
    padding-left: 15px;
    padding-top: 15px;
    margin: 0 0 0 -5px;
    width: 283px;
    height: 52px;
    }

    #content_main {
    clear: left;
    padding-top: 15px;
    }


    #content_main h1 {
    color: #9f3a3a;
    font-size: 30px;
    text-decoration: underline;
    height: 60px;
    width: 920px;
    padding: 30px 0 0 40px;
    margin-left: -10px;
    }

    #content_main h2 {
    color: #626262;
    padding: 0 20px 0 20px;
    }

    #content_main p {
    margin-left: 28px;
    margin-right: 57px;
    }

    #footer-sidebar {
    display:block;
    height: 260px;
    }

    #footer-sidebar1 {
    float: left;
    width: 200px;
    font-size: 14px;
    line-height: 20px;
    margin-left: 25px;
    padding: 10px 34px 50px 0;

    }

    #footer-sidebar2 {
    float: left;
    font-size: 10px;
    text-align: right;
    width: 600px;
    padding: 10px 0 50px 60px;
    }

    #footer-sidebar3 {
    clear: left;
    float: right;
    font-size: 10px;
    width: 600px;
    text-align: right;
    padding: 10px 0 50px 60px;
    }
    # April 1, 2012 at 2:16 pm

    don’t forget I’m using WordPress

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".