Grow your CSS skills. Land your dream job.

Stuck with a CSS bug

  • # July 1, 2011 at 12:14 pm

    i got stuck in in css of my new blog , all the images are floating to left even i place them at center at the time of posting , a nice man here suggested me to give different div tag to featured image but i am just unable to do this ,, can someone help me please , here goes the url http://jesica89.blogspot.com/2011/06/video-check.html

    # July 1, 2011 at 12:21 pm

    here goes the code



    here is the style sheet

    /*


    {


    } Content Left Image {


    }


    */
    #contentLeft img, #contentLeft a img {
    padding: 0;
    margin-right:15px;float:left;
    }

    now please suggest me how to get a different div tag for featured image

    # July 1, 2011 at 12:22 pm

    sorry here is the html code







    # July 1, 2011 at 12:23 pm

    and style sheet

    here is the style sheet

    /*
    {
    } Content Left Image {
    }
    */
    #contentLeft img, #contentLeft a img {
    padding: 0;
    margin-right:15px;float:left;
    }
    # July 1, 2011 at 4:19 pm

    Well, really what do you want?

    The “#contentLeft” it’s the main container, the “#contentLeft img, #contentLeft a img” afecct all images with or without a link inside the main container. So, all images inside have

    #contentLeft img, #contentLeft a img {
    padding: 0;
    margin-right:15px;
    float:left;
    }

    The “float:left” is floating your images to the left.

    If you want the three align estates (left, right, center) you can create three classes:

    .left{
    float:left;
    margin: 5px;}
    .right{
    float: right;
    margin: 5px;
    }
    .center{ /*You need to specify the width of the images in the img tag to get this method working: */
    margin: 0 auto;
    }

    And get ride of the “float:left” in the “#contentLeft img, #contentLeft a img”.

    And with a:

    .left, .right, .center{
    padding: 5px;
    border-radius: 3px;
    background: #ccc;
    border: 1px solid #aaa;
    }

    You can have a nice border effect… ;)
    This fix your problem?

    # July 2, 2011 at 1:44 am

    it is not working for me ,,,actually i need featured image to float on left and remaining in the center,, so these two are conflicting

    # July 2, 2011 at 1:51 am

    and full css is here

    /*
    
    {
    } Content Left {
    }
    */
    #contentLeft {
    float:left;
    margin:5px 0 0 0;
    padding:10px 0 0 0;
    width:645px;
    }/*
    {
    } Content Left Image {
    }
    */
    #contentLeft img, #contentLeft a img {
    padding: 0;
    margin-right:15px;float:left;
    }
    /*
    {
    } Post Box {
    }
    */
    #contentLeft .postBox {
    float:left;
    margin:0 0 15px 0;
    padding:0 0 10px;
    position:relative;
    width:580px;
    color: #1E1E1E;
    margin-left: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid #d5d5d5;
    font-family: verdana, Helvetica, arial, sans-serif; font-size: 13px;line-height: 20p/*
    {
    } Post Date {
    }
    */
    #contentLeft .postDate {
    background:url(http://3.bp.blogspot.com/_nI2w1Z0MWcE/TQrBk1_TqgI/AAAAAAAAA38/GoklPlhpA7M/s1600/date_icon.png);
    background-repeat: no-repeat;
    width: 63px; height: 76px;
    position: absolute; top: 10px; left: -63px;
    text-align: center;
    color: #414040;
    padding: 13px 0 0 7px;
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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