Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.
I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.
HTML being affected.
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
<li>
<img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
</ul>
</div>
NAV BAR
<!--section1-->
<section id="top" class="Back to top">
<img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">
<div class="top-bar-container">
<div class="top-bar">
</div>
<nav class="nav-bar">
<ul>
<li>About</li>
<li><a href="#photos" >Gallery</a></li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-container">
<div class="header">
</h3>
<h4>
NAV BAR CSS:
.top-bar-container .top-bar {
width: 800px;
}
.top-bar-container .top-bar .logo {
float: left;
}
.top-bar-container .top-bar .logo span {
color: #27AD60;
}
.top-bar-container .nav-bar {
float: right;
}
.top-bar-container .nav-bar ul li {
list-style-type: none;
display: inline-block;
padding: 21px 27px;
font-size:15px;
}
.top-bar-container .nav-bar ul li a:not(.active) {
text-decoration: none;
color: white;
}
.top-bar-container .nav-bar .active {
color: white;
text-decoration: none;
padding-top:34px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 16px;
color: grey;
text-decoration: none;
position: relative;
}
ul li a:hover, ul li a.selected{
color:white;
}
ul li a.selected:before, ul li a:hover:before {
content: '';
width: 100%;
position: absolute;
top: -19px;
left: 0;
height: 3px;
background: white;
}
h3{
font-size: 121.5%;
line-height: 2.;
font-family: 'PT Sans', sans-serif;
text-align: center;
}
Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.
You can change them to classes or ids so that the selectors are more descriptive.
I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.
Related
I am desperately trying to make sub-menu appears under menu-item below when I hover a mouse.
I created color-change and underline when menu-item is hovered using css but have no idea how to make sub-menu appears under the menu-item. I have no knowledge related jquery so I googled some jquery effect but did not work either.
Is there other way to make it appears without using jquery?
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
You don't need JQuery to display a submenu on hover. You can do it with CSS.
.menu-item:hover .sub-menu {display: block;}
If there is more than one submenu then use id or different class names for them. So you can display the corresponding submenu under each menu.
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.menu-item:hover .sub-menu {display: block;}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
With JQuery you can simulate this as follows:
$(".menu-item").on("mouseover", function(){ //This will display the submenu on mouse hover.
$(".sub-menu").show();
});
$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
You can use mouseover and mouseout or mouseleave events of jQuery.
You can also do this with CSS but you mention you want in jquery that's why I make it with Jquery.
I think you want like this:-
$(document).ready(function(){
$('.menu-item-text').mouseover(function(){
$(this).next('.sub-menu').show();
});
$('.menu-item-text').mouseout(function(){
$(this).next('.sub-menu').hide();
});
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.
To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector
Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/
I was wondering if there was a way to add a scroll to the nav bar when the user has a zoomed in browser.
Currently, I have my nav bar set to:
position: fixed;
left: 0;
top: 0;
Along with a javascript code that makes it stick to the side when the user scrolls on the page.
However, say the user has a browser that is zoomed in 150% or more, half of the nav bar gets cut off and the user is not able to see the other options in the nav bar. Is there a way to add a scroll when the user has a zoomed in browser?
Here is my code,
HTML:
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png"/>
</a>
</div><!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact</li>
</div>
</div>
</ul>
</nav><!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
</ul><!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div><!-- end rights -->
</div ><!-- end footer -->
</header><!-- end header -->
CSS:
/* Header */
#media (min-width:1100px) {
header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header .logo {
margin-top: 50px;
margin-left: -50px;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
margin-top: 30%;
}
header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .7s ease; /* Transition for Webkit browsers */
}
header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
header .rights p {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
header .rights a {
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
Here is the jsfiddle:
https://jsfiddle.net/n2zb3pnz/
Even on the js fiddle it doesn't show the full nav bar because it is too zoomed in.
Fiddle: https://jsfiddle.net/n2zb3pnz/5/
header {
overflow: auto;
bottom:0;
}
A few issues here..
The <header> html tag is normally used as a container element for "navigational aids" for some containing element (in your case <body>). From the docs:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
.. So, it's not semantically incorrect, but think of it's typically usage as being the top portion of a "frame" or box on your page (not the sidebar nav)
Your navbar overflow property is set to hidden - which prevents the scrolling that you are looking for. It also has no parent element aside from the doc body, so unless you want the scrolling on the navbar itself, you'll need to add a parent with overflow: auto;.
Example:
html, body{
height: 1000px;
width: 1000px;
}
.content{
height: 100%;
width: 100%;
overflow: auto;
background-color: pink;
}
.header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
.header .logo {
margin-top: 50px;
margin-left: -50px;
}
.header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
.header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
.header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
.header nav ul li a:hover {
color: #8AE6B8;
}
.header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
.header .footer {
margin-top: 30%;
}
.header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .7s ease;
/* Transition for Webkit browsers */
}
.header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
.header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
.header .rights p {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
.header .rights a {
font-family:"raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header">
<div class="logo"> <a href="index.html">
<img src="img/logo.png"/>
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png">
</li>
<li><img src="img/linkedin.png">
</li>
<li><img src="img/twitter.png">
</li>
<li><img src="img/facebook.png">
</li>
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</div>
<!-- end header -->
</div>
I am having trouble making my nav bar adjust when the user has a zoomed in browser.
For example, at zoom 100%, the nav bar looks as it should, however, if the user were to have their screen set at zoom 150%, half of my nav bar gets cut off.
Here is my HTML/CSS:
https://jsfiddle.net/ghy09hvL/3/
HTML:
<header>
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
</header>
CSS:
#media (min-width:1100px){
header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 30px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
position: absolute;
bottom: 50px;
}
}
Thanks so much in advance! Appreciate it!
If you have the viewport tag in your head, try using vw and vh for your fonts.
viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
CSS something like this
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 5vh;
font-size: 5vh;
text-decoration: none;
letter-spacing: 2px;
}
I figured it out.
I just had to change around the position: relative and position: absolute to be consistent.
All is good, thanks everyone.
Use the #media rule to fix this.
It can also make your page mobile friendly.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
EDIT: I would change your fixed positioning to absolute to avoid this. But if you're dead set on the fixed position, you could update your media query to allow overflow-y: scroll. That way instead of getting cut off the user can scroll the nav if they are zoomed in too far.
You should also remove all your divs, unless you have a good reason for them other than to transition. Here's what I did:
header {
display: block;
position: absolute;
top: 0;
left: 0;
width: 260px;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header nav {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 30px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
width:50%;
height: 30px;
position: relative;
}
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s;
}
header nav ul li a:hover {
color: #8AE6B8;
padding-left: 20%;
}
header nav ul li a:active {
color: #CC99FF;
}
header .footer {
position: absolute;
bottom: 50px;
}
html:
<header>
<div id="menu_icon"></div>
<nav>
<ul>
<li>About</li>
<li>Resume</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Map Gallery</li>
<li>Thesis</li>
<li>Contact</li>
</ul>
</nav>
<!--end sidebar-->
</header>
I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>
I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}
Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo