HTML
Home
News
Photos
Videos
Schedule
Links
<ul id="HeaderMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
<ul id="footerMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
And address them separately in CSS as this :
body{
background: #cccccc url("http://www.paradise.lk/images/pattern.png") no-repeat;
width: 100%;
height:auto;
}
h1 {
text-align: center;
}
p.text{
text-align: center;
}
#HeaderMenu li {
float: left;
}
#HeaderMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#HeaderMenu li a:hover:not(.active) {
background-color: red;
color:black;
}
#footerMenu li {
float: left;
}
#footerMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#footerMenu li a:hover:not(.active) {
background-color: #2d6a05;
color:black;
}
ul.HeaderMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
ul.footerMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
#logo img {
height: 90px;
width: 212px;
}
.box {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
}
.box1 {
background-color:white;
width: 300px;
padding: 25px;
margin: 25px;
}
Now do your styles separately for header and footer menus.
body{
background: #cccccc url("http://hdnaturewall.com/wallpaper/2015/10/sky-blue-wallpaper-background-18-desktop-background.jpg") no-repeat 0px -501px;
}
Related
I have a header that I would like to put a logo in the middle of. I don't want to use bootstrap unless there is no other choice. The logo appears to show in the centre of the navigation bar as I would like, however, the links do not go around it properly. Here is an example of what I want the navbar to look like in terms of positioning: ibb.co/zsGG9FY
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
float: left;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
You have set float: left on <li> tag so it keeps on left position. This should be removed.
And using display: flex layout on ul tag, you can align all items on center.
Attached snippet shows what you need.
#firstpage {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
#firstpage ul {
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
My solution uses Flexbox. I've replaced the image with an element with a dashed border so that it's obvious where it is. I've also but a pink background behind each link to show that they are indeed all the same width.
Each normal link has a width of 100% to force them to take up all available space. The logo has flex-shrink:0 so that it retains it's given size.
#firstpage ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
width: 100%;
}
#firstpage li:nth-child(odd) {
background: pink;
}
#firstpage li a {
display: block;
text-align: center;
color: white;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
border: white dashed 3px;
width: 50px;
flex-shrink: 0;
height: 50px;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
I've removed the classes containing float: left for li items and position: absolute for .midlogo item respectively.
All you need is flex property inside ul item to adjust its 1 dimensional layout.
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
/************ ADD FLEX DISPLAY ************/
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
You should read about the flex property- https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Any one know how to do that active button with around space?
like this my sample image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
You need to add some padding to your li elements, like the snippet below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
How can i center the float element that you can see in this photo? I want to bring it from the left of the web page to the middle, but keeping it at the top of the page?
Here is the code of the HTML:
<html>
<head>
<title>Batch File Generator | Home</title>
</head>
<link href="style.css" rel="stylesheet" >
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</li></a>
<li><a>Ask the developers</li></a>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
And here is the code of the CSS:
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
For HTML Code, use this:
<div class="wrapper">
<div class="middle-content">
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</a></li>
<li><a>Ask the developers</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</div>
</div>
For css code:
html{
height: 100%;
}
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
height: 100%;
}
.wrapper{
display: table;
width: 100%;
height: 100%;
}
.middle-content{
display: table-cell;
vertical-align:middle;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Solution with flexbox.
* {
box-sizing: border-box;
}
html,
body,
ul {
padding: 0;
margin: 0;
}
nav {
width: 100%;
background-color: darkgray;
}
li {
list-style: none;
padding: 15px;
border: thin solid lightgray;
position: relative;
background-color: white;
}
li>a {
display: inline-block;
text-decoration: none;
}
.main-menu {
display: flex;
justify-content: center;
}
.sub-menu {
display: none;
position: absolute;
left: 0px;
width: 100%;
margin-top: 15px;
}
.main-menu li:hover {
background-color: lightgreen;
}
.sub-menu li:hover {
background-color: lightblue;
}
.main-menu li:hover>.sub-menu {
display: block;
}
<nav>
<ul class="main-menu">
<li><a>Home</a></li>
<li><a>Download</a>
<ul class="sub-menu">
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul class="sub-menu">
<li>Community forums</li>
<li>Ask the developers</li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</nav>
I want my text in the middle of the navigation bar. I tried vertical-align:center or middle but that didn't work.
Here is what I have:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
height: 60px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Set the line-height property equal to the height of your element :
li a {
height: 60px;
line-height: 60px;
}
In order to vertically centralise the text, you need set a line-height equal to the height of the element. In this case, it's 60px:
li a {
height: 60px;
line-height: 60px;
}
Hope this helps! :)
Use Flexbox (display: flex) to center the text. It's more flexible than line-height (height can be a percentage) and has good browser support. See caniuse.com.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
height: 60px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color: #333;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
color: white;
text-align: center;
text-decoration: none;
height: 22px;
}
li a:hover {
background-color: #111;
}
<ul class="nav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I am making a simple menu and I have a problem.
In my menu, there are several different options with a lightgrey top border. When you hover over the links i have there backgrounds turn lightgrey as well but there is still a small line above each link where they lightgrey background color does not cover.
See the picture below:
I do not want that line to be there. I have tried using padding but to no effect.
#wrapper {
width: 500px;
border-top: lightgrey 3px solid;
}
li a {
color: white;
font-size: 20px;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
}
li a:hover {
color: black;
background: lightgrey;
}
ul {
display: inline;
list-style: none;
}
li {
display: inline;
}
nav {
height: 40px;
width: 100%;
background-color: darkgreen;
text-align: right;
}
<div id="wrapper">
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Articles
</li>
<li>Forum
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</div>
<div id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
css
#wrapper{
width: auto;
margin-right:25%;
margin-left:25%;
}
nav{
display: table;
background-color:darkgreen;
border-top:lightgrey 3px solid;
}
ul{
padding: 0;
margin:10px 0 0 0;
}
li{
list-style: none;
float: left;
}
a{
text-decoration: none;
color: white;
font-size:20px;
background-color: darkgreen;
padding: 10px;
}
a:hover{
text-decoration: none;
color: black;
font-size:20px;
background:lightgrey;
}
I decided just to float the <li>'s, instead of using inline-block or using a table layout:
li {
float: left;
}
li a {
font-size: 20px;
text-decoration: none;
padding: 0 10px;
height: 40px;
line-height: 40px;
display: block;
color: white;
}
Updated JSfiddle