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>
Related
How do I make the background color touch each end. I am fairly new to html and CSS below I have the code that I input for the background. Please let me know exactly what I need to change in my code. I know some of it needs to be changed I just don't know exactly what I need to change.
.black {
background-color: black;
font-size: 20px;
}
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
enter image description here
Nest your code in a body and use margin: 0; in your stylesheet. See below.
.black {
background-color: black;
font-size: 20px;
}
body {
margin: 0;
}
li {
color: white;
}
<body>
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
</body>
div tag always have margin and you have to remove it with margin : 0. and if you want to display black background-color on your entire screen you have to give height: 100vh
.black {
background-color: black;
font-size: 20px;
color: white;
height: 100vh;
}
.body {
margin: 0;
padding: 0;
}
Your code is correct, but you need to wrap the css in <style type="text/css">...</style> tags.
This should be in the <head>...</head> tag on your page:
<head>
<!-- title and other things go here -->
<style type="text/css">
.black {
background-color: black;
font-size: 20px;
}
</style>
</head>
You should remove all the paddings and margins by adding margin:0 and padding:0. Like this:
body {
padding: 0;
margin: 0;
}
This would remove all the paddings and margin so the background will be fully covered.
<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>
I want to make a site for multiple-choice examination. The options must be in horizontal to save more space.
Minimal Working Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Lists</title>
<meta charset="utf-8" />
<style>
li.ans {
color: red;
}
ol.option {
}
ol.option > li {
list-style: lower-alpha;
}
</style>
</head>
<body>
<ol>
<li>
What is the capital of Japan?
<ol class="option">
<li>New York</li>
<li>Jakarta</li>
<li class="ans">Tokyo</li>
<li>Kuala Lumpur</li>
</ol>
</li>
<li>
Who was granted a Noble prize for discovering photo electric effect?
<ol class="option">
<li>Mike Tyson</li>
<li>Bill Gates</li>
<li>Donald Trump</li>
<li class="ans">Albert Einstein</li>
</ol>
</li>
</ol>
</body>
</html>
Output
Desired Output
Question
How to make horizontal ordered list for multiple-choice questions?
ol.option {
display: flex;
justify-content: space-between;
max-width: 500px;
}
Add above code to your inline style and be sure to learn more about flexbox for layout.
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.
I have this page where all the div's seem to work and then all of the sudden my last one breaks. I have two divs in my CSS, one being centeredRight and one centeredLeft. They are lined up down the page. But my last div on the left seems to get pushed to the right.
Here is my CSS.
.centeredlistleft {
width: 300px;
margin: 0 auto;
text-align: left;
border: 2px solid;
float: left;
margin-bottom: 25px;
padding-right: 10px;
}
.centeredlistright {
width: 300px;
margin: 0 auto;
text-align: left;
border: 2px solid;
float: right;
margin-bottom: 25px;
padding-right: 10px;
}
.body {
margin: 0 auto;
padding: 0;
text-align: center;
color: purple;
background-color: pink;
}
And here is my HTML.
<div id="sandrcontainer" class="body" style="width:700px">
<div id="onsieforbaby" class="centeredlistleft" >
<h3> Onesie for Baby </h3>
<ul>
<li>
Price
<ul>
<li>$10.00</li>
</ul>
</li>
<li>
Description
<ul>
<li>It's a boy onesie for a new baby boy. Carter onesies are used. Can ask for specific size. Can also make one for girls using pink.</li>
</ul>
</li>
</ul>
</div>
<div id="largetennistowel" class="centeredlistright">
<h3> Large Tennis Towel </h3>
<ul>
<li>
Price
<ul>
<li>$14.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>16 x 26 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Cotton fleece. Very soft. Washes Well. Can be personalized. Check out the photo gallery for examples. Ask seller what color towels are available at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sandrcontainer2" class="body" style="width:700px">
<div id="largegolftowel" class="centeredlistleft">
<h3> Large Golf Towel </h3>
<ul>
<li>
Price
<ul>
<li>$14.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>16 x 26 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Golf towel. Elegant. Large white towel. Cotton fleece. Very soft. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order. This towel has a grommet and can be hung on golf bags. Could also make this on fingertipe towel for guest bath or on linen towel for that elegant look.</li>
</ul>
</li>
</ul>
</div>
<div id="terrysmalltowel" class="centeredlistright">
<h3> Terry Small Towel </h3>
<ul>
<li>
Price
<ul>
<li>$11.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>11 x 18 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> With fringe. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sandrcontainer3" class="body" style="width:700px">
<div id="contactmerands" class="centeredlistleft" >
<p> Please make sure to send me an email before any orders. I may not have the color towel you want but can always order more </p>
</div>
<div id="smallfingertip" class="centeredlistright" >
<h3> Small Fintertip Holiday Towel </h3>
<ul>
<li>
Price
<ul>
<li>$11.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>11 x 18 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Terry small towel with decorated cat for xmas. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are available at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
TLDR - ctrl f for "Contactmerands" and please explain to me why this box is getting pushed to the bottom RIGHT of the large golf towel box. It should appear under the large golf towel box just like the rest of the divs.
If you would like to see what I mean you can go to my school web portal where I have the page posted HERE.
When an element is floated, it is essentially removed from the flow of the document. Thus, when a parent element's children are all floated, the parent collapses upon itself as it doesn't have any defined dimensions.
To solve this, you could set either overflow:hidden or overflow:auto on the parent elements. This essentially forces it to contain the children elements, therefore preventing it from collapsing.
Add the following CSS and your problem is solved:
#sandrcontainer,
#sandrcontainer2,
#sandrcontainer3 {
overflow: hidden;
}
Sometimes changing the overflow property will conflict with existing CSS. You could alternatively use the pseudo element clearfix:
.clearfix:after {
content: '';
clear: both;
display: table;
}
You must clear your floats in order to achieve the desired effect.
I suggest using a valid clearfix for this.
You need to declare this in CSS:
.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
.clearfix { display:block; }
Now wrap all your elements that should float next to each other in a DIV and apply the clearfix class:
<div class="clearfix">
<!-- put your divs here //-->
</div>
<!--put your last div here //-->