the space is display between page margin and nevigation bar, So how to delete this space
css code
#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#topnav li
{
float:left;
display:inline;
}
#topnav a:link,
#topnav a:visited
{
display:inline-block;
width:110px;
font-weight:bold;
font-family:calibri;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:3px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,
#topnav a:active
{
background-color:#7A991A;
}
html code
<ul id="topnav">
<li id="topnav">Home</li>
<li id="topnav">OPD</li>
<li id="topnav">IPD</li>
<li id="topnav">Infrastucture</li>
<li id="topnav">Gallery</li>
<li id="topnav">Media</li>
<li id="topnav">Site Map</li>
<li id="topnav">About</li>
<li id="topnav">Nursing</li>
</ul>
You need to specifically set margin and padding to 0 on the "body" element.
just try this in your css:
body { margin: 0; padding: 0; }
Try to add
#topnav { font-size: 0; }
#topnav li { font-size: 12px; } /* or your font size that needed there */
Related
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
I have a left hand navigation that I am trying to code with CSS.
At the moment the sub-categories (level 1) are showing as the 'active' color when the main one is selected (from level 0). When you click on a sub-category (level 1) it is then following the same css rules as the main category (level 0) but not until clicked.
What I want, is the subcategories (level 1) to show with a white background when the main category is selected (level 0) (opening the subcategories). Then, when an item is chosen within the subcategory (level 1) it follows a different rules (font to be in a different color for example).
Sorry, it's a little confusing to try to explain! Here is my CSS.. any help would be greatly appreciated! I just can't get my head around this one. The site is created using Magento, so I can't alter the html easily.
.vertnav-container {
margin-top:10px;
}
#vertnav li .vertnav-cat {
display:block;
width:210px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 12px;
}
#vertnav li a {
}
#vertnav .inactive .vertnav-cat {
background-image: url(../images/inactive_bgd.jpg);
background-repeat: repeat-x;
}
#vertnav .next .vertnav-cat {
background-color:#b7de70;
}
#vertnav .prev .vertnav-cat {
background-color:#b7de70;
}
#vertnav li.parent .vertnav-cat {
background-color:#FFFFFF;
font-weight:bold;
}
#vertnav li.active .vertnav-cat {
background-color:#f59942;
background-image: url(../images/active_bgd.jpg);
font-weight:bold;
}
#vertnav li.inactive .vertnav-cat {
font-weight:normal;
}
#vertnav .level0 .vertnav-cat {
}
#vertnav .level1 .vertnav-cat {
padding-left:20px;
width:183px;
height: 5px;
border-bottom:1px dotted gray;
}
#vertnav .level2 .vertnav-cat {
padding-left:20px;
width:172px;
}
#vertnav .level3 .vertnav-cat {
padding-left:30px;
width:162px;
}
UPDATE:
I think this is the html, but am not sure how I edit it as it's through Magento, will need to look this end if you think that's what needs to be done...
<div class="col-left sidebar"><div class="vertnav-container">
<div class="">
<h4 class="no-display">Category Navigation:</h4>
<ul id="vertnav">
<li class="first prev level0-inactive has-children level0 inactive fruit">
<span class="vertnav-cat"><span>Fruit</span> </span>
</li>
<li class="level0-active level0 active vegetables">
<span class="vertnav-cat"> <span>Vegetables</span></span>
</li>
<li class="next level0-inactive level0 inactive meat">
<span class="vertnav-cat"><span>Meat</span> </span>
</li>
<li class="level0-inactive level0 inactive dairy">
<span class="vertnav-cat"><span>Dairy</span></span>
</li>
<li class="last level0-inactive level0 inactive for-the-pantry">
<span class="vertnav-cat"><span>For the Pantry</span></span>
</li>
</ul>
</div>
</div>
Well, you haven't responded. Here is the most simplistic method I could come up to easily target different elements. The best I could do without seeing your HTML, but it should provide some guidance into how to structure your layout.
Few things. I'd use lists instead of a ton of classes, as your CSS would indicate you're doing.
Also, using a:focus psuedo class is an easy way to target the actively clicked link without using a bunch of additional classes and whatnot.
JS Fiddle: http://jsfiddle.net/SinisterSystems/v4n7G/3/
HTML:
<ul id="leftNav">
<li>Head One
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Head Two
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
CSS:
a, a:visited, a:hover, a:active {
color:#AAA;
}
ul#leftNav {
width:200px;
}
ul#leftNav li {
list-style:none;
color:#666;
}
ul#leftNav a:focus {
color:green;
}
ul#leftNav ul a{
color:red;
}
ul#leftNav ul a:focus {
color:blue;
}
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
Working Fiddle
(Hopefully) quick question:
I have an unordered list set to display:table and li set to display:table cell, as I want the list to take up entire width of container div regardless of how many list items there are. The problem is I want a nested drop-down list to have a block display, so the items are under each other. I've done the drop-down before by setting parent list to Block, floating left, then setting the nested list to float:none.
I've tried a few things to set the nested list from table to block, but it's not doing it for me!
And I missing something simple, or is this going to work the way I want?
Here's the HTML
<div id = "headernavcontainer">
<div id = "headernav">
<ul id = "mainnav">
<li><a class = "mainnav" href="index.html">Home</a></li>
<li><a class = "mainnav" href="#">Company</a>
<ul>
<li><a class = "subnav" href="index.html">About Us</a></li>
<li><a class = "subnav" href="#">Location</a></li>
<li><a class = "subnav" href="#">Services</a></li>
</ul>
</li>
<li><a class = "mainnav" href="#">Employment</a></li>
<li><a class = "mainnav" href="#">Gallery</a></li>
<li><a class = "mainnav" href="#">Contact Us</a></li>
</ul>
</div>
</div>
And here's the CSS:
#headernavcontainer
{
width:100%;
height:50px;
background-color:gray;
margin:0;
padding:0;
}
#headernav
{
position:relative;
margin:0 auto;
padding:0;
width:960px;
background-color:gray;
}
#mainnav
{
list-style:none;
//float:left;
width:100%;
position:relative;
margin:0 auto;
padding:0;
display:table;
font-family:Century Gothic, sans-serif;
font-weight:bold;
font-size: .8em;
}
#mainnav li
{
//float:left;
margin:0;
padding:0;
position:relative;
line-height:50px;
margin-right:0;
display:table-cell;
border-right:1px #000 solid;
}
#mainnav li:nth-child(10)
{
border-right:none;
}
#mainnav a.mainnav
{
display:block;
color:#000;
background:#333;
text-decoration:none;
text-align:center;
//vertical-align:middle;
}
#mainnav a:hover
{
color:#fff;
background:red;
}
#mainnav ul
{
display:block !important;
//overflow:hidden;
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
//vertical-align:middle;
background:green;
}
#mainanv ul li
{
//float:none;
//display:block;
display:block !important;
}
#mainnav li:hover ul
{
left:0;
//display:block;
}
And here's a jfiddle to help illustrate what I'm up to! http://jsfiddle.net/cEw5k/
Thanks.
Jsfiddle: http://jsfiddle.net/cEw5k/1/
CSS:
#mainnav li:hover ul
{
left:0;
width:100%;
display:block;
padding-left:0;
}
#mainnav li ul li {
display:block;
}
#mainnav li ul li a {
display:block;
width:95%;
padding-left:10px;
}
I trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/
it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/
Stumped...my menu shows up about 25% of the time in IE7. It appears to be a stacking issue: I can see the menu at first but once the header image and the rest of the page loads, it disappears. I've tried setting the z-index in both the menu and its parent elements, but nothing's working...
Here's the site: http://www.hospiceofmissoula.com
html {
height:100%;
}
body, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
}
body {
behavior:url("csshover3.htc");
font-size:14px;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#bacddb;
height:100%;
}
h1 {
font-size:18px;
color:#752eca;
text-decoration:none;
}
h2 {
font-size:14px;
color:#909090;
text-decoration:none!important;
}
h3 {
color:#4d2288;
font-size:18px;
}
p {
text-indent:20px;
color:#000;
}
p a {
color:#000;
text-decoration:underline;
}
p.foot {
text-indent:0px;
}
p.link {
font-size:18px;
color:#30F;
text-decoration:underline!important;
}
a {
color:#4d2288;
text-decoration:none;
outline:none;
}
a:visited {
color:#4d2288;
}
p a:hover {
text-decoration:underline!important;
}
label {
text-align:left;
}
ul#nav {
padding:5px;
margin:0px auto;
width:100%;
z-index:999;
}
ul#nav li a {
display:block;
font-weight:bold;
padding:2px 10px;
background:#bacddb;
}
ul#nav li a:hover {
background:#d9c3f2;
color:#4d2288;
}
li {
list-style:none;
float:left;
position:relative;
width:225px;
text-align:center;
margin:0px auto;
margin-right:4px;
border:1px solid #4d2288;
}
li ul {
display:none;
position:relative;
width:auto;
top:0;
left:0;
margin-left:-1px;
}
li>ul {
top:auto;
left:auto;
border:none;
}
li:hover ul {
display:block;
}
ul#nav li.current a {
background:#bb96e4;
}
ul#nav li.current a:hover {
background:#d9c3f2;
}
<div id="maincontent">
<div id="header">
<div id="lyr_ddmenu">
<ul id="nav">
<li class="current">Hospice of Missoula
<ul class="sub">
<li>Charity Care</li>
<li>History</li>
<li>Mission Statement</li>
<li>Services</li>
<li>Staff</li>
</ul></li>
<li>What is Hospice?
<ul class="sub">
<li>Frequently Asked Questions</li>
<li>End-of-Life Information</li>
<li>Advanced Directives</li>
<li>Helpful Links</li>
</ul></li>
<li>Volunteering</li>
<li>Contact Us
<ul class="sub">
<li>Upcoming Events</li>
<li>Employment</li>
</ul></li>
</ul>
</div>
#header {
padding-top: 160px !important;
}
#lyr_ddmenu {
margin: 0 auto !important;
position: relative !important;
left: auto !important;
top: auto !important;
}
.colmask {
margin-top: 20px !important;
}
A lot of problems in your code... a lot, the more important ones being: don't abuse XHTML, don't use so much JS (particularly for simple things like rounded corners), and — the most immediately relevant to your problem — be careful using position: absolute;.