I can't get my navigation links to work, and I have no idea why. They used to work before, but after I added in a little bit more of coding.. they seem to have stopped.
Anyone have any idea why?
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" />
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
</div>
<div id="footer">
<p>©2014 Rythmn Designs<p></div>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
margin: 0 auto;
position: absolute;
top: 155px;
right: 375px
}
.teamspeak
{
position: absolute;
top: 155px;
right: 30px
}
#ts3viewer_1037062
{
position:absolute;
top: 185px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
There are few CSS fixes that can be done
So nav elements (<a> tags) are floated, which means you must clear your floats. A quick way to do it would be to use overflow:hidden on parent element ( in this case, i'd go with ul which is #nav )
Also noticed some negative margins being applied on #nav element. Im not sure if it was a design decision -anyway, commenting them out will get the nav not to go out of screen.
And wherever possible - try to avoid giving fix height to elements.
below is ammended css for #nav
#nav {
/*height: 1px;*/
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
/*
margin: -14px;
margin-top: -15px;
*/
overflow:hidden;
}
Moving onto nav links #nav li a. Again, not sure if it is a design decision but position:relative; and top:-12px seems to break it.
#nav li a {
/*position:relative;
top: -12px;*/
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
fiddle: http://jsfiddle.net/Varinder/8A9sW/1/
In your following css code, height of 1px is creating the problem. Make it 20-25px and check or just simply remove height:1px; if it doesn't affect your design.
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
Related
Well I have a navigation with a fixed position with a list inside, which I want to change color on a hover. But this doesn't work because of the fixed position of the navigation. Is there a way to get around this?
Here is my example
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li:hover { cursor: pointer;}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1">Link1</li>
<li data-menu="Link2">Link2</li>
<li data-menu="Link3">Link3</li>
<li data-menu="Link4">Link3</li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
Thanks in advance!
Well after trying and trying I added a z-index in the .nav css and it worked... finally! I have no clear explanation for why it worked, but it worked for me.
There is no way currently in CSS alone to select a parent of a child.
The best way I can think of to do this, or at least the simplest would require a little JS.
Simple add a data attribute to your list items, and a JS event that on hover passes the value of the data attribute as a class to the fixed navigation. That class would control color.
Have a go yourself, if you struggle post some code and we can fix it.
Seems to work fine for me with your code (all I did was actually put the <a> tags inside the <li> elements, since that was what your code was targeting.)
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li a:hover {
cursor: pointer;
color: red;
}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1"> <a href=#>Link1</a> </li>
<li data-menu="Link2"><a href=#>Link2</a></li>
<li data-menu="Link3"><a href=#>Link3</a></li>
<li data-menu="Link4"><a href=#>Link4</a></li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
well, you code works fine for me
js fiddle linke
I saw your code and if you don't want to use <a> tag you have to add
.nav-menu li:hover{
color:#fff;
}
simple code
nav { width: 100px; height: 80px; position: fixed; }
nav li { display: inline-block; }
nav li:hover { color: white; }
<nav>
<ul>
<li>dhh</li>
<li>fs</li>
<li>ss</li>
</ul>
</nav>
The simplest way I've tried is putting a filler element inside the first element, and target styling hover for that inner element.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
I have a question about positioning my website. As you can see in the IMG below, there is a gap between two of my images for some odd reason: http://puu.sh/6SWgu.png
I am trying to get rid of that gap, but I can't figure out why.
EDIT
(I don't know who deleted the other comment someone left, but I tried that one with a little bit of configuration and it worked.)
(Question is, will this new code hurt any process as I continue coding in my website?)
Here is the NEW content:
HTML:
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div vertical-align: top; ><img src="images/mainbody.png" /></div>
<div id="footer">
<p>©2014 Rythmn Designs<p>
</div>
CSS:
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 0.1px;
list-style: none;
padding-left: 0.1px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
}
For this you can set the navigation margin-bottom in negative or the main body image margin top as negative if your 0 margin or padding isn't working
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.
I am having a simple layout with a fixed left navigation and a centered page, now the issue in on low resolutions the fixed navigation is comping on the content area which I want to prevent, but I am not able to do so.
Demo
Any idea how I can keep my page centered and even the fixed with div just adjacent to it without overlapping my elements when screen resolution is low
What I want is like this no matter whatever resolution it is in, the page should be centered but the navigation should sit right besides the page and shouldn't overlap page
CSS
.page_wrapper {
min-width: 750px;
max-width: 750px;
margin: 20px auto;
border: 1px solid #ff0000;
}
.content_wrapper {
margin: auto;
max-width: 700px;
margin-left: 120px;
}
p,
ul {
margin: 0;
padding: 0;
}
p {
margin-bottom: 20px;
}
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
From what I can tell, your "left" property on #nav is causing it to always position always 300px from the left margin. Removing that keeps the left nav on the left (instead of 300px from the left).
Instead of:
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
try
#nav {
list-style: none;
position: fixed;
top: 20px;
}
See W3 Schools Left Property for more info.
In response to your comment "that will make position navigation to flow on the extreme left of the page" :
Add a margin-left:20px; property
this can be done by
#nav {
padding-left:20px;
padding-top:30px;
list-style: none;
position: fixed;
top: 20px;
}
Live Fiddle
I've made an example fiddle for you, what you just need is a wrapper div and a content div which is floated to right
Demo
I've changed some of the container div layout and basically you can wrap up the contents in your container
HTML
<div class="main_container">
<nav class="content_navigation">
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
</ul>
</nav>
<div class="right_content">
<div class="section" id="section-1">
<strong>Section 1</strong>
</div>
<div class="section" id="section-2">
<strong>Section 2</strong>
</div>
<div class="section" id="section-3">
<strong>Section 3</strong>
</div>
<div class="section" id="section-4">
<strong>Section 4</strong>
</div>
<div class="section" id="section-5">
<strong>Section 5</strong>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
.main_container {
width: 900px;
min-width: 900px;
margin: 0 auto;
background: #ffffff;
}
.content_navigation {
width: 205px;
position: fixed;
margin-top: 120px;
}
.right_content {
float: right;
width: 675px;
border-left: 1px solid #252525;
margin-top: 25px;
}
#nav {
list-style: none;
}
#nav li {
margin-bottom: 2px;
}
#nav a {
background: #ededed;
color: #666;
display: block;
font-size: 11px;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover {
background: #dedede;
}
#nav .current a {
background: #666;
color: #ededed;
}
.current {
background: red;
}
.section {
border-bottom: 5px solid #ccc;
padding: 20px;
}
.section p:last-child {
margin-bottom: 0;
}
use left: 50% with negative left-margin to position the #nav from the middle
jsfiddle
#nav {
left: 50%;
margin-left:-350px;
...
}
I tried to make something resembling what you have in the diagram, making #nav absolutely positioned wrt .left_navigation. Also removed the margin on .content_wrapper since it didn't seem to serve a purpose.
.content_wrapper {
/*margin-left: 120px;*/
}
#nav {
left:-77px;
width:76px;
list-style: none;
position: absolute;
top: -1px;
}
.left_navigation{
position:relative;
}
DEMO