I would am attempting to take something I've seen before and recreate it with html/css. Here is a mockup I've made in Word.
Almost everything I find is about text inside circles, not an accent behind, like this drawing. I would like to have the circle and the text centered as much as possible.
Here is the best of my attempts: https://jsfiddle.net/FNdXz/559/
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
}
#inner
{
height:200px;
width:200px;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:25%;
border: 1px solid white;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<div id="inner">
</div>
</div>
Obviously, I can worry about fonts and coloring later - but I'm really struggling with the positioning and could use help from a pro.
Creating a circle with svg is straightforward. You can center everything in the container using flexbox.
Then center the svg behind the text using position: absolute and a lower z-index.
#container {
height: 400px;
width: 400px;
background-color: #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#container>div {
z-index: 1;
}
#test {
color: black;
font-size: 50px;
}
#sub-test {
color: blue;
font-size: 30px;
}
svg {
position: absolute;
z-index: 0;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<svg height="200" width="200">
<circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
}
#inner
{
height:200px;
width:200px;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:10%;
border: 1px solid white;
position : relative;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
position : absolute;
margin-top : 100px;
margin-left : 70px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
position : absolute;
margin-top : 160px;
margin-left : 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<div id="inner">
</div>
</div>
<body>
</html>
Hope this is what you are requesting for
You need to utilize the position and z-index settings. With the position being set to absolute, you can define the margin from the top, right, bottom, and left sides of the parent container. z-index determines what "layer" to appear on - the higher the value, the higher precedence it gets. See the updated CSS here.
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
position: relative;
}
#inner
{
height:200px;
width:200px;
position: absolute;
top: -2%;
left: -2%;
z-index: 1;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:25%;
border: 1px solid white;
}
#test {
position: absolute;
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
top: 30%;
left: 15%;
z-index: 2;
}
#sub-test {
position: absolute;
top: 45%;
left: 15%;
z-index: 2;
color: blue;
text-align: center;
font-size: 30px;
}
Another idea is to simply use radial-gradient:
#container {
padding:50px 0;
width: 400px;
background:radial-gradient(circle at center,transparent 40%,#fff 40%,#fff calc(40% + 1px),transparent calc(40% + 1px)),
#ccc;
display: table-cell;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
</div>
Related
I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.
Add position relative to your parent
.timeslot{
// ...
position: relative;
}
div{
width:300px;
height:70px;
border:1px solid red;
font-size:30px;
line-height:70px;
vertical-align:middle;
text-align:center;
padding:0px;
margin:0px;
}
<div>
hello world
</div>
The text hello world is in center status both vertically and horizontally.
Now just add a p tag for hello world, nothing else changed for css above.
div{
width:300px;
height:70px;
border:1px solid red;
font-size:30px;
line-height:70px;
vertical-align:middle;
text-align:center;
padding:0px;
margin:0px;
}
<div>
<p>hello world</p>
</div>
If you open your browser's code inspector, you can notice that the p tag got a margin-top and a margin-bottom.
Why is that?
In most browers, the p tag has a default value of 1em on both top and bottom margins, which results to that kind of result:
div {
width: 300px;
height: 70px;
border: 1px solid red;
font-size: 30px;
line-height: 70px;
vertical-align: middle;
text-align: center;
padding: 0px;
margin: 0px;
}
/* I added a background to make it visual */
p {
background: rgba(0,0,0,0.1);
}
<div>
<p>hello world</p>
</div>
⋅
⋅
⋅
So, the only thing you need to do is to set the margin to 0 to render it like you want:
div {
width: 300px;
height: 70px;
border: 1px solid red;
font-size: 30px;
line-height: 70px;
vertical-align: middle;
text-align: center;
padding: 0px;
margin: 0px;
}
/* This is the only thing I added */
p {
margin: 0px;
}
<div>
<p>hello world</p>
</div>
Hope it helps.
You can make vertical-align work by using display: table and display: table-cell:
div{
width: 300px;
height: 70px;
border: 1px solid red;
font-size: 30px;
display: table;
}
p{
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div>
<p>hello world</p>
</div>
Alternatively, you can use display: flex:
div{
width: 300px;
height: 70px;
border: 1px solid red;
font-size: 30px;
display: flex;
align-items: center;
}
p{
width: 100%;
margin: 0;
text-align: center;
}
<div>
<p>hello world</p>
</div>
You can use also use position: absolute, but beware when using this, because it might mess up your layout:
div{
width: 300px;
height: 70px;
border: 1px solid red;
font-size: 30px;
position: relative;
}
p{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<div>
<p>hello world</p>
</div>
I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
How do I make two (or more) floating divs appear like "big buttons" and let them float and be leveled? My problem is that the boxes are "partially leveled"... with one slightly lower than the other. I have tried to use float: left on the adminBox, but then they grow outside the container. Can anyone help me?
I have used this HTML code:
(http://jsfiddle.net/jf936/13/)
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
and this style:
.container{
background-color: light-blue;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
float: none;
text-align:center;
}
This has nothing to do with float, the issue is that you are using display: inline-block; and hence the element are aligned to the baseline, inorder to fix this, you need to use vertical-align: top;
Demo
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
vertical-align: top; /* Add this here */
}
Note: You don't have to use float: none; as nothing is floated here, so you can get rid of those unused properties.
Here you go.
WORKING DEMO
The CSS Code Change:
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
float:left;
}
Hope this helps.
Maybe this code will be helpful for you:
jsfiddle
.container{
background-color: light-blue;
overflow:hidden;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: block;
margin: 5px;
float:left;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
text-align:center;
}
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
</div>