I am building a responsive menu using only css and html. The only problem I have right now is that I don't know how to verticaly center the links in menu.
Here is my code:
#media only screen and (max-width: 768px) {
nav {
display: none;
width: 100%;
height: auto;
background: black;
float: none;
text-align: center;
border-top: 1px solid white;
}
nav ul,
li,
a {
width: 100%;
display: inline-block;
margin: 0 auto;
}
nav ul {
padding-bottom: 5px;
margin: 0 auto;
}
nav li {
border-top: 1px solid white;
line-height: 30px;
}
}
<nav>
<a href="index.html">
<div class="logo">
<img src="img/logo.png">
</div>
</a>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
Related
Hello I'm a beginner and got a problem with my navigationbar in HTML. I've tried a lot but they are still unclickable...
Is there a mistake in my HTML?
<header>
<nav display: inline;>
<ul>
<li>
<navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
</li>
<li>
<navi>
<z class="active" href="index.html">Startseite</z>
</navi>
</li>
<li>
<navi>
<z href="produkte.html">Produkte</z>
</navi>
</li>
<li>
<navi>
<z href="about.html">Über uns</z>
</navi>
</li>
<li>
<navi>
<z href="agb.html">AGB</z>
</navi>
</li>
</ul>
</nav>
or is the mistake in my CSS? It's probably not the best way to style it but it looks good in my eyes. However I cant click any links...
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li z:hover:not(.active) {
background-color: #deb27a;
}
Thanks for help
Here's the link for Your above Problem https://jsfiddle.net/kj0w9g76/
Reason:- for anchor tag we use 'a' not with 'z'
instead of navi tag we use nav tag as used in code below.
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
overflow: hidden;
background-color: burlywood;
position: relative;
z-index: 1;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li nav z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: inline;">
<ul>
<li>
<nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
You've a problem in your code, styles, anchors are not correct there is the correct code below.
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li a {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: block;">
<ul>
<li>
<nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
I am using the following code in my header to display my logo and my navigation. I vertically centered my text with line-height: 90px; but when I try to give my logo vertical-align: middle; it doesn't seem to work. What am I doing wrong?
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
}
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
<header>
<img src="images/logo.png" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Flexbox can do that:
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
width: 59px;
height: 32px;
}
nav {} nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
nav ul li a {
color: white;
}
<header>
<img src="http://www.fillmurray.com/59/32" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
I'm looking to distribute the space between the links evenly, so each take up 1/3 of the space of the containing div. The whole reason they are within this div is because I want to line it up with the banner, and I'm unsure how to it otherwise.
Here is a fiddle:
https://jsfiddle.net/yuy84gmq/13/
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Use flexbox and set justify-content to space-between or space-around:
space-between
Flex items are evenly distributed in the line. [...]
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. [...]
.navLinks {
display: flex;
justify-content: space-around;
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
.navLinks {
display: flex;
padding: 0;
justify-content: space-around;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a></li>
<li><a href='#'>Hours</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I see a flexbox solution has been posted, so I'll post the table/table-cell solution. It's a simple but effective, and you don't have to worry about browser discrepancies.
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
/* set the container to act like a table */
.navLinks {
display: table;
table-layout: fixed; /* evenly space all elements */
/* remove default styling */
width: 100%;
margin: 0;
padding: 0;
}
.navLinks li {
display: table-cell;/* set to a table-cell */
text-align: center;
font-size: 25px;
padding: 10px;
}
.navLinks a {
border: 1px solid black;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Try This code
is working for me
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
border: 1px solid black;
display: inline-block;
font-size: 25px;
width:32%;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
hi xD
your css:
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto; /*After setting a width this will make object sit centrally within parent container. Auto sets left and right margins equally. 0 denotes no top or bottom margin */
}
.li1 {
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;
}
.li2 {
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 {
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */
#navBar {
border: 1px solid black;
width:553px;
margin: 0 auto;
}
your html:
<body>
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li class="li1"><a href='#'>About</a></li>
<li class="li2"><a href='#'>Hours</a></li>
<li class="li3"><a href='#'>Contact</a></li>
</ul>
</nav> <!--#navBar-->
</body>
I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}
CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO
You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>
Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block