Trying to reach criteria:
have the text to the left of the circle, vertically aligned; circles to the right (in-line) with the text; the circles themselves will also have text/numbers inside.
I am trying to code sample text and circles with numbers for what I have in the image below. However, I can not figure out the alignments:
Below is the code I currently have:
#feedbox-left {
margin-left: 2vh;
margin-top: 5vh;
width: 19vw;
height: 80vh;
background: transparent;
border: 1px solid black;
border-radius: 1%;
}
.fb-hr {
margin-top: 40vh;
height: 0.15vh;
background-color: hsla(0, 0%, 64%, 0.227);
}
.trackcircle {
/* display: inline; */
height: 60px;
width: 60px;
background-color: transparent;
border: 1px solid black;
border-radius: 50%;
margin-top: 50%;
}
.trackcircle:first-child {
margin-top: 40%;
}
.tracktext {
display: flex;
justify-content: space-evenly;
}
<section class="feedbox">
<div id="feedbox-left">
<div></div>
<hr class="fb-hr" />
<div id="trackers">
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
</div>
</section>
How can I align the items like I have in the picture?
Output
.parent{
border:2px solid #aaa;
width: 400px;
padding: 20px;
}
h1{text-align: center;text-decoration: underline;}
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.text{width: 80%;}
.circle{
border:4px solid #aaa;
width: 40px;
text-align: center;
height: 40px;
border-radius: 50%;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div class="parent">
<h1>Current tracks</h1>
<div class="row">
<div class="text">Lorem ipsum dolor sit amet </div>
<div class="circle">1</div>
</div>
<div class="row">
<div class="text">Second row and text here</div>
<div class="circle">2</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.circle {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
}
</style>
</head>
<body>
<div class="circle">1</div>
</body>
</html>
Related
this is my first time posting I'm fairly new in front-end web development. I'm having a hard time positioning some of my elements, especially this one every time I change something it doesn't meet my desired position for my button I just need to center it.
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1B244A;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: 'cursed timer', sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9AABD8;
border-radius: 5px;
color: white;
}
.newGame {}
.newGame button {}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I'm trying to figure out how to center the new game button that I put in a div class called newGame it always stays in the right corner.
Try this and see if it works for you, and you can always change the values to match the position of button according to your need.
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
I guess this is what you are expecting
Use flex property align-items: center; to center any div element vertically when flex-direction in horizontal
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1b244a;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: "cursed timer", sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
}
.newGame {
display: flex;
align-items: center;
}
.newGame button {
}
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I just started learning HTML and CSS. And I got a problem. Perhaps she is not worth attention, but still I ask for help. The problem is that the word "Hi" stubbornly does not want to be displayed in its block. And I don’t know how to remove the gap over the header. And sorry for the poor code architecture.
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
CSS:
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
I slightly cleaned your code and needs good attention, no need to use p within h2 tags:
body {
margin: 0;
}
.header {
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer {
width: 1928px;
height: 534px;
background-color: #202326;
}
.body {
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all {
width: 1170px;
height: 700px;
}
.categ {
width: 273px;
height: 514px;
}
.cat {
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
font-weight: 900;
text-align: center;
font-size: 40px;
vertical-align: center;
}
.mycat {
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com {
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color {
color: #000000;
}
h1 .acolor {
color: red;
}
.come {
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
Hi
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"></p>
</div>
<div class="com">
<p class="color"></p>
</div>
<div class="come">
<p class="color">
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div class="footer"></div>
</footer>
You can remove height for .cat class and remove margin for h1 tag as
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.cat h1{
margin: 0;
}
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bluebox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: blue;
}
.greenbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: green;
}
.yellowbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: yellow;
}
.orangebox {
float: left;
width: 200px;
height: 800px;
margin: 1em;
border: solid black 1px;
background-color: orange;
}
p {
display: inline-block;
text-align: center;
width: 600px;
border: solid 1px red;
margin-top: -50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
</style>
<body>
<section>
<section>
<section>
<div class="bluebox"></div>
<div class="greenbox"></div>
</section>
<section>
</section>
</section>
<div class="yellowbox"></div>
</section>
<section>
<div class="orangebox"></div>
</section>
<p>Hello World! how r <strong>u?</strong></p>
</body>
</html>
enter code here
I have started working on creating this image and hit a bump on the middle portion. I can recreate in bootstrap but am trying to go at it the old fashion way. any help would be appreciated.
Try this code. Hope you want like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.outerdiv{
background-color:white;
height:450px;width:450px;
display:block;
border:1px solid black;
}
.outerdiv div{position:relative;margin:3px;padding:1px;}
.blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
.blue{background-color:blue;}
.green{background-color:green;}
.yellow{background-color:yellow;}
.orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
.cyan, .green1, .green2{width:100px;}
.cyan{background-color:cyan;height:50px;}
.green1{background-color:lightgreen;height:50px;}
.green2{background-color:green;height:100px;}
.black{background-color:black;border:54px solid red;}
.inner_container1{display:inline-block;padding:0;}
.white{border:1px solid brown;height:85px;width:320px;}
</style>
</head>
<body>
<div class="outerdiv">
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="black"></div>
<div class="inner_container1">
<div class="cyan"></div>
<div class="green1"></div>
<div class="green2"></div>
</div>
<div class="white"></div>
</div>
</body>
</html>
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo