Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Create a border around some code:


thecigarbible
Go to solution Solved by tuanphan,

Question

Hello community,

I have created some code to reflect a score on my website. I have limited knowledge about coding and have just thought myself it using google.

I have attached a photo of what the following code looks like. 

<div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
<div class="text-allign-css">
  <p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">Cigar Bible Score</p>
</div>

I want to now create a red frame around this code and also for the percentage as entered into the code to be shown on the right hand side. 

Can somebody please help me or guide me in the right direction. 

 

Many thanks,

Max

Screen Shot 2019-10-27 at 17.56.19.png

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@thecigarbible Wrap your code in div tag, then use CSS for div to create red border <div class="kl-frame"> <div class="kl-left"> <div class="star-ratings-sprite"><span st

.kl-right p { text-align: center; } .kl-frame { flex-direction: column-reverse; } .kl-right { margin-bottom: 10px; }  

Posted Images

9 answers to this question

Recommended Posts

  • 0

@thecigarbible Wrap your code in div tag, then use CSS for div to create red border

<div class="kl-frame">
  <div class="kl-left">
  	<div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
  	<div class="text-allign-css">
    	<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">Cigar Bible Score</p>
  	</div>
  </div>
  <div class="kl-right">90%</div>
</div>

then add this CSS to Home > Design > Custom CSS

.kl-frame {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    max-width: 200px;
    margin: 0 auto;
}

 

Edited by tuanphan
Link to post
  • 0

Hi,

 

apologies about the late reply.

my website can be found under www.thecigarbible.com

 

the code for that tag is as follows:

 

.star-ratings-sprite {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;
  
  &-rating {
    background: url("https://static1.squarespace.com/static/5d97821167368768bccd620f/t/5db323b63c21b65b041a3822/1572021174809/star-rating-sprite.pnghttps://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    background-position: 0 100%;
    float: left;
   
    height: 21px;
    display:block;
  }
}

.text-allign-css {
  text-align: center; 
}
 

 

many thanks 

Link to post
  • 0

@tuanphan

Could you please help me.

I have modified the following code to look like this.

 

Quote

<div class="box fade-in two">
<div class="kl-frame">
  <div class="kl-left">
     <div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
     <div class="text-allign-css">
        <p style ="font-family:georgia,garamond,serif;font-size:15px; color:#404040;">Cigar Bible Score</p>
      </div>
  </div>
  
  <div class="kl-right">
       <p style = "padding-top: 5px;  font-family:Times,Optima;font-size:60px;font-style:it;color:#535353;">90</p>
  </div>
</div>
</div>

Quote

.kl-frame {
    border: 7px double #1F1111;
  padding-left: 5px;
  padding-right: 5px;
   padding-top: 5px;
    display: flex;
    justify-content: center;
    max-width: 200px;
    margin: 0 auto;
}

How can I make it so the 90 is above  and in line with the rest (stars & The Cigar Bible Score) and everything is framed in a perfect square.

 

I apologies to pester but I feel you can answer this for me 🙂

Edited by thecigarbible
Mispelling
Link to post
  • 0
24 minutes ago, thecigarbible said:

@tuanphan 

I just realised pasting your name does not automatically tag you. Sorry my mistake.

what is access password...

Link to post
  • 0
40 minutes ago, thecigarbible said:

Sorry I was shortly offline due to maintenance. Back online now @tuanphan

.kl-right p {
    text-align: center;
}
.kl-frame {
    flex-direction: column-reverse;
}
.kl-right {
    margin-bottom: 10px;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...