<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><span style="color: #ffffff;">Through the program, you will use these disciplines which include:</span></p>
<ul><li>Neuroscience</li>
<li>Business management</li>
<li>Philosophy</li>
</ul>
<!-- Further down the page I have: -->
<ul><li>Increase your circle of influence</li>
<li>Inspire growth through authenticity</li>
<!-- However the background here is White and it works well with the text colour of dark blue -->
I have a website which has multiple colors as the background and I am putting text on the page.
I'm using "< spans color=#123456/ffffff >" for the text but with the bullet points it's not working correctly.
Ideally I want to add a CSS entry to say UL1 color = black and UL2 color = white. with the bullet points and text as either Black/White.
Currently if I use the span setting I can see the text as black/white but the bullet point is black. With a black background, you can't see the bullet point.
An example is:
Bullet Point 1
Bullet point 2
with a second list further down the page of:
White bullet point on black background
Second White bullet point on black background
Is this possible to do?
Thanks in Advance.
Pher.
Below code sample can help you to change color of buttet points as well text of list
.home {
color: red;
}
.products {
color: blue;
}
.about {
color: yellow;
}
.contact{
color: green;
}
.bullet {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<ul class="bullet">
<li><a class="home" href="#">Home</a></li>
<li>
<a class="products" href="#">Products</a>
</li>
<li><a class="about" href="#">About Us</a></li>
<li><a class="contact" href="#">Contact</a></li>
<li class="dropdownLink">☰</li>
</ul>
</body>
</html>
Related
I want that the div panel_pricing-table becomes an flexbox so that all elements in it stay in this box also when i make my window smaller. My problem is that the elements in the flexbox wont shrink, if i make my browser window smaller. The mistake is in CSS but i dont find it. Can you help me pls?
Screenshot of the problem
Here is my HTML:
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #3a86ff;
}
.panel_pricing-table{
width:80%;
margin: 0 auto;
display :flex;
transform: translateY(70%);
background-color: aliceblue;
min-width: 40px;
max-width: 34200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel_pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</body>
</html>
you should learn responsive_html, it will solve the problem
A (in my opinion quite dirty) way to shrink the elements would be to use transform: scale(x) with x being smaller than 1.
What you probably want to do is use smaller font-sizes on smaller viewports.
A good starting point to learn more about responsiveness in css would be to read about media queries: mdn docs
Add this in your css file. You have to make your image size small
For my reference, i have kept the width 80 you can keep whatever you want
.pricing-img{
width:80%
}
I am working on setting up my website - it still has a long way to go, and I'm new at this. I have a page with a series of clickable boxes representing my portfolio. However, the images I want to be displayed in these boxes are orienting themselves to the left rather than the center of the box. Any advice?
Website where problem is: http://corey-dickinson.com/portfolio.html
Code:
<!doctype html>
<html lang="en">
<head>
<title>CoreyDickinson.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAq6urACkpKQD19fUA4ODgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEwAAADEgAAIhMAADEiAAASITADEiEAAEIiEzEiJAAAMiIhEiIjAAABIiIiIhAAAAQiIiIiQAAAAyIiIiIwAAAAEiIiIQAAAABCIiIkAAAAADIiIiMAAAAAASIiEAAAAAAEIiJAAAAAAAMiIjAAAAAAABIhAAAAAAAAQiQAAADH4wAAw8MAAMGDAADAAwAAwAMAAOAHAADgBwAA4AcAAPAPAADwDwAA8A8AAPgfAAD4HwAA+B8AAPw/AAD8PwAA" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="site-wrap">
Menu
<div class="offcanvas_menu" id="offcanvas_menu">
<ul class="mb-5">
<li>Bio</li>
<li class="active">Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<ul class="social">
<li></li>
<li></li>
<li></li>
</ul>
</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib and coded in Brackets by CD
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
<px-2 class="fa fa-home">
<div class="mx-auto" style="width: 200px;">
<h1>Portfolio</h1>
</div>
<hr><hr>
<div class = "container">
<ul class="portfolio-list">
<li>
<a href="https://redcross.carto.com/viz/3ea45828-7769-4f92-9170-bec6c63dfc9a/public_map">
<img src="img/arcban2.jpg" alt="" style="image-orientation: center">
<div class="text">
<h3>Diaspora Mapping RC</h3>
<span>A project for the Red Cross that designed maps of the distribution of selected diaspora populations across the United States. The map was used by large numbers of volunteers to coordinate outreach programs.</span>
</div>
</a>
</li>
<li>
<a href="index_search.html">
<img src="img/qcwide.png" alt="">
<div class="text">
<h3>Quiet Contractors Directory</h3>
<span>Project for small non-profit focused on noise polution to create a directory/webmap of environmentally friendly contractors across the US.</span>
</div>
</a>
</li>
<li>
<a href="MukigavMutooroMap-July2017.pdf">
<img src="img/kasiisibanner2.png" alt="">
<div class="text">
<h3>Tribal Map Western Uganda</h3>
<span>A map produced for the Kasiisi project, a small NGO in Uganda. This map outlines the spatial patterns in different tribes in the region. This data was derived from a survey I oversaw that was distributed using XML forms in ODK. </span>
</div>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=u7Cuy5AO88Y">
<img src="img/TED_banner-resized.png" alt="">
<div class="text">
<h3>TED Talk Nauru</h3>
<span>A TED talk outlining the results and reflections from a project I created. The project was focused on mapping the environmental degredation on Nauru, a small island nation in the South Pacific.</span>
</div>
</a>
</li>
<li>
<a href="A)%20Report_Living_Situation_Refugee_Camps_2017.pdf">
<img src="img/UNHCR_banner2.png" alt="">
<div class="text">
<h3>Refugee Camp Report</h3>
<span>An analysis of quality of life patterns in Syrian refugee camps, developed for a class at Clark University. The results of this project were submitted to UNHCR.</span>
</div>
</a>
</li>
<li>
<a href="Cape_Cod_Sand.mp4">
<img src="img/nps-banner-2.png" alt="">
<div class="text">
<h3>Analysis of changing seashore patterns</h3>
<span> Analyzed the effects of sea level rise on Nauset Spit for the North Atlantic Coastal Lab for Cape Cod National Seashore. The project involved exstensive research of historical maps and arial imagary.</span>
</div>
</a>
</li>
</ul>
<div class = "container">
<h1 class="mb-5">Download Zip</h1>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Add a class for the tag like so
<img class="center_img" ..... />
and then in your css have:
img.center_img{
margin: y_margin_values auto;
}
Setting two values for margin sets first value as top and bottom, second as left and right. Setting the left and right values to auto will center the <img> within its container. If that still doesn't work, set it's parent <a> or parent <li>' to havewidth: 100% ' or whatever width you desire.
There are few possible way to get the desired result. lets discuss few of them
Pulling the Image in center
Here we will just pull the image to center, although image size will be the same as it is now. so your li width is full width, but image will be in center may be if size(width) of image if less.
apply the below css to the image inside your li
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
setting image as background to your li > a
And another when you want the size of the image same as your li its better to set the image as background rather than showing it as html element inside your li.
So you can apply the below css, make it sure we need to set the background-image separately for each of your li. and can remove the img element side your li a.
.portfolio-list li a
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 230px;
}
.portfolio-list li a.first
{
background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}
.portfolio-list li a.second
{
background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.
Add this to your CSS
.portfolio-list li a {
text-align: center;
}
How do I stop the right menu dropdown child elements from going off the page? I know it is simple but don't know the CSS to change to get it to work. Any help is appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<style>
ul{background-color: #4CAF50; width: 100%}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover" style="float:right">
Test
<ul class="pure-menu-children">
<li class="pure-menu-item"">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want to have them so the start at the right hand side of the page but not go off.
thanks
With some tweaking and adding in your CSS, you can achieve this. See this JSFiddle, I also cleaned your code.
Add the class .right-menu to the most right menu to get this working.
.pure-menu-horizontal .right-menu .pure-menu-children {
left: auto; /* Position from right, not from left */
right: 0; /* Position from right, not from left */
}
Update
I used display: flex; to address the problem that Firefox's having to properly show the menu you wanted.
This is what you need to add:
.pure-menu-horizontal .pure-menu-list.pure-menu-list {
display: flex;
}
.pure-menu-horizontal .right-menu {
margin-left: auto;
}
See my updated JSFiddle. Read more about the handy flexbox property at Mozilla Developer Network.
https://jsfiddle.net/oski369/2Lzc6q95/
When I plug it into js fiddle, the background color of each li changes according to it's class (even or odd) as I want them to. However when I run the same code in my browser the background colors are ignored. I also note that in the fiddle the "cover" property I put in my background-image is ignored while it works fine in my browser.
I am using bootstrap in my text editor while obviously that is not the case in fiddle. Idk if this could be the issue but how would I accomplish the same alternating color change between list items that appears in the fiddle in my text editor?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="css/stockData.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="text-primary">
<h1 >StockData</h1>
<div class="row" id="stockTable">
<ul>
<li class="odd">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
</ul>
</div>
<script src="stockData.js"></script>
</body>
</html>
CSS:
#stockTable {
width:38%;
margin-left: 2px;
}
.odd{
background:rgba(0,0,0,.8);
}
.even{
background:rgba(0,0,0,.6);
}
ul{
list-style-type:none;
}
body{
background-image:url('http://evilcorps.com/wp-content/uploads/2014/12/wall_street_1920.jpg');
background-size: cover;
}
h1{
margin-left: 2px;
}
If i understood your question correctly, you want to give background colour to to children of list item li depending on whether they are odd or even.
You should use nth-child in css on the children of list item li to accomplish this.
You should try something like this:
1) The css style given below will make the background of all even children as blue.
li span:nth-child(2n){
background:#00f;
}
2)The css style given below will make the background of all odd children as white.
li span:nth-child(2n+1){
background: #fff;
}
i hope that helps :)
In your span and a tags you are defining the bootstrap columns with class="col-md-4" or class="col-md-6" respectively. Try giving the li tags a row of their own to house those columns.
<li class="odd row">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even row">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd row">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
Here's a demo on boot.ply that should have all your bootstrap code built in.
Try this:
.odd{
background:rgba(0,0,0,.8) !important;
}
.even{
background:rgba(0,0,0,.6) !important;
}
"!important" will override any other styles.
OK, so if it's considered a hack, then I think the only way for you to do that is to change values in Bootstrap.css or do it with your own classes or something like this:
li {
background:rgba(0,0,0,.8);
}
li:nth-of-type(2n) {
background:rgba(0,0,0,.6);
}
While you should remove .odd and .even class or it won't work. You can give to ul your own class and then write ul.class-name li { } in CSS instead of li to make it change only this specific ul's li colors.
I am seeking some assistance creating a border that scales with different screen sizes/devices. I've attached both the desired outcome, html/css I've written so far and a live page to preview the results so far.
Issues/Questions:
The border is set using pixels, and I'm concerned that it won't scale to the proper proportions on different devices/browsers.
The corners don't match very well.
Is there a better way to achieve the desired border so as to scale proportionally and achieve the desired corner formatting? Maybe a vector image?
I'm close to achieving a match, but there must be a (more simple? better?) way to re-create that type of border. Many thanks for looking this over and for your input.
Regards,
Zephyr
EDIT/UPDATE:
I've also tried using background-image: and creating six .png files, one for each corner with a solid white background, and one each for the top/bottom and left/right sides of the "border". Again, it's close but the images don't always line up correctly.
There must be a way to do this, perhaps in a svg image that scales itself depending on the size of the section its in, but that is way beyond my talents.
Thanks for considering the issue!
The desired formatting:
See the desired formatting here
The current results & html/css:
See the border-image: results here
See the background-image: results here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
EP Layout Test
</title>
<style type="text/css">
.ep {
background-image: url(ep_border_top_left-w.png), url(ep_border_top_right-w.png),url(ep_border_bottom_right-w.png), url(ep_border_bottom_left-w.png), url(ep_border_vertical.png), url(ep_border_vertical.png), url(ep_border_horizontal.png), url(ep_border_horizontal.png);
background-position: top left, top right, bottom right, bottom left, left, right, top, bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ep_content {
padding: 2.5em;
}
.ep_title {
background-color: black;
padding: 0.5em 0em;
color: white;
}
p {
text-align:left;
}
</style>
</head>
<body>
<p>
This is some regular text.
</p>
<div class="ep">
<div class="ep_content">
<h3 class="ep_title">
SINGLE-ENGINE FAILURE/FLAMEOUT
</h3>
<p>
Symptoms:
</p>
<ol>
<li>
TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero.
</li>
<li>
NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated.
</li>
</ol>
<p>
Corrective Action:
</p>
<ol>
<li class="boldface">
Nr - MAINTAIN.
</li>
<li class="boldface">
CONTGCY PWR - ON.
</li>
<li class="boldface">
Altitude/Airspeed - AS REQUIRED.
</li>
<li class="boldface">
Fuel/stores - JETTISON AS REQUIRED.
</li>
<li class="boldface">
ENG Anti-ice - AS REQUIRED.
</li>
<li>
Analyze.
</li>
</ol>
<p>
If no indication of mechanical malfunction or engine fire:
</p>
<ol start="7">
<li>
Perform Engine Restart Procedure.
</li>
</ol>
<p>
If Engine Restart Procedure is not to be performed:
</p>
<ol start="8">
<li>
Conduct EMER ENG SHUTDOWN.
</li>
<li>
LAND AS SOON AS PRACTICABLE.
</li>
</ol>
</div>
</div>
<p>
This is some regular text.
</p>
</body>
</html>
Original code using border-image
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
EP Layout Test
</title>
<style type="text/css">
.ep {
border-width: 32px 31px 32px 31px;
border-image: url(chapter_3_background-small.png) 32 31 32 31 round round;
border-color: #cccccc;
border-style: solid;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ep_title{
background-color: black;
padding: 0.5em 0em;
color: white;
}
p {
text-align:left;
}
</style>
</head>
<body>
<p>
This is some regular text.
</p>
<div class="ep">
<h3 class="ep_title">
SINGLE-ENGINE FAILURE/FLAMEOUT
</h3>
<p>
Symptoms:
</p>
<ol>
<li>
TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero.
</li>
<li>
NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated.
</li>
</ol>
<p>
Corrective Action:
</p>
<ol>
<li class="boldface">
Nr - MAINTAIN.
</li>
<li class="boldface">
CONTGCY PWR - ON.
</li>
<li class="boldface">
Altitude/Airspeed - AS REQUIRED.
</li>
<li class="boldface">
Fuel/stores - JETTISON AS REQUIRED.
</li>
<li class="boldface">
ENG Anti-ice - AS REQUIRED.
</li>
<li>
Analyze.
</li>
</ol>
<p>
If no indication of mechanical malfunction or engine fire:
</p>
<ol start="7">
<li>
Perform Engine Restart Procedure.
</li>
</ol>
<p>
If Engine Restart Procedure is not to be performed:
</p>
<ol start="8">
<li>
Conduct EMER ENG SHUTDOWN.
</li>
<li>
LAND AS SOON AS PRACTICABLE.
</li>
</ol>
</div>
<p>
This is some regular text.
</p>
</body>
</html>
Could this solve your problem? http://jsfiddle.net/65nhJ/
<div id="borderImage" >
<div class="ep" >Text</div>
</div>
CSS:
#borderImage{
/* background-image: url(chapter_3_background-small.png); */ /*Your border image*/
background-color: red; /*removeme*/
width: 70%;
margin: 0 auto;
padding: 20px; /*Border size*/
}
.ep {
background-color: white;
}
Instead of use a real border-image use a fake parent div with the background of your image (repeated) and then set to white the background to don't show background (border) of the parent div.
I you need more help just comment.
SOLUTION!
As suggested by José Cabo (above) I stumbled across an example of the repeating-linear-gradient property here and coupled with a solid white background for the content div, I have exactly what I was hoping to achieve - all with only a few lines of CSS.
No messing with images and corners and pixel widths... grrr.
Simple, elegant, scalable - beautiful!
I have more testing to do using other browsers, but it works in Safari, and that's a giant leap toward what I'm trying to achieve.
See the solution here
Regards,
Zephyr
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
EP Layout Test
</title>
<style type="text/css" >
.ep {
padding: 1.5em;
background: -moz-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em);
background: -ms-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em);
background: -o-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em);
background: -webkit-repeating-linear-gradient(-45deg, black, black 1.1em, white 1em, white 2em);
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ep_content {
padding: .5em;
background: white;
}
.ep_title {
background-color: black;
padding: 0.5em 0em;
color: white;
}
p {
text-align:left;
}
</style>
</head>
<body>
<p>
This is some regular text.
</p>
<div class="ep">
<div class="ep_content">
<h3 class="ep_title">
SINGLE-ENGINE FAILURE/FLAMEOUT
</h3>
<p>
Symptoms:
</p>
<ol>
<li>
TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero.
</li>
<li>
NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated.
</li>
</ol>
<p>
Corrective Action:
</p>
<ol>
<li class="boldface">
Nr - MAINTAIN.
</li>
<li class="boldface">
CONTGCY PWR - ON.
</li>
<li class="boldface">
Altitude/Airspeed - AS REQUIRED.
</li>
<li class="boldface">
Fuel/stores - JETTISON AS REQUIRED.
</li>
<li class="boldface">
ENG Anti-ice - AS REQUIRED.
</li>
<li>
Analyze.
</li>
</ol>
<p>
If no indication of mechanical malfunction or engine fire:
</p>
<ol start="7">
<li>
Perform Engine Restart Procedure.
</li>
</ol>
<p>
If Engine Restart Procedure is not to be performed:
</p>
<ol start="8">
<li>
Conduct EMER ENG SHUTDOWN.
</li>
<li>
LAND AS SOON AS PRACTICABLE.
</li>
</ol>
</div>
</div>
<p>
This is some regular text.
</p>
</body>