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>
<body onload="load_animes()">
<div class="head">
<!-- <h1 id="head_title">Hello</h1> -->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7206d8a9-d46d-4479-b47a-8cf6d05bc830/d7zzah3-c53850a6-5d66-437b-a581-99d84fea1923.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNzIwNmQ4YTktZDQ2ZC00NDc5LWI0N2EtOGNmNmQwNWJjODMwXC9kN3p6YWgzLWM1Mzg1MGE2LTVkNjYtNDM3Yi1hNTgxLTk5ZDg0ZmVhMTkyMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.oSQAAL-K2KoIhZJTBTpnvqqcy2cC8QjmgsUwlsS-0Uk" id="head_bg">
<h1 id="desc">
This is a website where I post my shitty reviews about anime that I have watched. All anime are sorted based on the first alphabet of their names
</h1>
<h1 id="note">
<strong>Note:</strong> There will be spoilers in my reviews
</h1>
</div>
<div id="view">
<div id="layer"></div>
<div id="content">
<h1 id="view_title"></h1>
<h2 id="view_genres"></h2>
<p id="view_note">Note: I don't assign the genres according to MAL, I assign the genres based on my own opinion</p>
<h3 id="view_rating"></h3>
<h4 id="view_review"></h4>
<button id="back" onclick="back()">Back To List</button>
<img id="view_img">
</div>
</div>
my style:
body {
background-color: #28282B;
/* background-image: url("img_tree.gif"); */
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
*{
font-family: Arial, Helvetica, sans-serif;
}
#view{
z-index: 0;
position: relative;
height: max-content;
margin: -8px;
}
#view #layer {
background-color: black;
opacity: 0.5;
height: max-content;
width: 100%;
position: absolute;
z-index: 0;
}
#view div {
position: absolute;
}
#view #view_title{
font-size: 4rem;
color: white;
margin-left: 2%;
z-index: 1;
}
#view #view_genres{
margin-left: 2%;
}
#view #view_note{
color: rgb(243, 226, 226);
font-size: 1.5rem;
border-radius: 10px;
margin-left: 2%;
font-weight: bolder;
}
#view #view_rating{
color: white;
margin-left: 2%;
font-size: 1.5rem;
font-family: 'open sans',arial,sans-serif;
}
#view #view_review{
background-color: #18181a;
color: white;
font-size: 2rem;
margin-left: 5%;
margin-right: 5%;
border-radius: 5px;
z-index: 1;
font-weight: lighter;
}
#view #view_img{
max-height: 80%;
max-width: 70%;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
#view #back:hover{
color: #FFD700;
}
#view #back{
font-size: 3.5rem;
background-color: #18181a; /* Green */
border: none;
color: white;
text-align: center;
outline: none;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}
i set my #view element (which is the parent element) to height: max-content but it isn't setting the height, the height is still 0, but the width is maxed and as u can see, there are no other parent elements containing #view. I've changed the body's style to height: max-content as well but it ain't working
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
I have a big bar of white space below my footer and cant figure out how to remove it. Basically I want everything below the footer to be gone.
Any help appreciated, just learning code so new to this.
https://jsfiddle.net/ptgL5pv6/1/
function active() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == 'Search') {
search_bar.value = '';
search_bar.placeholder = 'Search';
}
}
function inactive() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == '') {
search_bar.value = 'Search';
search_bar.placeholder = '';
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana, Arial, sans-serif;
}
.container {}
.top_section {
background: #000;
padding: 20px;
}
.first_image {
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a {
position: relative;
color: #fff;
Text-decoration: none;
padding: 20px;
}
.nav_bar a:hover {
color: #fff;
Text-decoration: underline;
}
.third_bar {
background: #000;
position: relative;
height: 350px;
}
.second_image {
position: relative;
text-align: center;
height: 370px;
}
#search_bar {
position: relative;
bottom: 50px;
height: 150px;
border: 1px solid #000;
border-right: none;
font-size: 36px;
padding: 10px;
outline: none;
width: 800px;
-webkit-border-top-left-radius: 10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 110px;
}
#search_button {
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover {
background: #f6e049;
}
.form {
width: 200px;
margin-top: -220px;
padding-left: 280px;
}
.footer {
position: relative;
background: #000;
color: #fff;
bottom: -10px;
}
.copyright {
position: relative;
bottom: -8px;
left: 0;
overflow: hidden;
}
.footer_notes {
position: relative;
text-align: center;
bottom: 10px;
left: 100px;
overflow: hidden;
}
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png" />
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
<img src="whisky.png">
</div>
<div class="form">
<form action="search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
<input type="submit" id="search_button" value="Go!" />
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
Firt of all, edit this .footer-notes css and remove left:100px; from it. It is making your page width greater then 100%
.footer_notes{
position: relative;
text-align: center;
bottom: 10px;
padding-left: 100px;
overflow: hidden;
max-width:100%;
}
then dont declare height on .third-bar this makes your footer come up even if their is content above the footer
.third_bar{
background:#000000;
position: relative;
}
Even after doing this your footer will have maybe 20px or so space below it because their is not enough content above it. If you want your footer to always stay at bottom in any device then add this to your footer's css.
.footer{
position:fixed;
background: #000000;
color: #ffffff;
bottom:0px;
width:100%;
}
If you go through with all three changes this is what your page will look like :
function active(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == 'Search'){
search_bar.value=''
search_bar.placeholder= 'Search'
}
}
function inactive(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == ''){
search_bar.value='Search'
search_bar.placeholder= ''
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana,Arial,sans-serif;
}
#container{
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
background-color:black
}
.top_section {
background:#000000;
padding: 20px;
}
.first_image{
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px; solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a{
position: relative;
color:#ffffff;
text-decoration:none;
padding: 20px;
}
.nav_bar a:hover{
color: #ffffff;
text-decoration:underline;
}
.third_bar{
background:#000000;
position: relative;
}
.second_image{
position: relative;
text-align: center;
height:80vh;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#search_bar
{
position: relative;
bottom: 50px;
height: 150px;
border:1px solid #000000;
border-right: none;
font-size: 36px;
padding: 10px;
outline:none;
width: 800px;
-webkit-border-top-left-radius:10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right:110px;
}
#search_button
{
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius:10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover
{
background:#f6e049;
}
.form{
width:200px;
margin-top: -300px;
padding-left:280px;
}
.footer
{
position: fixed;
background: #000000;
color: #ffffff;
bottom: 0px;
width:100%;
}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}
.footer_notes
{
position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png"/>
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
</div>
<div class="form"><form action= "search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/>
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
I'm having some troubles making order numbers for images (dynamically).
I have this right now:
The images have width 120px, and the orange circles are placed with margins in a separate div.
<div>
<img src="../IMG_PATH/{{$local[$i]['image']}}"
width="120" class="img_doctor">
</div>
<div class="order">
{{ intval($i+1) }}
</div>
This is my class order:
.order {
width: 27px;
height: 27px;
border-radius: 50%;
line-height: 26px;
text-align: center;
background: #FF8242;
color: white;
position: absolute;
margin: -159px 8px;
font-size: 12px;
font-weight: bold;
font-family: Roboto-Regular;
}
So, I just need to make the circle before the image and placed on the corner, something like this:
Make the image a <div> and put the number as a child:
document.getElementById("changeheight").onkeyup = function(e) {
document.getElementsByClassName('image')[0].style.height = this.value + 'px';
}
document.getElementById("changewidth").onkeyup = function(e) {
document.getElementsByClassName('image')[0].style.width = this.value + 'px';
}
.image {
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
width: 100px;
height: 40px;
border-radius: 5px;
}
.image > span {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: orange;
color: white;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
<div class="image">
<span>1</span>
</div>
<span>Set height to: </span>
<input id="changeheight"><br/>
<span>Set width to: </span>
<input id="changewidth">
ignore the JavaScript and the setheight/setwidth stuff. I'm guessing you will populate this by yourself, so this is just the css.
Try this:
<html>
<head>
<style type="text/css">
.order-wrapper {
position: relative;
}
.order {
width: 27px;
height: 27px;
border-radius: 50%;
line-height: 26px;
text-align: center;
background: #FF8242;
color: #fff;
top: 10px;
left: 10px;
position: absolute;
font-size: 12px;
font-weight: bold;
font-family: Roboto-Regular;
}
</style>
</head>
<body>
<div class="order-wrapper">
<div class="order">
{{ intval($i+1) }}
</div>
<img src="../IMG_PATH/{{$local[$i]['image']}}" width="120" class="img_doctor">
</div>
</body>
</html>