it works fine with all browsers except chrome, while real-preview using Dreamweaver seems fine with all of them, but when uploading it to the server the problem shows up in chrome only. tried to change the inline/block tag. the display: none/block tag everything and still can not solve it. is it a CSS related thing or javascript or what? the dropdown menu works fine on every browser except Chrome
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
ul > li{
list-style-type: none;
display: inline-block;
}
.grid-container {
display:grid;
}
a {
display: block;
}
#upper-bar {
background-color: #00A2CB;
color: white;
font-weight: bold;
font-family: sans-serif;
padding-left: 50px;
padding-right: 50px;
}
div[id="upper-bar"] a {
color: white;
padding: 5px;
}
#lower-bar {
font-weight: bold;
font-family: sans-serif;
padding-left: 70px;
padding-right: 70px;
}
div[id="lower-bar"] a {
color: black;
padding: 5px;
}
.align-left {
float:left;
}
.align-right {
float: right;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00A2CB;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #008FB3;}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>
<body>
<header class="grid-container">
<div id="upper-bar">
<div class="align-left">
<ul>
<li>|</li>
<li><a href="#" >ABOUT US</a></li>
<li>|</li>
<li><a href="#" >OUR SERVICES</a></li>
<li>|</li>
<li class="dropdown">
HELP
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
<div id="lower-bar">
<div class="align-left">
<ul>
<li></li>
<li><a href="#" >Home</a></li>
<li><a href="#" >Individuals</a></li>
<li><a href="#" >doctors</a></li>
<li><a href="#" >Companies</a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li><a href="#" >Login</a></li>
<li><a href="#" >Signup</a></li>
</ul>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Related
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to get my social nav-bar to sit above my main nav bar which I have achieved but the issue I now face is that the main content of the page overlaps the nav bar.
If i add padding to the body it just makes the nav bar move down the page.
I can't for the life of me find what the issue is.. sorry i am learning at the moment so please don't be too harsh. any help would be appreciated.
body {
padding: 50px;
}
.topnav {
text-align: right;
font-family: 'Quicksand', sans-serif;
background: #f4f5eb;
padding: 0 20px;
margin: 0;
overflow: hidden;
}
.social li {
text-align: right;
list-style: none;
display: inline-block;
}
a {
text-decoration: none;
padding: 0 10px;
color: grey;
font-size: 15px;
}
a:hover {
color: rgb(17, 240, 17);
}
.social1 {
font-size: 10px;
color: black;
padding: 5px;
}
.main-nav {
text-align: center;
font-family: 'Quicksand', sans-serif;
padding: 0 40px;
margin: 0;
overflow: hidden;
padding: 15px;
float: left;
}
.main li {
text-align: center;
list-style: none;
display: inline-block;
}
.main1 {
color: black;
}
#logo {
float: left;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 7 !important;
}
.dropdown-content a {
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: rgb(17, 240, 17);
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<nav class="topnav">
<div class="topnav-social">
<ul class="social">
<li>Social Wall</li>
<li>
<a href="https://www.egis-group.com/rss.xml" i class="fas fa-rss"></i>
</a>
</li>
<li>
<a href="https://vimeo.com/channels/egis" i class="fab fa-vimeo-v"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC7htuNSYHgMDr5wkoQMD8lQ" i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://twitter.com/egis" i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/company/egis" i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="http://fr.viadeo.com/fr/company/egis?gaid=2012012300803" i class="fab fa-viadeo"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/egisgroup" i class="fab fa-facebook-f"></i>
</a>
</li>
<li><a class="social1" href="https://www.egis-group.com/talent/join-us" target="_blank">Join Us</a></li>
<li><a class="social1" href="https://www.egis-group.com/contact" target="_blank">Contact</a></li>
<li><a class="social1" href="https://www.egis-group.com/publications" target="_blank">Publications</a></li>
</ul>
</div>
</nav>
<div id=logo>
<img src="images/logo.jpg" width="350" height="100" alt="Brand">
</div>
<nav class="main-nav">
<div class="mainnav-head">
<ul class="main">
<li><a class="main1" href="index.php">Home</a></li>
<?php if((isset($_SESSION['username']) || isCookieValid($db))): ?>
<li>my profile</li>
<li class="dropdown">
Skills By Shift
<div class="dropdown-content">
Traffic Management
Lead Installers/Fiss
Licenses
Other Skills
</div>
</li>
<li class="dropdown">
Risk Assessments/Method Statements
<div class="dropdown-content">
Traffic Management
VSF/Barrier
C'way Repairs
Equiptment
</div>
</li>
<li>Logout</li>
<?php else: ?>
<li><a class="main1" href="">Blog</a></li>
<li><a class="main1" href="">About</a></li>
<li><a class="main1" href="">Egis Projects</a></li>
<li><a class="main1" href="login.php">Login</a></li>
<?php endif ?>
</ul>
</div>
</nav>
</header>
You can achieve this with flexbox.
<div class="full-nav-wrapper">
<div class="social-nav-wrapper">
<div class="social-nav-left">
Social Wall
</div>
<div class="social-nav-right">
Join Us
Contact
Publications
</div>
</div>
<div class="main-nav-wrapper">
<div class="main-nav-logo">
<img src="https://via.placeholder.com/140x100">
</div>
<div class="main-nav-links">
Home
My Profile
Skills By Shift
Risk Assessments/Method Statements
Logout
Blog
About
Egis
Projects
Login
</div>
</div>
</div>
CSS
a {
color:white;
}
.full-nav-wrapper {
border:2px solid purple;
}
.social-nav-wrapper {
background-color:blue;
display:flex;
justify-content: space-between;
}
.social-nav-left {
}
.social-nav-right {
}
.main-nav-wrapper {
background-color:pink;
display:flex;
justify-content: space-between;
align-items:center;
}
.main-nav-logo {
display:flex;
flex-grow: 1;
}
.main-nav-logo > img {
width: 50px;
height: 50px;
}
.main-nav-links {
display:flex;
justify-content: space-around;
flex-grow:3;
}
That's a lot of links though so you would need to work in a responsive technique for proper display on mobile.
#media (max-width:767px) {
.main-nav-wrapper {
flex-wrap: wrap;
}
.main-nav-links {
display: flex;
justify-content: space-around;
}
.main-nav-logo {
justify-content: center;
}
.main-nav-links {
flex-wrap: wrap;
}
}
I think this is what you want to achieve though.
I colored the divs so you can go back and possibly understand what I did.
Learn up on flexbox if you find this code somewhat understandable.
Codepen: https://codepen.io/nolaandy/pen/OqarXY
I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
How to keep space between these three items on top?
I have tried few ways but when I try them they skip to next line. I have added the code I'm trying. And how to keep the size of width at 1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Where I want to make spaces is shown below:
You just need to add margin to the middle item ()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 10px;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>