I am trying to center the text of class "link" in the middle on the Y axis. It doesn't seem to be centering on the Y axis, I have tried "middle" and "center". Is it maybe because the text inline? Or could it also be because of the other CSS tags? Could I have some help? I provided the 2 pieces of code below.
#top {
z-index: -1;
height: 100%;
margin: 0;
background: linear-gradient(to right, #00ace6, #007399);
}
#toggle {
display: none;
}
input[type=checkbox]:checked ~ #nav {
animation: fadein 1s 1 forwards;
display: initial;
vertical-align: middle;
}
#menuicon {
z-index: 10;
width: 50px;
background: rgba(0, 0, 0, 0.1);
}
#nav {
opacity: 0;
display: none;
position: absolute;
padding: 0;
margin: 0px;
height: 50px;
width: 50%;
z-index: 11;
background: rgba(0, 0, 0, 0.1);
border-radius: 0px 20px 20px 0px;
}
#nav li {
top: 50%;
color: white;
display: inline;
vertical-align: middle;
}
#nav li a {
margin-top: 5%;
text-decoration: none;
color: white;
font-size: 20px;
font-weight: bold;
}
#link {
vertical-align: middle;
}
<div id="top">
<input type="checkbox" id="toggle">
<label for="toggle">
<img id="menuicon" src="images/icons/Kitkatbar2.png">
</label>
<ul id="nav">
<li class="link">About me
</li>
<li class="link">Work
</li>
<li>
<a href="https://twitter.com/Littlebigbloxs">
<img src="images/icons/twitterICON.png" style="height: 100%; border-radius: 10px;">
</a>
</li>
<li>
<a href="https://www.roblox.com/users/19619052/profile">
<img src="images/icons/robloxICON.png" style="height: 100%; border-radius: 10px;">
</a>
</li>
<li>
<a href="mailto:littlebigblox#gmail.com">
<img src="images/icons/emailICON.png" style="height: 100%; border-radius: 10px;">
</a>
</li>
</ul>
<h1 class="Title">littlebigblox</h1>
<p align="center"></p>
</div>
Try to change from ul to table. Like that:
<table><tr><td>About me </td><td>Work </td></tr></table>
So, with table tag you can use vertical align in td.
Change the parents display to display: table. Then, change the childrens display to display: table-cell. This way, you can use the vertical-align: middle property.
Related
Im currently building a simple resume website but when i try to align my skills bar to left and trying to make them small but couldn't do it how can i do it i searched a little bit but those werent helpful thanks in advance.
* {
font-family: sans-serif;
list-style: none;
padding: 0;
}
.html {
width: 40%;
animation: html 2s;
}
body {
background: burlywood;
}
.skills {
width: 500px;
margin: 60px auto;
color: gray;
}
.skills li {
margin: 20px 0;
}
.bar {
background: gray;
display: block;
height: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
box-shadow: 0 0 10px rgb(43, 41, 41);
}
.bar span {
height: 2px;
float: left;
background: cyan;
}
.py {
width: 20%;
animation: py 2s;
}
.word {
width: 50%;
animation: word 2s;
}
.excel {
width: 70%;
animation: excel 2s;
}
.c {
width: 59%;
animation: c 2s;
}
<div class="skills">
<h1>Skills</h1>
<li>
<h3>C++</h3>
<span class="bar"><span class="c"></span></span>
</li>
<li>
<h3>Microsoft Excel</h3>
<span class="bar"><span class="excel"></span></span>
</li>
<li>
<h3>Microsoft Word</h3>
<span class="bar"><span class="word"></span></span>
</li>
<li>
<h3>Python</h3>
<span class="bar"><span class="py"></span></span>
</li>
<li>
<h3>HTML</h3>
<span class="bar"><span class="html"></span></span>
</li>
</div>
I think your main problem is how you are setting your margin. Using auto for the right, left values will center it. Try something like this (I also changed your width to percentage but not really clear on what you mean by "make them small")
.skills {
width: 20%;
margin: 60px 0;
color: gray;
font-size: 80%;
}
You haven't wrapped your <li> tags in a <ul (or <ol>) tag, which is an error in the html structure. Read this.
Also, for correct alignment, you can change the margin rule to .skills, and the width. I reduced the width by a factor of 2 = 250px, but you can set your value as the width:
.skills {
width: 250px;
margin: 60px auto 60px 60px;
color: gray;
}
* {
font-family: sans-serif;
list-style: none;
padding: 0;
}
.html {
width: 40%;
animation: html 2s;
}
body {
background: burlywood;
}
.skills {
width: 250px;
margin: 60px auto 60px 60px;
color: gray;
}
.skills li {
margin: 20px 0;
}
.bar {
background: gray;
display: block;
height: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
box-shadow: 0 0 10px rgb(43, 41, 41);
}
.bar span {
height: 2px;
float: left;
background: cyan;
}
.py {
width: 20%;
animation: py 2s;
}
.word {
width: 50%;
animation: word 2s;
}
.excel {
width: 70%;
animation: excel 2s;
}
.c {
width: 59%;
animation: c 2s;
}
<div class="skills">
<h1>Skills</h1>
<ul>
<li>
<h3>C++</h3>
<span class="bar"><span class="c"></span></span>
</li>
<li>
<h3>Microsoft Excel</h3>
<span class="bar"><span class="excel"></span></span>
</li>
<li>
<h3>Microsoft Word</h3>
<span class="bar"><span class="word"></span></span>
</li>
<li>
<h3>Python</h3>
<span class="bar"><span class="py"></span></span>
</li>
<li>
<h3>HTML</h3>
<span class="bar"><span class="html"></span></span>
</li>
</ul>
</div>
i dont find flex container, you have container with flex and into you can have boxes with flex-start.
I have a div inside which there is a text which has a subtitle that must always be positioned on the bottom right in this manner
I achieved this by making the parent div relative and the contents inside it as absolute.But the upper text can grow to whatever length and i want the parent div to expand with it and not overlay other elements which it is doing as shown in the image
Here is what i tried.
header {
height: 60px;
padding: 0 12px;
background: #fff;
position: fixed;
width: calc(100% - 24px);
z-index: 999999; // no z-index values above this for any body elements
box-shadow: 7px -9px 6px 6px $black;
left: 0;
li {
float: right;
display: block;
margin-left: 20px;
padding: 20px 0;
width: 18px;
text-align: right;
i {
color: $icon-grey;
font-size: $header-icon-size;
cursor: pointer;
&.fa-times {
color: $icon-red;
}
&.notify{
color: gold;
}
&.fa-caret-down{
color: gold;
}
}
img{
width: 40px;
height: 40px;
border-radius: 50%;
margin-top: -0.7em;
object-fit: cover;
object-position: center right;
}
}
.user-info {
text-align: right;
display: inline-block;
margin-top: -0.5em;
h5{
color: $section;
}
span{
color: $icon-grey;
font-size: 14px;
}
}
.user-details{
margin-right: 15px;
}
}
<header>
<li>
<i class="fas fa-caret-down"></i>
</li>
<li>
<img src="{{user.image}}">
</li>
<li>
<div class="user-info">
<h4>Smith</h4>
<p>CAD</p>
</div>
</li>
<li class="notification-menu">
<i class="fas fa-bell"></i>
</li>
</header>
All elements inside header are aligned on the right side.
I could not find any solution that just uses css.
Just use text-align:right...it seems to be adequate. No need for extra fancy layout options unless there is more to this than it appears.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.user-info {
text-align: right;
display: inline-block;
border: 1px solid grey;
}
<div class="user-info">
<h4>Smith</h4>
<p>CAD</p>
</div>
<div class="user-info">
<h4>Longer name - Smith</h4>
<p>CAD</p>
</div>
<div class="user-info">
<h4>Smith</h4>
<p>Longer Initials CAD</p>
</div>
I have this code below. I have one container div with 2 inner div. I want the two inner divs to be side by side so I used in-line block on the two divs. Also I want the two divs to be start on top. In the demo below they are stuck on top and I dont know why while in my own project they are side by side but first div starts on top while second div does not start on top.
What is the best css style to make the 2 div in a container start on top while it is side by side?
What is the best way to make two div side by side?
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
display: inline-block;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 68%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>
Please try this code instead of the display:inline-block; and just add float:left.
.homissync>div {
display: block;
float: left;
}
you can use float: left; instead of display: inline-block;
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
float:left;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 65%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>
display:inline-block have default white space, you need to remove the white space. otherwise you need to relace the display-inline-block with float:left , there is so many options to remove the white space please check the reference link below
Why is there an unexplainable gap between these inline-block div elements?
I am unable to shift DIV with id="pop_ctrl" in the middle of its parent DIV with id="ops". I tried vertical-align:middle but it's not working. This is my HTML:
<div style="float:left;display:inline-block">
<div id="ops" class="utilities_div" data-type="0">
<div style="display: block; color: white; cursor: pointer;" id="pop_ctrl"><i class="fa fa-plus"></i> Add Data</div>
<ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
<li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
<div><i class="fa fa-sort-numeric-asc"></i>
</div>
<div>Number</div>
</li>
</ul>
</div>
</div>
And this is my CSS:
.utilities_div {
display: inline-block;
background-color: black;
}
#demo_ul {
position: absolute !important;
top: 0px;
margin: 0px;
background-color:white;
}
.demo_li {
word-wrap: break-word;
padding: 10px;
background-color: red
}
And this is the fiddle for it: http://jsfiddle.net/4szk1y2d/
Try like this: Demo
#pop_ctrl {
height:44px;
line-height:44px;
vertical-align:middle;
display: block;
color: white;
cursor: pointer;
padding:0 6px;
}
Remove all nbsp's instead use padding
<style>
.utilities_div {
background-color: black;
}
#demo_ul {
position: absolute !important;
top: 0px;
margin: 0px;
background-color:white;
}
.demo_li {
word-wrap: break-word;
padding: 10px;
background-color: red
}
</style>
<div style="float:left; height:auto;">
<div id="ops" class="utilities_div" data-type="0">
<div style="display: initial; color: white; cursor: pointer; padding:5px;" id="pop_ctrl">
<i class="fa fa-plus"></i>Add Data
</div>
<ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
<li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
<div><i class="fa fa-sort-numeric-asc"></i>
</div>
<div>Number</div>
</li>
</ul>
</div>
</div>
make following changes in the CSS:
div#ops { display : table}
div#pop_ctrl {display: table-cell; padding: 10px}
And remove from the html
Try this demo, it might help you.
html
<div id = "mainDiv">
<div id="childDiv"></div>
</div>
css
#mainDiv{
height:300px;
width:300px;
background : yellow;
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#childDiv{
height:100px;
width:100px;
background : red;
display: inline-block;
}
http://jsfiddle.net/pvodtgrk/
remove display: block; from #pop_ctrl and apply display: table-cell; vertical-align works only for elements with proper display property, such as display: inline-block or table-cell.
working code
http://jsfiddle.net/4szk1y2d/1/
add this to Your CSS
#ops {
display: table;
height: 36px;
}
#pop_ctrl {
display: table-cell !important;
vertical-align: middle;
}
I try to create a vertical progressbar by using the data-procentage-tag. So far I have it almost done, the only issue is that the progressbar's are not aligned/even to each other and I simply dont know why.
So, this is what I got so far:
The HTML:
ul li {
float: left;
list-style: none;
margin:0 40px;
}
ul li a {
text-decoration:none;
}
.progressbar {
background:black;
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
-webkit-transform: rotate(-90deg);
}
.title {
color: black;
font: 12px 'Arial';
}
.progressbar2 {
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
}
.progressbar2:after {
content: attr(data-procentage) '%';
color: black;
font: 14px 'Arial';
}
<div id="progress">
<ul>
<li>
<div class="progressbar2" data-procentage="53.40"></div>
<div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
<span class="title">New York</span>
</li>
<li>
<div class="progressbar2" data-procentage="13.25"></div>
<div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
<span class="title">Los Angeles</span>
</li>
<li>
<div class="progressbar2" data-procentage="10.37"></div>
<div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
<span class="title">Washington D.C.</span>
</li>
<li>
<div class="progressbar2" data-procentage="22.98"></div>
<div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
<span class="title">San Francisco</span>
</li>
</ul>
</div>
Here is a fiddle http://jsfiddle.net/mvqg3d0n/
So, can anyone help me out? I would really appreciate it
Use this css in your progressbar. This will change the rotation origin point to the bottom left corner, thus you have to move it 30px to the right with the translate.
-webkit-transform-origin: 0% 100%;
-webkit-transform: translate(30px,0px) rotate(-90deg);
Dont forget to add the unprefixed version for non-webkit browsers (like firefox).
transform-origin: 0% 100%;
transform: translate(30px,0px) rotate(-90deg);
Also make sure that your li items all have the same width so the bar size is correct.
I'm not sure though if you know about the meaning of the data- attribute. It doesn't set the width of the bar, you can just use it like in your .progressbar2 class to store information that is displayed via css content or used by javascript. No need for it in the .progressbar class (unless you use it somewhere else).
ul li {
display: inline-block;
list-style: none;
margin: 0 40px;
text-align: center;
}
ul li a {
text-decoration: none;
display: block;
}
.progressbar {
background: black;
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
-webkit-transform: rotate(-90deg);
display: inline-block;
}
.title {
color: black;
font: 12px'Arial';
}
.progressbar2 {
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
}
.progressbar2:after {
content: attr(data-procentage)'%';
color: black;
font: 14px'Arial';
}
<div id="progress">
<ul>
<li>
<div class="progressbar2" data-procentage="53.40"></div>
<div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
<span class="title">New York</span>
</li>
<li>
<div class="progressbar2" data-procentage="13.25"></div>
<div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
<span class="title">Los Angeles</span>
</li>
<li>
<div class="progressbar2" data-procentage="10.37"></div>
<div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
<span class="title">Washington D.C.</span>
</li>
<li>
<div class="progressbar2" data-procentage="22.98"></div>
<div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
<span class="title">San Francisco</span>
</li>
</ul>
</div>
You need to set the list items to a fixed width. Right now the list elements are different widths depending on the text. This is skewing the overall width of the percentage bars:
ul li {
float: left;
list-style: none;
margin:0 40px;
width: 200px;
}
I've used 200px as an example. Naturally you can set your own size. If you want them all aligned to the left, just set them as 100%:
ul li {
float: left;
list-style: none;
margin:0 40px;
width: 100%;
}