[resolved] 1) Add box with coloured fill? 2) Shorten box widths? (3 posts)

  1. lmighton
    Posted 2 years ago #

    To this webpage http://igrsj.test.sites.olt.ubc.ca/about-grsj/about-igrsj/, I wish for the quote at the top to be in a coloured box that has shorter widths than the page width.
    How do I do these two things?
    If CSS style, what code do I put into the HTML?

  2. RossMitchell
    Posted 1 year ago #

    It looks like you have already done this.
    I see
    <div style="border: 1px solid red; padding: 5px; margin: 5px;clear:both;width:500px;">
    While this works it is not respected as best practice. The modern concept is that layout and presentation is controlled by the css files (this permits flexibility like responding to various displays), and have the content in the page itself. Embedding layout codes in the div statement breaks this separation.
    Better practice is to put a class in the div, and put the styling in the css file. So the div would change to:
    <div class="quote">
    and in your style.css file you would have:

    .entry-content .quote {
     border: 1px solid red;
     padding: 5px;
     margin: 5px;

    This will style all such blocks the same, if you want to make it specific to this post only you would change the leadin to:
    .blog-1842 .entry-content .quote {

  3. lmighton
    Posted 1 year ago #

    Thank you

Topic Closed

This topic has been closed to new replies.

About this Topic