Centering a ul stretch full width div - html

I want to get this menu bar to appear on the full width of the container/div (horizontal). With equal amount of margin in between the menu items, which are lis. I want this to work for every viewport.
The thing is margin: 0 auto; doesn't work. What should I do instead?
.button-row {
background-color: #fcfcfc;
position: relative;
height: 70px;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
.button-row ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.button-row ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.button-row ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
text-decoration: none;
line-height: 1.3em;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<ul>
<li><a>Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul>
</div>
</div>
</div>

Full width of the container/div (horizontal). with equal amount of (margin) in between the li's, for every viewport as you wish.
You can try with flexbox like this, if that's what you want:
.button-row {
background-color: #fcfcfc;
height: 70px;
width: 100%;
}
.button-row ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.button-row ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 20%;
text-align: center;
}
.button-row ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
text-decoration: none;
line-height: 1.3em;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<ul>
<li><a>Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul>
</div>
</div>
</div>

.button-row{
width: 100%;
}
.button-row a{
display: inline-block;
width: calc(100% / 5);
float: left;
text-align: center;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<a>Additional information</a>
<a>Current exchange rates</a>
<a>ATMs and institutions</a>
<a>Protection</a>
<a>Files to download</a>
</div>
</div>
</div>
Without ul li and fully responsive.

Here my simple code of navigation bar
#navi
{
width:100%;
}
center{
background-color: #333;
height:7%;
}
.ulnav {
float:right;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-right:350px;
}
.ulnav li {
float: left;
border-right:1px solid blue;
border-left:1px solid red;
}
.ulnav li:last-child {
border-right: none;
}
.ulnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulnav li a:hover:not(.active) {
color: #ccff33;
background-color: #111;
}
.active {
background-color: #ccff33;
}
<center><ul class="ulnav">
<li><a class="active">Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul></center>

Related

How to shift one element of an <li> list to the right

I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>

How do I center an unordered list? [duplicate]

This question already has answers here:
How to center an unordered list?
(8 answers)
How can I center <ul> <li> into a div?
(16 answers)
Closed 2 years ago.
I have a list and css.
However the ul goes to the left. I have tried many things but it either stays inline and floats to the left or it goes to the center as I want it to, but then it's not inline, they stack on one another..how can I have both an centered ordered list and inline?
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
To center the navbar ul add text-align: center;
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
All you need is "text-align:center;" on your .navbar ul like below:
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
<li> runs as a text element because of your css .navbar ul li { display: inline-block; }. therefor you can center it with text-align. In this case just add: .navbar { text-align: center; }
.navbar {
margin: 0 auto;
width: 100%;
text-align: center;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just use display: flex; justify-content: center; for either <ul> tag or navbar div container.
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just change your .navbar class like this
.navbar {
display: flex;
justify-content: center;
}

Html Navigation bar item only last item clickable and the rest cannot

My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/

Vertically Center Various Text in Header?

This can probably be fixed insanely easy but I'm just having such a hard time at doing it.
So, I want to make both my name and the navigation bar in the header appear at the center vertically. My current code only makes my name be centered, since it is bold and the font-size is bigger.
This is the code:
HTML:
<div id="header">
<ul>
<div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>
CSS:
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}
Your HTML is invalid. A ul needs to have an li as direct children. Instead, you have divs as direct children with nested li's
That said, add display: flex; align-items: center; justify-content: space-between; to #header-wrapper to center those elements vertically.
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}
<div id="header">
<ul> <div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>

Can't position link at bottom of DIV

I'm trying to have a full screen header and at the bottom of that (but within it) have a link which says learn more. Then below the header have the rest of the website content, in this case "test".
The two issues I have is:
Learn more should sit at the bottom middle but it doens't, it sits slightly to the right
The div class "content" is sat within the gray box not under it.
This is the code I am working with:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: 200px;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span>
</div>
<div class="content">Test</div>
</body>
</html>
You have an unclosed anchor tag. And you need to set left: 50%; width: auto; to your .learn class in order to center it.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: auto; left: 50%;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span></a>
</div>
<div class="content">Test</div>
</body>
</html>
To center align 'Learn more', use
.learn {
position: absolute; bottom: 0; width: 200px;
left: 50%; transform: translateX(-50%);
}
Before the content, <a class="learn">Learn More</span> closing tag should be </a>
https://jsfiddle.net/afelixj/efty6zjL/