www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help needed on floating imagebox

  1. #1
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58

    Help needed on floating imagebox

    Hello Webmasters.
    Please I need ur help. Am taking a training in web development and I've just been given my first real test by my supervisor. I am required to float the imagebox to left and have the text wrap around it. But I don't know why the text keeps getting inside the imagebox even after I set a margin-bottom. Here's a link to understand what am trying to say http://www.fextaceswepcoproducts.com/products.html

    He did the stylesheet and I don't seem to have a clue as to how to set the <p> to obey the the margin-bottom value.
    Here's my code for the imagebox [base.css]


    img.portrait
    {float: left;
    margin: 0 25px 25px 10px;
    width: 300px;
    height: auto;
    border: 3px solid #666;
    }


    Please help.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,138
    In your subsequent stylesheet 'screen.css', there's a rule:

    .resume img { margin-bottom:-30px; }

    which is overriding your img.portrait rule from 'base.css'. You can either remove the rule from 'screen.css', or change the rule in 'base.css' to:

    img.portrait
    {float: left;
    margin: 0 25px 25px 10px !important;
    width: 300px;
    height: auto;
    border: 3px solid #666;
    }

    You should generally avoid using '!important' because it can make your CSS very convoluted and difficult to maintain.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58
    Thank you so very much. I just removed the resume img class and the .portrait rule was effected. Can you advice when I should use !important in declaration?
    Thanks again

  4. #4
    Join Date
    Mar 2011
    Posts
    1,138
    It's a tool that should be used only as a last resort - when there is no other practical solution. For example, you might be a part of a large project and not have control over some parts of a design, so you don't have the option of changing the HTML or modifying the stylesheets that get loaded after those that you do control. Otherwise, you should make whatever changes are necessary to make things work without !important.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58
    Hmm. I really appreciate your sparing time to help out and give advice. I've just added to my my knowledge from a complete stranger.
    Thanks Rick. God bless you. Keep doing your good work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles