i have a problem with making the list horizontally, I tries putting in display: inline; and float: right; doesn't seem to work. Hope you can help, and sorry for the badly explained problem, I just started the education. Have a great day
ul {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
margin-left: -17px;
width: 200px;
line-height: 350%;
}
li a {
display: inline;
color: #FFFFFF;
padding: 15px;
text-decoration: none;
font-size: 35px;
font-weight: 400;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: #F39D2A;
}
<body style="background-color:black;">
<div class="menu">
<ul>
<li>Home</li>
<li>Om os</li>
<li>Portfojle</li>
<li>Kontakt os</li>
</ul>
</div>
Try this code to set your menu horizontal and remove color white or give background color so you can visible text properly give float property to li only.
ul {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
}
li {
float: right;
}
li a {
display: inline;
color: #000;
padding: 15px;
text-decoration: none;
font-size: 35px;
font-weight: 400;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: #F39D2A;
}
<div class="menu">
<ul>
<li>Home</li>
<li>Om os</li>
<li>Portfojle</li>
<li>Kontakt os</li>
</ul>
</div>
You can use flexbox like display: flex in ul.
ul {
display: flex;
width: 100%
}
It will align ul items in horizontal.
HTML:
<body style="background-color:black;">
<div class="menu">
<ul>
<li>Home</li>
<li>Om os</li>
<li>Portfojle</li>
<li>Kontakt os</li>
</ul>
</div>
CSS:
ul {
display: flex;
width: 100%
}
li a {
display: inline;
color: #FFFFFF;
padding: 0 25px;
text-decoration: none;
font-size: 35px;
font-weight: 400;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: #F39D2A;
}
I belive this will work. If you want adjust more, you can read about flex concept here (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Related
I'm trying to create a clone of the google homepage as one of my first html/css projects. This is the first time I've ever coded and I'm having trouble with setting the background colour for one of the navigation bars at the bottom of the screen. I was able to set the background colour of the upper navigation bar (the one with the country name on it) but when I try to set the background colour for the lower navigation bar (the one with the Advertising and Business links) it doesn't show and the bar remains white.
This is my html code for the lower navigation bars
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</footer>
This is my CSS
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #f2f2f2;
}
.bottom_nav {
padding-top: 170px;
}
And this is what the page looks like for reference. I want the lowest bar to be grey as well.
google homepage clone
Can anyone help me out?
You do not need to use ul li. You can wrap your bottom link in to div and use display: flex and justfify-content:space-between to have space between your link.
Also i have modified the a links to match exactly as google footer by adding padding and text-decoration:none
Exact copy of google footer in demo.
Working Demo: https://jsfiddle.net/kx291hqm/
Run snippet below.
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 27px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_r {
padding-right: 27px;
}
.bottom_nav {
padding-top: 170px;
}
.bottom_link {
display: flex;
justify-content: space-between;
line-height: 40px;
background: #f2f2f2;
}
a {
text-decoration: none;
white-space: nowrap;
color: #5f6368;
padding-left: 27px;
}
<footer class="bottom_nav">
<div class="country_nav">
Canada
</div>
<div class="bottom_link">
<div class="bottom_nav_l">
Advertising
Business
How Search Works
</div>
<div class="bottom_nav_r">
Settings
Terms
Privacy
</div>
</div>
</footer>
Try with adding following css:
.bottom_nav{
background-color:blue;
}
I hope this will help you..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #ededed;
padding-top: -1px;
padding-bottom: 1px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
margin-left: -10px;
}
section{
background-color: #ebebeb;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
list-style-type: none;
}
.bottom_nav_l li a {
display: block;
margin-left: -10px;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
ul {
list-style-type: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #d7d7d7;
}
.bottom_nav {
padding-top: 0px;
position: relative;
top: 460px;
}
</style>
</head>
<body>
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<section>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</section>
</footer>
</body>
</html>
I have the width of the first ul equal to the width of the words with margin-right = 50px and I have the bottom ul width = 200px. The problem is if the top ul width is 180px and I hover on it, the top ul matches the bottom 200px which increase the right side and pushing the list.
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
}
.navbar-tab {
margin: auto;
width: 1300px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.navbar-tab-1 {
padding-right: 50px;
}
ul li {
list-style: none;
height: 50px;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 50px;
float: left;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.hover-list li {
font-size: 15px;
background-color: #e2e2e2;
width: 200px;
text-indent: 20px;
}
<nav id="navbar">
<ul class="navbar-tab">
<li class="navbar-tab-1">Home</li>
<li class="navbar-tab-1">Diamond Search
<ul class="hover-list">
<a>
<li>GIA Diamond Search</li>
</a>
<a>
<li>Diamonds</li>
</a>
</ul>
</li>
<li class="navbar-tab-1">Wedding Bands</li>
<li class="navbar-tab-1">Engagement Rings</li>
<li class="navbar-tab-1">Selection Guide</li>
<li class="navbar-tab-1">Jewellery Services</li>
</ul>
</nav>
You can give absolute position to the ul element that contains submenu to prevent it from affecting the width of parent:
.hover-list {
position: absolute;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
}
.navbar-tab {
margin: auto;
width: 1300px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.navbar-tab-1 {
padding-right: 50px;
}
ul li {
list-style: none;
height: 50px;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 50px;
float: left;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.hover-list li {
font-size: 15px;
background-color: #e2e2e2;
width: 200px;
text-indent: 20px;
}
.hover-list {
position: absolute;
}
<nav id="navbar">
<ul class="navbar-tab">
<li class="navbar-tab-1">Home</li>
<li class="navbar-tab-1">Diamond Search
<ul class="hover-list">
<a>
<li>GIA Diamond Search</li>
</a>
<a>
<li>Diamonds</li>
</a>
</ul>
</li>
<li class="navbar-tab-1">Wedding Bands</li>
<li class="navbar-tab-1">Engagement Rings</li>
<li class="navbar-tab-1">Selection Guide</li>
<li class="navbar-tab-1">Jewellery Services</li>
</ul>
</nav>
Also, I would suggest using Class selectors over tag selectors such as ul li, ul li a or ul li ul li. Tag selectors not-only have a slightly poor performance as compared to class selectors, but they will also apply to a larger number of elements - sometimes when you don't intend them to be - like in case you had another ul element in the page that listed some unrelated items.
I am designing a hotel website with a fixed navbar. I am having trouble getting the items to be inline with an image item. It's getting quite frustrating.
Here's my HTML
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
and here's my CSS
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
My code is super basic, so work with me here.
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255, 255, 255, .55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home">
<a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img>
</a>
</li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
Live Example I made: https://akainth015.github.io/Inked-Out
Often, you can align things with vertical-align(CSS). However, it is a little counter-intuitive. When you use the vertical-align style, the element it is applied to becomes the standard for the rest of the elements. So, if you have this structure:
li {
display: inline-block;
}
ul {
list-style-type: none;
}
li img {
vertical-align: middle;
}
<ul>
<li>Home</li>
<li><img src="https://placehold.it/64x64"></li>
<li>About</li>
</ul>
Notice how it is applied to the image, not the the text you want in the center. Good luck!
How do I align my navbar to the right side without removing my display: inline;?
If I remove my display: inline;, the li automatically aligns to the right side of the page but in a list format.
HTML
<div id="header">
<div id="headerContainer">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
</div>
CSS
#headerContainer ul {
list-style-type: none;
}
#headerContainer li {
display: inline;
padding-left: 10px;
text-align: right;
}
#headerContainer a {
text-decoration: none;
color: white;
}
#headerContainer a:hover {
color: black;
}
I do not want to remove my display: inline; attribute because it's the attribute that aligns my list in one line, help please (might be a noob question lol).
Try this out ( add text-align: right; to the <ul>):
CSS
#headerContainer ul {
list-style-type: none;
text-align: right;
}
DEMO HERE
you need to set float:right for headerContainer.
HTML
<div id="header">
<div id="headerContainer">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
</div>
CSS
#headerContainer ul {
float:right;
list-style-type: none;
}
#headerContainer li {
display: inline;
padding-left: 10px;
text-align: right;
}
#headerContainer a {
text-decoration: none;
color: white;
}
#headerContainer a:hover {
color: black;
}
http://codepen.io/anon/pen/OyawoG
Add float:right to the ul (not the li's or your menu ordering will be reversed). This will allow you to include other elements in your header (logo?) but only your menu will float to the right.
#headerContainer ul {
list-style-type: none;
float: right;
margin: 0;
}
#headerContainer li {
display: inline;
padding-right: 10px;
text-align: right;
}
#headerContainer a {
text-decoration: none;
color: white;
}
#headerContainer a:hover {
color: black;
}
jsfiddle
I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li>Accueil</li>
<li>CV</li>
<li>Enseignement
<ul>
<li>Plans de cours</li>
<li>Leçons</li>
<li>Powerpoints </li>
</ul>
</li>
<li>Recherche
<ul>
<li>Italia</li>
<li>Livres</li>
</ul>
</li>
<li>Liens</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?