How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
Related
I've been trying to make that website for YouTube views and like bot and the logo isn't clickable somehow.
navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: gray;
}
.navbar ul li {
float: left;
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bolbol.png);
width: 150px;
height: 100px;
text-indent: -1400px;
background-size: 100% 100%;
}
li:nth-child(2) {
position: relative;
top: 25px;
}
<div class="navbar">
<ul>
<li>Logo</li>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
https://jsfiddle.net/6L3jak0s/
I think what you are trying to do is to make things look like a header, it's better with flexbox. Something like this maybe..
.navbar {
display: flex;
background-color: gray;
margin: 0;
padding: 1rem;
justify-content:space-between;
align-items:center;
}
.navbar ul {
list-style-type: none;
display: flex;
align-items:center;
}
.navbar ul li {
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bololo.jpg);
background-size: 100% 100%;
}
.navbar a {
display: block;
}
<div class="navbar">
Logo
<ul>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
Remove this property "text-indent: -1400px;" from this rule "li:first-child Rule".
and then add the following CSS.
.navbar li a {
width: 100%;
height: 100%;
display: inline-block;
text-indent: -1400px;
}
I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
this is how it should look like
this is how it looks like when i put .top{position:fixed}
When you set an element to absolute or fixed position, it will be out of the the normal content flow and trigger the shrink to fit feature. You can apply the offsets and width/height to position and recreate the box size you wish to have.
.top {
position: fixed;
left: 0; /* ADDED */
top: 0; /* ADDED */
width: 100%; /* ADDED */
}
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
Because .top has no width. However, when set to fixed it is using the viewport width to calculate the width. You might want to set it to 75%.
You also might want to set .container to position: relative so .top will relate to its borders.
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
position: relative;
}
.top {
position: fixed;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
This is my code (im a total noob in html) this code gives me whitespace on top and on the left of my navigation... do you guys have any idea of what im doing wrong?
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Added html
this is CSS. Add this
body{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
background-color: #e8e4e5;
}
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
But you can set to nav div position fixed: it will help when you get scroll in content, but nav div all time will in top.
body{
padding: 0;
margin: 0;
}
.content{
margin-top: 60px;
height: 150vh;
background-color: #d2d29d;
}
div.nav {
position: fixed;
height: 60px;
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
<div class="content">
Some text
</div>
Since you're using position:fixed; you can change you css to the following, which will force the navbar to be in the top-left corner of your page
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
Ofcourse, there's many more ways. The above CSS will result in your whitespace being removed
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Hope this helps!
Tried to vertically align my nav menu with my logo image but with the code I have the navbar doesn't even seem to be within the container element. Any specific error or is it multiple things?
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
You needed to add a display: inline-block to your header .container .nav-logo
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
Just add a new css rule display: inline; for .nav-logo{};
Working codepen: https://codepen.io/Omi236/pen/YQdKZY
Whether or not it's the best practice, you can simply add float: left; to header .container .nav-logo
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
float: left;
}
https://jsfiddle.net/vu8y4uxa/
Or as suggested elsewhere use display: inline-block;
You can try this code :
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;//Add this
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
/*width: 737.667px;*///Remove this
/*float: right;*///Remove this
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<nav class="nav-right">
<div class="nav-logo"><!--Move this-->
<img src="site_logo.png" alt="Site Logo" />
</div>
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
An option is to use flexbox, which will also save you some CSS coding. For browser compatibility please check here. The code suggested doesn't give any issues from IE11 onwards.
.container {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
ul li {
padding: 1em;
text-transform: uppercase;
font-family: sans-serif;
}
ul li a {
text-decoration: none;
color: black;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="http://placehold.it/100&text=LOGO" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
It's not hard, you use float: right; for nav-right but you forgot to use float: left; for nav-logo class. This will fix it!
I am not sure but you can try inserting your image source line nav-right class,
as i don't see the css code for nav-logo class, else write the code for nav-logo class
.nav-logo {
display: inline-block;
vertical-align: right;
max-width:100%; // or your desired size
}
I'm trying to reduce the height of my navigation bar. when I use min-height property, it adds a scrollbar to the navigation bar which makes it not so appealing. I would like to align the logo to the extreme left and the rest of the contents to the extreme right.I have attached the code below. Please help me to fix it.
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
text-align: right;
top: 0;
margin: 0 auto;
right: 0;
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoraton: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
your logo and below that your menu list - that's the problem
make its side by side
.navigation ul {
display: flex;
}
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
/*text-align: left;*/
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.navigation ul {
display: flex; /* new line added */
}
#logo {
flex: 2; /* new line added */
}
.log {
/*text-align: right;*/
top: 0;
margin: 0 auto;
right: 0;
display: flex; /* new line added */
flex: 8; /* new line added */
justify-content: flex-end; /* new line added */
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
You had the scroll bar because the contents were too big and you had overflow-y: auto; Overflow controls the behavior when the contents are too big for the parent div size.
The float property can be used to move elements to different sides of the viewer in a consistent manner.
Your code is still not responsive and will not display correctly on screens smaller that 365px wide. The support range will get smaller if you add more menu items.
There are a lot of resources you can check out for making a responsive menu
Is this what you wanted?
body {
margin: 0 auto;
padding: 0
}
.navigation {
background-color: rgba(15, 58, 114, 0.9);
position: fixed;
height: 60px;
line-height: 60px; /* needs to be the same height as your navigation div */
top: 0;
width: 100%;
z-index: 10000;
}
.log {
float: right; /* pulls the div to the right side */
}
ul {
padding: 0;
margin: 0 auto;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
text-transform: uppercase;
}
li a {
color: White;
text-align: Center;
padding: 0 10px;
text-decoration: none;
}
li a:hover {
color:wheat;
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 10px;
float: left; /* pulls the div to the left side */
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
made Changes to your HTML and CSS
div with class log is a block level element, means it occupies 100% width of the page, make them display:inline-block and float it to right, make the logo wrap in a div and float it to left. since we are having two float elements navigation bar height gets collapsed to avoid it we need to add clearfix
HTML
<div class="navigation clearfix">
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li>LOGIN</li>
<li>JOIN WITH US</li>
</ul>
</div>
</div>
CSS
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.logo{
float:left;
display:inline-block;
}
.logo a{
padding:8px 2px;
color:#fff;
display:block;
}
.menu{
float:right;
}
.clearfix::after{
content:"";
display:table;
width:100%;
}
.menu ul{
padding:0px;
list-style-type:none;
margin:0;
}
.menu ul li{
display:inline-block;
}
.menu ul li a{
color:#fff;
padding:8px 2px;
display:block;
}
Link For reference
style accordingly
hope this helps..
I've done a little change in the style:
.navigation {
background-color: rgba(15, 58, 114, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
margin: 0 auto;
float: right;
}
ul {
padding: 0;
}
li {
color: White;
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
float: right;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
float: left !important;
margin-top: -10px;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>