I have a navigational bar as a list- that's required for my assignment. Anyways, I'm trying to center it but it's not quite working. What's happening is I'm having to specifiy specifc margins. I'm quite new to CSS and HTML.
{
background-color: #bdd2ed;
text-align: center;
}
h1,h2
{
font-family: sans-serif;
}
ul.navigbar
{
margin: 0 auto;
display: block;
width: 100%;
}
li.navigbar
{
list-style-type: none;
width: 10%;
text-align: center;
float: left;
}
a.navigbar
{
text-decoration: none;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li class="navigbar">Home</li>
<li class="navigbar">Australia Travel</li>
<li class="navigbar">Brazil Travel</li>
<li class="navigbar"><a href="china_travel.html" class="navigbar">China Travel</li>
<li class="navigbar"><a href="us_travel.html" class="navigbar">United States Travel</li>
</ul>
</body>
</html>
You can use this code:
See live demo: https://output.jsbin.com/vukisat
https://jsbin.com/vukisat/14/edit?html,css,output
HTML:
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li>Home</li>
<li>Australia Travel</li>
<li>Brazil Travel</li>
<li><a href="china_travel.html">China Travel</li>
<li><a href="us_travel.html">United States Travel</li>
</ul>
</body>
</html>
CSS:
body{
background-color: #bdd2ed;
text-align: center;
}
h1,h2{
font-family: sans-serif;
}
ul.navigbar{
margin: 0px;
padding: 0px;
display: block;
width: 100%;
}
.navigbar li{
list-style-type: none;
width: 10%;
text-align: center;
display:inline-block;
}
.navigbar li a{
text-decoration: none;
display:block;
}
You can use flexbox. Though I am not very sure exactly what you are looking for.
https://jsfiddle.net/8pycp48z/
ul.navigbar
{
margin: 0 auto;
display: flex;
width: 100%;
justify-content: space-around;
padding: 0;
}
Mathy answer (will size and center for any number of items, with any padding)
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
float: left;
position: relative;
left: 50%;
}
li {
padding: 0px;
margin: 0px;
float: left;
position: relative;
right: 50%;
list-style: none;
padding: .5em;
background-color:red;
}
Fiddle: https://jsfiddle.net/xc4yktc5/
Beware: You may run into issues with overflow on the main UL.
Related
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
HTML
This is my HTML source code where I want to make a menu list with flexbox and grid.
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="brand">
<img src="images/22.jpg">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
In the above code, My menu list not showing in the brand area. I want to make a menu list that is fixed inside ` without using position property of CSS. How to fix it?
See this works for you.
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
.menu-wrapper{
margin-top: 24px;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
float: right;
margin-right: 34px;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="brand">
<img src="https://www.internetkatta.com/wp-content/uploads/2015/04/logo350.png">
</div>
<div class="menu-wrapper">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
I am not completely sure if I am understanding your point completely So giving answer in points.
If you just want to hide the scroll bar at the bottom you can use ::-webkit-scrollbar pseudo-element in the CSS [MDN blog for this](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar.
If you just don't want to have any elements outside the screen you can always use overflow in the CSS to limit that. MDN blog for Overflow CSS
For better flow than just the overflow, you will have to start designing your pages in a more responsive way.
HTML
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
.menu-wrapper{
margin-top: 24px;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
/*float: right;*/
margin-right: 34px;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div id="brand">
<img src="https://www.internetkatta.com/wp-content/uploads/2015/04/logo350.png">
</div>
<div class="menu-wrapper">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
Here is no use of float:right;
#aviboy.
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
Pretty frustrating when something as simple as this has me stuck! I've tried many different things, but for some reason, it's stuck in the vertical display.
Relevant HTML
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul type="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
Like I said, I've tried a lot of different things, but I must be missing something. I'm not sure if it's because of the way I wrote my html or what, but I haven't had this problem before..
Your CSS is looking for a class called .nav. If you look at your <ul>, you meant to use the attribute class but instead used type.
<ul type="nav">
</ul>
Should be
<ul class="nav">
</ul>
In your CSS you're calling a .nav li. If you call with a dot, you call a class in CSS.
Just renamed type by class and it works now.
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul class="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
I can think of these two possible ways of doing it:
1. change it into a table
<table style="width:50%; margin-left: auto; margin-right: auto;">
<tr>
<td>
Home
</td>
<td>
Discover
</td>
<td>
Upload
</td>
<td>
More
</td>
</tr>
</table>
2. Use flex and flex-direction
<div type="head-wrap" >
<ul type="nav" style="display: flex; flex-direction: row">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
I am a newbie to css/html and I am trying to create a portofolio website for myself.
I would like to horizontally center my nav_bar in my page just under my image but I can't seem to make it work.
As you can see, the nav_bar is currently aligned vertically.
This is my code:
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
Hopefully someone can help me :)
Thanks in advance
Use display:flex; to ul and justify-content: center; to center it
.index_navigation ul{
display:flex;
justify-content: center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="background_logo">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
</body>
</html>
Set display style of li to inline-blocks and apply text-align:center to its parent.
.index_navigation{
text-align:center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
padding-right: 20px;
display:inline-block;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
You could restructure the menu using <table>. Replacing <ul> with <tr> & replacing <li> with <td>.
I'd do it like this:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
And then add the right clearfix DIVs:
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
I would just made li display: inline-block and ul for text-align: center.
ul {
text-align: center
}
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
display: inline-block;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>