Search code examples
htmlcssblockquote

Not displaying blockquote and background in html

I am trying to create a snippit of HTML which looks like this:

enter image description here

I've written some code, but the background, italics, and left side quotes are not displaying correctly. Here's what I've tried:

mission blockquote.style1 {
    font: 14px/20px italic;
    padding: 8px;
    background-color: #000000;
    border-top: 1px solid #e1cc89;
    border-bottom: 1px solid #e1cc89;
    margin: 5px;
    background-image: url(../images/openquote1.gif);
    background-position: top left;
    background-repeat: no-repeat;
    text-indent: 23px;
}

.mission blockquote.style1 span {
    display: block;
    background-image: url(images/openquote1.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}
<div class=""mission>
    <h2>Mission</h2>
    <hr>
    <blockquote>
        <p class="style1">
            <span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span>
        </p>
    </blockquote>
</div>

Solution

  • CSS has rules and standards, when you don't follow them you can't expect "magic" to happen.

    You didn't:

    1. follow proper selector rules (mission blockquote.style1 is not the same as .mission blockquote .style1)
    2. follow proper font property rules (must have font-family, must be in correct order)
    3. use proper html structure (class=""mission is just wrong)

    On top of that:

    1. if you expect quote signs, you need to put them in the HTML
    2. if you set a full solid black background, you're not going to see anything

    Long story short: Take your time to write proper code.

    .mission blockquote .style1 {
  font: italic 14px/20px serif;
  padding: 8px;
/*      background-color: #000000;*/
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
/*      background-image: url(../images/openquote1.gif);*/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
.mission blockquote .style1 span {
    	display: block;
/*        	background-image: url(images/openquote1.gif);*/
    	background-repeat: no-repeat;
    	background-position: bottom right;
  	}
    <div class="mission">
<h2>Mission</h2>
<hr>
<blockquote><p class="style1"><span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span></p></blockquote>
</div>