<div id="header"><!--start #header-->
<img id="logo" height="80" src="../resources/CHUG-LOGO.png" />
<ul>
<li id="home"><h2>Home</h2></li>
<li id="about"><h2>About</h2></li>
<li id="store"><h2>Store</h2></li>
<li id="contact"><h2>Contact</h2></li>
</ul>
</div><!--end #header-->
#header ul {
padding: 0px;
list-style-type: none;
margin: 0px;
float: right;
}
#header ul li {
text-align: center;
display: block;
margin: 0px;
float: left;
padding-top: 45px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 65px;
border-left: 1px solid #755b2c;
border-right: 1px solid #b99e68;
}
#header ul li h2 {
min-width: 105px;
margin: 0px;
padding: 0px;
display: inline-block;
color: #000;
font-size: 20px;
font-weight: bold;
}
This is the code I have for my nav bar, and I am trying to remove the right border on the last list item. I know I need to use the psuedo identifier :last-child, but I can't seem to get it to work. Any ideas?
The lis are technically not children of the ul element since they are wrapped by a elements. Move the a to the inside of the li and use the same code again.
#header ul a:last-child li {
border-right: none
}
but don't forget that last:child doesn't work in IE6, IE7 and IE8:
http://quirksmode.org/css/contents.html
Related
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I am facing a problem with CSS menu. I want the parent li not to be disturbed by the sub menu. I want the parent list to have widths equal to the text contents they have itself but not the inner ul. I don't want to give the parent list specific width. Here is the image.
CSS
ul {
list-style: none;
}
.nav{
padding-left: 70px;
line-height: 60px;
overflow: hidden;
}
.nav > li{
float: left;
font-size: 20px;
margin-right: 18px;
cursor: pointer;
background: yellow;
}
.subm{
overflow: hidden;
width: 200px;
list-style: none;
line-height: normal;
outline: 1px solid black;
padding: 0;
background: #252525;
padding: 0 10px 10px 10px;
}
.subm > li{
color: #ffde00;
margin: 0;
margin-top: 4px;
padding-left: 6px;
font-family: decker;
}
HTML
<ul class="nav">
<li>Home</li>
<li>Languages
<ul class="subm">
<li>C</li>
<li>C++</li>
<li>java</li>
<li>c#</li>
</ul>
</li>
<li>About</li>
</ul>
Add position:absolute to .subm
Fiddle: http://jsfiddle.net/eryo2kjg/
I checked in your jsfiddle #Hanzallah Afgan. Try this
Remove overflow:hidden css property for .nav, then the sub menu will display
I seem to be having trouble getting my navigation bar to span the width of the page and to locate itself underneath the header I've added. Could someone please help me?
<body>
<div id= "header">
FOOD
</div>
<div id= "navbar">
<ul>
<li>Home </li>
<li>Favs </li>
<li>Cusine
<ul>
<li>Asian </li>
<li>Europe </li>
</ul>
</li>
<li>Recipes </li>
<li>FAQ </li>
<li>Contact Us </li>
</ul>
</div>
</body>
This is the css I've used. I kept adding widths but it just seems to have different widths.
#navbar
{
clear: both;
float: left;
margin: 0px;
padding: 0px;
width: 100%;
font-family: sans-serif;
z-index: 1000;
position: relative;
top: 100px;
}
#navbar ul
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
position: relative;
right: 50%;
}
#navbar ul li
{
float: left;
position: relative;
left: 50%;
}
#navbar ul li a
{
display: block;
margin: 0px;
text-decoration: none;
background-color: #735D41;
color: white;
font-weight: bold;
text-align: center;
border: 1px solid;
width: 100%;
}
#navbar ul li ul li a
{
background-color: #735D41;
color: white;
}
#navbar ul ul
{
display: none;
position: relative;
left: 0px;
right: auto;
}
#navbar ul ul li
{
left: auto;
margin: 0px;
clear: left;
width: 100%;
}
A good option would be to remove most of your floats and relative positioning and instead use display:table on the ul and display:table-cell on the lis. This will enable you to stretch the nav across the screen. Try it with this:
#navbar ul {
list-style: none;
padding: 0px;
margin: 0px;
width:100%;
display:table;
}
#navbar ul li {
display:table-cell;
}
See an Example here
In this example I used your code but changed and removed a few things. It should be sufficient enough to give you a good idea of what to do.
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;
}
I have this issue, I can't for the life of me try and remove the whitespace in this (li) tag, below I've include a screen capture, what I'm trying to do is remove the white before the grey menu bar, as well make the whole menu bar line up to bottom grey bar.
CSS
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
float: left;
margin: 0 0.5em 0 0.5em;
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0;
}
HTML
<div class="menu">
<div>
<ul id="MenuGreyBar">
<li style="left: 0px;">
</li>
</ul>
</div>
<ul>
<li>
About Us
</li>
<li >
Help & Support
</li>
<li >
Law & Information
</li>
<!-- ... There are a few more. -->
</ul>
</div>
The image: (it didn't let me embed)
http://db.tt/tcSr5kGv
I'm not positive if this is your issue, but here's my guess:
.menu li {
float: left;
margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
which will cause them to jut over. We want this for
most elements*/
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0; /*The first menu item is special and needs no margin, so we try
to clear it, however we are clearing the anchor element in the li
block, and the margin is applied on the li block itself, so the li
block's margin is rendered before the anchor has any say*/
}
So what we need to do is clear the margin property on the actual li element, this code will do it:
#MenuGreyBar li{
margin: 0;
}
That should do it, my best guess.