Menu
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.
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
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!
See the desired formatting here
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>
<!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>
319
Instead of trying to nest the image inside another element, or editing every image in photoshop to achieve a proper look for your image border, you need to set the value of the border-radius property to "50%" or "999em". Set the same width and height values.
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
The resize image property is used in responsive web where image is resizing automatically to fit the div container. The max-width property in CSS is used to create resize image property. The resize property will not work if width and height of image defined in the 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.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
