I'm trying to put some buttons onto some flex containers for a sort of middle-of-the-page dropdown menu. I need four buttons that fill the space of the flex container, that appear on hover. I can get the hover action working, but my buttons don't show up and are a little off. I'm very new at this and have really hit a wall here.
Essentially, I need a box that splits into 4 other clickable boxes on hover, all contained inside the original box.
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover,
.nav-box-citations:focus+.nav-box-citations-buttons,
.nav-box-citations-buttons:hover {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>APA</button>
<button type="button-group" class=nav-box-citations-buttons>MLA</button>
<button type="button-group" class=nav-box-citations-buttons>AMA</button>
<button type="button-group" class=nav-box-citations-buttons>Chicago</button>
</div>
</div>
</div>
Produces this:
The trick is to target just the children of the hovered parent:
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
.nav-box-container {
width: 220px;
margin: 15px 7px 0px 7px;
flex-grow: 1;
}
#media (max-width: 767px) {
.nav-box-container {
width: auto;
}
.nav-box-citations {
color: #282828;
background-color: #fff;
outline: 3px solid #bbb;
margin: 0px;
padding: 25px 25px 30px 25px;
padding-right: 19px;
min-height: 160px;
font-size: 17px;
font-weight: 500;
height: 100%;
}
.nav-box-citations-buttons {
display: none;
width: 100%;
background-color: #fff;
outline: #282828 solid;
text-decoration: none;
}
.nav-box-citations:hover .nav-box-citations-buttons {
display: inline;
}
<div class="nav-box-container">
<div class="nav-box-citations">
<h3 class="nav-box-title">Citation Guides</h3>
<p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
<div class="btn-grp">
<button type="button-group" class=nav-box-citations-buttons>
APA
</button>
<button type="button-group" class=nav-box-citations-buttons>
MLA
</button>
<button type="button-group" class=nav-box-citations-buttons>
AMA
</button>
<button type="button-group" class=nav-box-citations-buttons>
Chicago
</button>
</div>
</div>
</div>
I would like to surround a number in a circle like in this image:
Is this possible and how is it achieved?
Here's a demo on JSFiddle and a snippet:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>
My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.
The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.
See it on JSFiddle.
For circle sizes varying based on the content this should work:
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 8px;
margin-right: 8px;
}
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>
It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.
Update to remove inner element:
.numberCircle {
display: inline-block;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle:before,
.numberCircle:after {
content: '\200B';
display: inline-block;
line-height: 0px;
padding-top: 50%;
padding-bottom: 50%;
}
.numberCircle:before {
padding-left: 8px;
}
.numberCircle:after {
padding-right: 8px;
}
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>
Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.
If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
the easiest way is using bootstrap and badge class
<span class="badge">1</span>
This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.
http://jsfiddle.net/qod1vstv/
CSS:
.numberCircle {
font: 32px Arial, sans-serif;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
}
HTML:
<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
You can use the border-radius for this:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
Play with the border radius and the padding values until you are satisfied with the result.
But this won't work in all browsers. I guess IE still does not support rounded corners.
I am surprised nobody used flex which is easier to understand, so I put my version of answer here:
To create a circle, make sure width equals height
To adapt to font-size of number in the circle, use em rather than px
To center the number in the circle, use flex with justify-content: center; align-items: center;
if the number grows (>1000 for example), increase the width and height at same time
Here is an example:
.circled-number {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
}
.circled-number--big {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
}
<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>
Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your <span> (or whatever) element and you're done.
Note that you might need to adjust margin and padding classes if your content has more than one digits.
My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.
HTML:
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>
CSS:
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}
It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.
Currently I don't think it is possible. Anyone?
Here's a demo on JSFiddle and a snippet:
/* Creating a number within a circle using CSS */
.numberCircle {
font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
display: inline-block;
color: #fff;
text-align: center;
line-height: 0px;
border-radius: 50%;
font-size: 12px;
min-width: 38px;
min-height: 38px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 1px;
margin-right: 1px;
}
/* Some Back Ground Colors */
.clrGreen {
background: #51a529;
}
.clrRose {
background: #e6568b;
}
.clrOrange {
background: #ec8234;
}
.clrBlueciel {
background: #21adfc;
}
.clrMauve {
background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>
.numberCircle {
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
float: left;
border: 2px solid #000000;
color: #000000;
text-align: center;
margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>
Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW
Required no extra work.
Thanks John Noel Bruno
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</button>
</div>
Do something like this in your css
div {
width: 10em; height: 10em;
-webkit-border-radius: 5em; -moz-border-radius: 5em;
}
p {
text-align: center; margin-top: 4.5em;
}
Use the paragraph tag to write the text. Hope that helps
Improving the first answer just get rid of the padding and add line-height and vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number.
For example 123;
HTML:
<div class="numberCircle">30</div>
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
but an easiest solution is to use Bootstrap
<span class="badge" style ="float:right">123</span>
Heres my way of doing it, using square method. upside is it works with different values, but you need 2 spans.
.circle {
display: inline-block;
border: 1px solid black;
border-radius: 50%;
position: relative;
padding: 5px;
}
.circle::after {
content: '';
display: block;
padding-bottom: 100%;
height: 0;
opacity: 0;
}
.num {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.width_holder {
display: block;
height: 0;
overflow: hidden;
}
<div class="circle">
<span class="width_holder">1</span>
<span class="num">1</span>
</div>
<div class="circle">
<span class="width_holder">11</span>
<span class="num">11</span>
</div>
<div class="circle">
<span class="width_holder">11111</span>
<span class="num">11111</span>
</div>
<div class="circle">
<span class="width_holder">11111111</span>
<span class="num">11111111</span>
</div>
You can use
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span>A grey circle with number inside</h1>
<h1><span class="red">2</span>A red circle with number inside</h1>
<h1><span class="blue">3</span>A blue circle with number inside</h1>
<h1><span class="green">4</span>A green circle with number inside</h1>
<h1><span class="pink">5</span>A pink circle with number inside</h1>
Thank to https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
Something like this could work (for numbers 0 to 99):
.circle {
border: 0.1em solid grey;
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
}
.circle p {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
color: grey;
}
<body>
<div class="circle">
<p>30</p>
</div>
</body>
You work like with a standard block, that is a square
This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure.
.circle {
width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border: 1px solid black;
}
<div class="circle"><span>1234</span></div>
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show
I am trying to work out how I can put a border around my page. Here is my html and css:
<html>
<head>
<title>Royal Aura club</title>
<link rel="stylesheet" type="text/css" href="restyle.css" / >
</head>
<body>
<main id="main">
<div id="header">
<h1> Royal Aura club</h1>
<div id="nav">
<div class="navitem">Home</div>
<div class="navitem">Restaurant </div>
<div class="navitem">Gallery</div>
<div class="navitem">Guest list</div>
</div> <div class="navitem">Job Vancancies</div>
<div id="content">
<div id="textblock">
<h2>Why Royal Aura?</h2>
<p>
Royal Aura club and restaurant is located in Mayfair just a walk away from the Ritz.
We will guarantee you will have a ball of a time with our brilliant DJ playing the tunes while your sipping cocktails away and dancing the night away.
<p>
Aura is a glamorous and sophisticated club that has a beautiful decor to get the mood. If you fancy doing VIP in style drop us a e-mail, we will be glad to help. Not to mention our fabulous food dishes we serve are to die for.
Please make sure you e-mail us 24 hours before the day you want to come and party or dine.
</p>
</div>
</body>
</html>
Css-
body {
front-family: verdana, arial, sans-serif;
margin:0;
padding: 0;
background-color: #FFFDED;
border:0px;
}
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
#header {
border-bottom:none
}
#content {
padding: 6em 1em;
border: none;
margin: 20px;
}
#footer {
}
h1 {
font: bold 1.5em Tahoma, arial, sans-serif;
color: #826BA9;
font-style: italic;
background-image: url(relogo.jpg);
background-repeat: no-repeat;
padding: 1em 1em 1em 120px;);
background-repeat: no-repeat;
padding: 1em 1em 1em 100px;
}
.navitem {
float: left;
border-right: 3px solid #999999;
border-top:1px solid #999999;
text-align: left;
}
#textblock {
background-color: #D4CAE2;
width: 300px;
border: 4px solid #000000;
padding: 10px 7px;
float: left;
font-size: 110%;
text-align: left;
height: 400px
}
a:link {
text-decoration: none;
color: #000000;
padding-left: 0.em;
padding-right: 0.5em;
float: right;
}
a:visited {
text-decoration: none;
color: #826BA9;
padding-left: 0.5em;
padding-right: 0.5em;
}
a:hover {
text-decoration: none;
color: #826BA9;
background-color: #F4E8F0;
display: block;
}
body {
border: 5px solid red;
}
This is all you need to do:
html{
border: solid;
}
I don't think <main> is a valid tag. Also, make sure to close your tags.
Replace this:
</body>
</html>
With this:
</div>
</div>
</body>
</html>
And replace this:
<main id="main">
With this:
<div id="main">
Lastly, replace this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
Wtih this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 1px solid red; /* width, style, colour */
}
And change the border property accordingly.
If you want a border around the entire page, put that border property within body{} in your CSS.
try this, wouldnt say its the proper way tho
body {
background-color: green;
border: 5px solid white;
padding: 100%;
margin: 0;
}
You will need to adjust the properties to match your desired result, but this should place a border around your page.
#main {
border: 1px solid red;
}