CODEWITHSUNDEEP
htmlcssblockquote
care567
care567

Reputation: 231

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>

Upvotes: 1

Views: 2610

Answers (4)

Amit
Amit

Reputation: 46361

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>

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

You need to give space between .mission blockquote.style1 if you are not using .style1 class in blockquote tag like this: Demo

.mission blockquote .style1 {..}
.mission blockquote .style1 span {..}

otherwise change your HTML structure like this:

 <blockquote class="style1">        
    <span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span>      
    </blockquote>

Upvotes: 1

akash
akash

Reputation: 2157

add proper space for css rule.

.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>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Now don't used to this 

.mission blockquote.style1 span

according your html used to this 

.mission blockquote .style1 span

.class-1.class-2 means <div class="class-1 class-2"></div>

.class-1 .class-2 means <div class="class-1"> <div class=".class2"></div>

==============================================

.mission blockquote .style1 {
  font: 14px/20px italic;
  padding: 8px;
  background-color: #eee;
  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>

Upvotes: 1

Related Questions