6

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:

  1. The border is set using pixels, and I'm concerned that it won't scale to the proper proportions on different devices/browsers.
  2. The corners don't match very well.
  3. 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>
Zephyr Mays
  • 477
  • 3
  • 7
  • 24
  • 4
    +1 For a very well formatted post and research. +1 more for the fact you're a new user doing just that. – tim.baker Feb 23 '13 at 16:59

2 Answers2

1

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.

José Cabo
  • 6,149
  • 3
  • 28
  • 39
  • Thanks for the response. I would like to have the contents of the div enclosed by the stylized slanted border. The issues I'm having involve the hash marks not lining up appropriately when the size of the text is changed or the size of the screen is different. Is it possible to use CSS to 'draw' a border that closely mimics the example image above? – Zephyr Mays Feb 23 '13 at 18:02
  • 1
    If you want draw your own border you could use CSS3 gradients applied to borders. For example: http://css-tricks.com/examples/GradientBorder/ Of course, the gradients you will draw will not be "gradients" only two colors: black&white – José Cabo Feb 23 '13 at 18:06
0

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>

Zephyr Mays
  • 477
  • 3
  • 7
  • 24