This is my html:
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align: ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.home,
.csgo,
.steam,
.info {
z-index: 1;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50, 150, 250, 1);
}
.HCSI,
li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}
<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a>
<a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a>
<a href="">
<li class="steam">Steam</li>
</a>
<a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>
If you put these in a code tester, there should be 4 blue boxes inside of a white one but my problem is I can't get all 4 boxes to align with the center of the white one. I'm trying to get the padding on all sides of the blue boxes to be the same.
Just fix text-align
make it text-align:center;
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:center ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
Try with this answer give ul text-align:center; it will make the anchors center and add text-decoration:line-through; to a tag that makes the line vertically centered
/* styleSheet */
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.HCSI ul {
padding-left: 0;
text-align: center;
}
.HCSI ul a {
text-decoration:line-through;
}
.home, .csgo, .steam, .info {
z-index: 1;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50, 150, 250, 1);
}
.HCSI, li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a> <a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a> <a href="">
<li class="steam">Steam</li>
</a> <a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>
You can use CSS Flexbox.
Just apply the Flex container (display: flex) properties with Flex Justify (justify-content: center) and Flex Alignment (align-items: center) Properties.
Have a look on how I've used them in the code below:
/* Parent Element (Flex Container) */
.HCSI {
display: flex;
justify-content: center; /* Center the content horizontaly */
padding: 20px;
border: 2px solid #000;
border-radius: 25px;
}
/* Resetting <ul> (Flex Container) */
ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
/* <li> Styles */
ul li {
color: #000;
margin: 0 10px;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
border-radius: 20px;
}
/* <a> Styles */
ul li a {
display: block;
color: #000;
padding: 10px 15px;
border-radius: 18px;
text-decoration: none;
}
/* <a> Hover Styles */
ul li a:hover {
text-decoration: none;
background-color: rgba(50, 150, 250, 1);
}
<div class="HCSI">
<ul>
<li class="home">Home</li>
<li class="csgo">Csgo</li>
<li class="steam">Steam</li>
<li class="info">Info</li>
</ul>
</div>
Learn more about CSS Flexbox
Hope this helps!
If you want the boxes clustered in the center with a defined gap this will do the trick
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
}
.HCSI ul a {
/* Adjust this value to adjust the spacing around the buttons */
padding: 20px;
display: table-cell;
}
If you want the boxes spread across the bar evenly then you could add this instead
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
width: 100%;
}
.HCSI ul a {
padding: 20px;
display: table-cell;
text-align: center;
}
Related
I am trying to make a dropdown menu, it's my first time doing it and I'm experimenting with it. The problem that I'm facing is this:
As you can see, the principal menus are showing in a list. I have tried displaying them as flex and other attempts, but it seems like the header is making a limitation to them and I don't know how to put them beside each other. (Clarification: 'Notificaciones' and 'Usuario' are main menus and 'Mi Perfil' is a submenu that comes from 'Usuario' (parent))
Here is my code:
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
Thank you so much in beforehand!
First the <li> should have display: inline-block for being arranged in a row. It has nothing to do with the header.
Second, the position of the sub menu (ul ul) needs to be absolute within a li with position: relative.
white-space: nowrap will make the element not wrap when the width is larger than the parent element's width.
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
/* added css */
ul li{
display: inline-block;
position: relative;
white-space: nowrap
}
ul ul{
position: absolute;
right:0;
top:100%
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
I begin with the following code below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
padding-left: 0;
}
li {
margin-top: 40px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
}
a:hover {
background-color: #66DE66;
}
<div id = "square">
<ul>
<li><a class = "navlink" href = "#">Introduction</a></li>
<li><a class = "navlink" href = "#">Middle</a></li>
<li><a class = "navlink" href = "#">End</a></li>
</ul>
</div>
I need the li elements (Introduction, Middle, and End) to be the same width, while remaining centered, and while maintaining anchor href functionality and complete hover functionality. I've tried altering the width of the li element and .navlink class to no avail. I've also tried defining the green rectangular elements under li instead of .navlink, but that just presented new problems.
I suspect the padding I have defined for my .navlink class may present a problem, but I'm not sure how.
The issue with the code the column flexbox does not have a defined height and its stacking up to auto height of the flex items (see after removing margin-top on li and the relative translation on the ul):
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
/*position: relative;
bottom: 30px;*/
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
padding-left: 0;
}
li {
/*margin-top: 40px;*/
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
}
a:hover {
background-color: #66DE66;
}
<div id = "square">
<ul>
<li><a class = "navlink" href = "#">Introduction</a></li>
<li><a class = "navlink" href = "#">Middle</a></li>
<li><a class = "navlink" href = "#">End</a></li>
</ul>
</div>
Now you can see the li taking up as much space as it requires when the navlink anchor element is made a block element by adding display: block:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
/*position: relative;
bottom: 30px;*/
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
padding-left: 0;
}
li {
/*margin-top: 40px;*/
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
display: block; /* added */
}
a:hover {
background-color: #66DE66;
}
<div id = "square">
<ul>
<li><a class = "navlink" href = "#">Introduction</a></li>
<li><a class = "navlink" href = "#">Middle</a></li>
<li><a class = "navlink" href = "#">End</a></li>
</ul>
</div>
Now you can make your ul and inline-flex element so that it takes only as much space as it needs and remove align-items: center. Also horizontally center the square by making it a flexbox too and using justify-content: center. Adjust the margin between the li and there you go:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
display: flex; /* made this a flexbox */
justify-content: center; /* align horizontally */
}
ul {
/*position: relative;
bottom: 30px;*/
display: inline-flex; /* changed to inline flex */
flex-direction: column;
/*align-items: center;*/
list-style-type: none;
padding-left: 0;
}
li {
margin-top: 10px; /* changed */
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
display: block; /* added */
}
a:hover {
background-color: #66DE66;
}
<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>
I'm trying to get the headerLinks div to wrap around both headerLink divs so that I can move the links and edit the margins of the links as a whole. Is this the best way to do it? And if so, how would I fix my code? Thank you in advance.
This is my code:
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}
#headerItems {
list-style-type: none;
overflow: hidden;
margin: 10px;
padding: 0px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
.headerLinks {
display: inline-block;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: right;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<ul id="headerItems">
<li id="headerName">My name</li>
<div id="headerLinks">
<li class="headerLink">Link 1
</li>
<li class="headerLink">Link 2
</li>
</div>
</ul>
</div>
Only the links on the right should be in a ul.
And I'm pretty sure you don't want the links reversing the order,
So you will need to add float:right on the parent (headerLinks), and float left on the lis
* {box-sizing: border-box;}
body {margin: 0;}
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
padding: 10px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
#headerLinks {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: left;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<span id="headerName">My name</span>
<ul id="headerLinks">
<li class="headerLink">Link 1</li>
<li class="headerLink">Link 2</li>
</ul>
</div>
If you want to make a dropdown menu, you will nest another ul inside the li
I'm working on a nav menu, seen below.
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li>Discover</li>
<li>Buy</li>
<li>Yes</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>
All the links were originally vertically in the middle of the nav box, but after I added a logo that uses different size text. All the menu links are no longer in the middle.
Is there a way to have the dimensions of menu links automatically fill the entire box to align with the largest item? Or is there a way to just vertically center the links within the box?
Thank you so much for any help.
Display your ul as flex and use align-items: center and justify-content: center properties to put them on the center of your box, both vertically and horizontally respectively.
nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
JSFiddle.
When you use align-items: center you center your elements vertically inside your flex container.
When you use justify-content: center you center your elements horizontally inside your flex container.
I'm trying to build a website. But for some reason I am not able to reposition my dropdown list(CSS). Need some help. I need to move that dropdown list to the center.
HTML Code:
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="margin-left: -40px; z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
</header>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 1;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #6ab47b;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
margin-top: 25px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
Thank you in advance.
You can keep your menu floated to right. In order to center your drop down menu you should do the followings
remove the "margin-left: -40px; inline style from all <a> elements.
insert the following two lines to your .dropdown-content class
right: 50%;
transform: translate(50%,0);
In your CSS the dropdown is floated to right. Just remove it, Dropdown will be in the center.
#main_navbar {
text-align: center;
margin: 0 auto;
/*float: right;*/
margin-top: 25px;
}
accepted
replace this css with what you have for #main_navbar > li > a:
#main_navbar > li > a {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#main_navbar > li > {
text-align:center;
}
try with this below code it may help you.
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
.dropdown-content {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0 -50px;
font-size: 14px;
text-align: center;
list-style: none;
background-color: #6ab47b;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#main_navbar{
float : right;
}
#main_navbar>li {
float: left;
padding : 10px;
list-style-type : none;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
.dropdown>.dropdown-content {
list-style-type : none;
}
.dropdown>.dropdown-content>li {
padding : 5px;
border-bottom : 1px solid #fff;
}
.dropdown>.dropdown-content>li:last-child {
border-bottom : none;
}
.dropdown>.dropdown-content>li:hover {
background : white;
color : #6ab47b !important;
}
.dropdown:hover .dropdown-content{
display : block
}
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
Rent <span class="caret"></span>
<ul class="dropdown-content">
<li>Mountain Bikes</li>
<li>Hybrid Bikes</li>
<li>Something else here</li>
<li>Road Bikes</li>
<li>City Bikes</li>
</ul>
</li>
<li><a href="faq.html" >FAQ's</a></li>
<li><a href="about.html" >About</a>
</li>
</ul>
</header>