css isnt formatting nav menu

  • (2 Pages)
  • +
  • 1
  • 2

27 Replies - 1388 Views - Last Post: 08 February 2013 - 12:25 AM

#1 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

css isnt formatting nav menu

Posted 07 February 2013 - 03:35 AM

Hello
I have a <nav> menu (html 5). I want to make it into a horizontal nav bar at the top. Here is the html for that, but the css isnt formatting at all. THe stylesheet is linked (external) as my header is working fine.

   <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
      </li>         
      <li><a href="/contact">Contact</a>
        <ul>

    </ul>
</nav>


And css

nav {
  background-color:#2C5463;
  height:40px;
}
 
 
nav ul {
  font-family: Arial, Verdana;
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav ul li {
  display:inline-block;
  position: relative;
  float: left;
 
}
 
nav li ul {
  display: none;
}
 
nav ul li a {
  display: block;
  text-decoration: none;
  padding: 7px 15px 3px 15px;
  background: #2C5463;
  color: #ffffff; 
  margin-left: 1px;
  white-space: nowrap;
  height:30px; 
  width:90px;
  text-align:center;
 
}
 
nav ul li a:hover {
  background: #617F8A;
}
 
nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
}
 
nav li:hover li {
  float: none;
  font-size: 11px;
 
}
 
nav li:hover a {
  background: #3A464F;
  height:30px; 
}
 
nav li:hover li a:hover {
  background: #95A9B1;
}
 
nav ul li ul li a {
    text-align:left; 
}


I've tried it inside and outside of a div but no luck. THanks!

This post has been edited by Dormilich: 07 February 2013 - 03:37 AM
Reason for edit:: please use [code] [/code] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: css isnt formatting nav menu

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 03:46 AM

Well, try to do this

Insert the following in your <head> tag

<style type="text/css">
nav {
  background-color:#2C5463;
  height:40px;
}
 
 
nav ul {
  font-family: Arial, Verdana;
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav ul li {
  display:inline-block;
  position: relative;
  float: left;
 
}
 
nav li ul {
  display: none;
}
 
nav ul li a {
  display: block;
  text-decoration: none;
  padding: 7px 15px 3px 15px;
  background: #2C5463;
  color: #ffffff; 
  margin-left: 1px;
  white-space: nowrap;
  height:30px; 
  width:90px;
  text-align:center;
 
}
 
nav ul li a:hover {
  background: #617F8A;
}
 
nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
}
 
nav li:hover li {
  float: none;
  font-size: 11px;
 
}
 
nav li:hover a {
  background: #3A464F;
  height:30px; 
}
 
nav li:hover li a:hover {
  background: #95A9B1;
}
 
nav ul li ul li a {
    text-align:left; 
}
</style>


regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: css isnt formatting nav menu

Posted 07 February 2013 - 03:46 AM

question, why are you using display, position and float at the same time? I wouldn’t be surprised if that interferes with each other.

for reference, look at the CSS of the "Suckerfish Dropdown".
Was This Post Helpful? 0
  • +
  • -

#4 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 04:40 AM

It's all in an external stylesheet.


View Postraghav.naganathan, on 07 February 2013 - 03:46 AM, said:

Well, try to do this

Insert the following in your <head> tag

[...]


Now that section looks like this but still same thing.

nav ul li {
  display:inline-block;

 
}
 
nav li ul {
  display:inline-block;
}


I actually thought the display and float would do different things, but could be wrong.

This post has been edited by Dormilich: 07 February 2013 - 05:00 AM
Reason for edit:: please use [code] [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#5 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 04:57 AM

ok I copied the code just to test it from this website. http://forrst.com/po...n_with_CSS3-I5T as I'm doing this in html5. But it's still the same thing.

html
<code>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>


<div class="container">
<header>
<img src="logo.gif" width="165": height="150px" />
<h1 class="title"> Precision Demolition LLC</h1> 
</header>

<nav class="navigation">
    <ul>
        <li>
            <a href="#">About Us</a>
            <ul>
                <li><a href="#">Designer</a></li>
                <li><a href="#">Developer</a></li>
                <li><a href="#">Marketer</a></li>
            </ul>
        </li><li>
            <a href="#">Products</a>
            <ul>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Icon Design</a></li>
                <li><a href="#">Mobile Apps</a></li>
            </ul>
        </li><li>
            <a href="#">Contact Us</a>
            <ul>
                <li><a href="#">Tokyo</a></li>
                <li><a href="#">London</a></li>
                <li><a href="#">New York</a></li>
            </ul>
        </li>
    </ul>
</nav>


</div>

</body>
</html>


CSS

@charset "utf-8";
/* CSS Document */

body {
	background-color:#FFFFFF;
	margin-left:0:
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
}

.container {
	width: 960px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

header {
	width:100%;
	height:40%;
	background-image:url(background.gif);
	
}

.logo {
	float:left;

}

.title	{
	color:white;
	float:right;
	text-shadow:0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.3),
	0 5px 10px rgba(0,0,0,.25),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15
};

.navigation {
     position: relative;
     border: 8px solid #999; 
     margin: 1.5em 0 2em; 
     background: #999;
     min-width: 550px;
}

.navigation:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    margin: -1px 0 0 -1px;
    border: 1px solid #333; 
    border-radius: 10px;
}

.navigation a {
    color: #fff;
    text-decoration: none;
}

.navigation > ul {
    text-align: center; 
    padding: 0 0.5em;
    position: relative;
    border-top: 1px solid #ccc;
    border-left: 1px solid #aaa;
    border-right: 1px solid #555;
    border-bottom: 1px solid #000
    background: #000;
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -moz-linear-gradient(top, #666, #333);
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -webkit-gradient(linear, center top, center bottom, from(#666), to(#333));
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -o-linear-gradient(top, #666, #333);
    color: #fff;
    font-family: sans-serif;
    font-weight: 900;
    border-radius: 10px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.navigation > ul > li {
    border-right: 2px groove #666;
    display: inline-block; 
    position: relative;
    vertical-align: top;
    margin: 0;
    text-align: left;
    text-shadow: -1px -1px 1px #000;
    width: 10em;
    text-align: center;
}

.navigation > ul > li a {
    display: block;
    padding: 1em;
}

.navigation > ul > li:hover a {
    background: rgba(0, 0, 0, 0.2);
    color: #ccc;
}

.navigation > ul > li:first-child {
    border-left: 2px groove #666;
}

.navigation > ul > li > ul {
    display: none;
    position: absolute;
    margin: 0;
    font-weight: 100;
    border: 1px solid #000;
    background: #333;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
    width: 100%;
    text-shadow: none;
}

.navigation > ul > li > ul > li {    
     border-bottom: 2px groove #333; 
     padding: 0;
     width: inherit;
}

.navigation > ul > li > ul > li a {
     display: block;  
     padding: 1em;
}

.navigation > ul > li > ul > li:last-child {
     border: none;   
}

.navigation > ul > li > ul > li:hover {
     background: #333;   
    
}

.navigation > ul > li:hover > ul, .navigation > ul > li > ul.hovering {
    display: block;
}


I pasted the entire code as since it is not working with original code and the code from someone who knows more than me (Sucker fish:) I'm likely doing something more wrong that I dont know.
THanks!

This post has been edited by Dormilich: 07 February 2013 - 05:02 AM
Reason for edit:: please use [code] [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 05:24 AM

You don't need the "px" here:

<img src="logo.gif" width="165" height="150px" />

You have three errors in your css:

body {
	background-color:#FFFFFF;
	margin-left:0:


	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15
};


    border-bottom: 1px solid #000
    background: #000;

http://validator.w3....lidate_by_input

http://jigsaw.w3.org...lidate_by_input

This post has been edited by Dormilich: 07 February 2013 - 05:31 AM

Was This Post Helpful? 0
  • +
  • -

#7 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 08:04 AM

Thanks! I bookmarked those links for the future! And changed the errors, but the only error I can't part with is the text-shadow. I don't know why it's wrong and I don't want to mess with the 3d effect of the text.

Still problem with the menu though:/ It's showing up on the left in a down menu. It should be horizontal dropdown like in the link, but nothing at all is linking from the style sheet. I changed some things of css as well bu nothing dramatic.

Current code
@charset "utf-8";
/* CSS Document */

body {
	background-color:#FFFFFF;
	margin-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
}

.container {
	width: 960px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

header {
	width:100%;
	height:40%;
	background-image:url(background.gif);
	
}

.logo {
	float:left;

}

.title	{
	color:white;
	float:right;
	text-shadow:0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.3),
	0 5px 10px rgba(0,0,0,.25),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15
};

.navigation {
     position: relative;
     border: 8px solid #999; 
     margin: 1.5em 0 2em; 
     background: #999;
     min-width: 550px;
}

.navigation:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    margin: -1px 0 0 -1px;
    border: 1px solid #333; 
    border-radius: 10px;
}

.navigation a {
    color: #fff;
    text-decoration: none;
}

.navigation > ul {
    text-align: center; 
    padding: 0 0.5em;
    position: relative;
    border-top: 1px solid #ccc;
    border-left: 1px solid #aaa;
    border-right: 1px solid #555;
    border-bottom: 1px solid #000;
    background: #000;
    
    color: #fff;
    font-family: sans-serif;
    font-weight: 900;
    border-radius: 10px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.navigation  ul  li {
    border-right: 2px groove #666;
    display: inline-block; 
    position: relative;
    vertical-align: top;
    margin: 0;
    text-align: left;
    text-shadow: -1px -1px 1px #000;
    width: 10em;
    text-align: center;
}

.navigation  ul  li a {
    display: block;
    padding: 1em;
}

.navigation  ul li:hover a {
    background: rgba(0, 0, 0, 0.2);
    color: #ccc;
}

.navigation  ul  li:first-child {
    border-left: 2px groove #666;
}

.navigation  ul  li  ul {
    display: none;
    position: absolute;
    margin: 0;
    font-weight: 100;
    border: 1px solid #000;
    background: #333;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
    width: 100%;
    text-shadow: none;
}

.navigation  ul  li  ul  li {    
     border-bottom: 2px groove #333; 
     padding: 0;
     width: inherit;
}

.navigation  ul  li  ul  li a {
     display: block;  
     padding: 1em;
}

.navigation  ul  li  ul  li:last-child {
     border: none;   
}

.navigation  ul  li  ul  li:hover {
     background: #333;   
    
}

.navigation  ul  li:hover  ul, .navigation  ul  li  ul.hover {
    display: block;
}

This post has been edited by Dormilich: 07 February 2013 - 08:24 AM
Reason for edit:: please use [code] [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 08:13 AM

I see you haven't conquered how to wrap your code in code tags.. It tells you how to do this directly in the area where you are typing your post! It helps if you preview before posting.

This post has been edited by andrewsw: 07 February 2013 - 08:15 AM

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 08:19 AM

This is still wrong:

0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15
};

text-shadow only works in some browser; just make sure the syntax for it is correct.

Syntax

Quote

p.test {
text-shadow: #6374AB 20px -12px 2px;
}
As you see text-shadow accepts four values:

The color of the text-shadow (#6374AB)
The X-coordinate of the text-shadow (20px), relative to the text
The Y-coordinate of the text-shadow (-12px), relative to the text
The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is 'stretched', causing a blur effect. 0 means: no blur. Don't set this value too high, the shadowtext quickly becomes illegible.

quirksmode

Although you've repeated it a dozen times(?).

This post has been edited by andrewsw: 07 February 2013 - 08:23 AM

Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 08:33 AM

That Suckerfish page you linked to uses jQuery; did you attach this library and include the script - jsfiddle link.
Was This Post Helpful? 0
  • +
  • -

#11 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 09:10 AM

Yeah tried it with both.
Maybe it's my ignorance on jquery as I've never used it before but at least I tried to use google and it had it in the body tag:) In my case, I put it in div container though.

<script type="text/javascript">

$(function () {        
    $('a').focus(function () {
         $(this).next('ul').addClass('hovering'); 
         $(this).closest('li ul').addClass('hovering'); 
    }).blur(function () {
         $(this).next('ul').removeClass('hovering');
         $(this).closest('li ul').removeClass('hovering');
    });
});

</script>



Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: css isnt formatting nav menu

Posted 07 February 2013 - 09:31 AM

View Postcodespook, on 07 February 2013 - 05:10 PM, said:

In my case, I put it in div container though.

in that case it doesn’t matter at all, because the code is executed on the DOMContentReady event.
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 09:37 AM

You can put that whole script at the bottom of your page, just before the closing body tag.

But you need to attach the jQuery library itself:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>


There are versions of Suckerfish (and other alternatives) some of which require little or no Javascript. HTML Dog.
Was This Post Helpful? 0
  • +
  • -

#14 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 148
  • Joined: 31-October 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 10:34 AM

Unfortunately still does not work. It just does not like my style sheet:/ Interestingly enough, I did test code which worked internally but putting in the stylesheet did not work. Back to this code though.

html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Precision Demolition LLC</title>
<link href="style.css" rel="stylesheet" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
3	</script>

</head>




<body>
<div class="container">



<header>
<img src="logo.gif" width="165": height="150" />
</header>


<nav class="navigation">
    <ul>
        <li>
            <a href="#">About Us</a>
            <ul>
                <li><a href="#">Designer</a></li>
                <li><a href="#">Developer</a></li>
                <li><a href="#">Marketer</a></li>
            </ul>
        </li><li>
            <a href="#">Products</a>
            <ul>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Icon Design</a></li>
                <li><a href="#">Mobile Apps</a></li>
            </ul>
        </li><li>
            <a href="#">Contact Us</a>
            <ul>
                <li><a href="#">Tokyo</a></li>
                <li><a href="#">London</a></li>
                <li><a href="#">New York</a></li>
            </ul>
        </li>
    </ul>



</div>

<script type="text/javascript">
$(function () {        
    $('a').focus(function () {
         $(this).next('ul').addClass('hovering'); 
         $(this).closest('li ul').addClass('hovering'); 
    }).blur(function () {
         $(this).next('ul').removeClass('hovering');
         $(this).closest('li ul').removeClass('hovering');
    });
});
</script>

</body>
</html>





css for the list

.navigation > ul {
    text-align: center; 
    padding: 0 0.5em;
    position: relative;
    border-top: 1px solid #ccc;
    border-left: 1px solid #aaa;
    border-right: 1px solid #555;
    border-bottom: 1px solid #000
    background: #000;
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -moz-linear-gradient(top, #666, #333);
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -webkit-gradient(linear, center top, center bottom, from(#666), to(#333));
    background-image: url('http://cl.ly/8e6h/200-100-5-monochrome.png'), -o-linear-gradient(top, #666, #333);
    color: #fff;
    font-family: sans-serif;
    font-weight: 900;
    border-radius: 10px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.navigation > ul > li {
    border-right: 2px groove #666;
    display: inline-block; 
    position: relative;
    vertical-align: top;
    margin: 0;
    text-align: left;
    text-shadow: -1px -1px 1px #000;
    width: 10em;
    text-align: center;
}

.navigation > ul > li a {
    display: block;
    padding: 1em;
}

.navigation > ul > li:hover a {
    background: rgba(0, 0, 0, 0.2);
    color: #ccc;
}

.navigation > ul > li:first-child {
    border-left: 2px groove #666;
}

.navigation > ul > li > ul {
    display: none;
    position: absolute;
    margin: 0;
    font-weight: 100;
    border: 1px solid #000;
    background: #333;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
    width: 100%;
    text-shadow: none;
}

.navigation > ul > li > ul > li {    
     border-bottom: 2px groove #333; 
     padding: 0;
     width: inherit;
}

.navigation > ul > li > ul > li a {
     display: block;  
     padding: 1em;
}

.navigation > ul > li > ul > li:last-child {
     border: none;   
}

.navigation > ul > li > ul > li:hover {
     background: #333;   
    
}

.navigation > ul > li:hover > ul, .navigation > ul > li > ul.hovering {
    display: block;
}



This post has been edited by Dormilich: 07 February 2013 - 11:48 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3746
  • View blog
  • Posts: 13,124
  • Joined: 12-December 12

Re: css isnt formatting nav menu

Posted 07 February 2013 - 10:42 AM

I didn't notice when I copied it, but you'll need to put "http:" in front of "//" for the jQuery link.

You shouldn't have anything between those script tags either (" 3").

You haven't closed your nav tag.

And you still have an error in your css:

    border-bottom: 1px solid #000
    background: #000;


Added: It works if you correct everything!

This post has been edited by andrewsw: 07 February 2013 - 10:43 AM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2