SYNTAX QUERY - HTML and CSS responsive navigation bar using FlexBox
up vote
0
down vote
favorite
I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.
It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?
Ignore the fact I haven't used classes please.
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html>html css
edited Nov 26 at 21:05
Dharman
952
asked Nov 26 at 20:31
Matt Davies
12
add a comment |
up vote
0
down vote
favorite
I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.
It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?
Ignore the fact I haven't used classes please.
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html>html css
edited Nov 26 at 21:05
Dharman
952
asked Nov 26 at 20:31
Matt Davies
12
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.
It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?
Ignore the fact I haven't used classes please.
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html>html css
edited Nov 26 at 21:05
Dharman
952
asked Nov 26 at 20:31
Matt Davies
12
I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.
It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?
Ignore the fact I haven't used classes please.
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html> *{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html> *{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html>html css
html css
edited Nov 26 at 21:05
Dharman
952
asked Nov 26 at 20:31
Matt Davies
12
edited Nov 26 at 21:05
Dharman
952
asked Nov 26 at 20:31
Matt Davies
12
edited Nov 26 at 21:05
Dharman
952
edited Nov 26 at 21:05
Dharman
952
edited Nov 26 at 21:05
Dharman
952
952
asked Nov 26 at 20:31
Matt Davies
12
asked Nov 26 at 20:31
Matt Davies
12
asked Nov 26 at 20:31
Matt Davies
12
12
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f208475%2fsyntax-query-html-and-css-responsive-navigation-bar-using-flexbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
