|
CSS - Ie6 Drop Down Menu Not Accepting Width
I'm using the suckerfish drop down method to get ie6 to work.
For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px. I have #menu li ul {width:213px} I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page. I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place. This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave. Here's the menu stylesheet: Code: #menu {
width:860px;
height:80px;
position:relative; margin:auto;
border:solid 1px #000; border-bottom:none;
list-style:none;
z-index:6000;
}
#menu ul {
list-style:none;
padding: 0;
margin: 0;
float:left;
}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
margin: 0;
height:80px;
float:left;
list-style:none;
}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
height:38px;
width:215px;
display:block;
padding:12px 0px 0 0px;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
font-variant:small-caps;
background:url(../images/navigation.jpg) no-repeat;
}
#menu li.apply a {
background:url(../images/navigation.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
text-decoration:none;
height:38px;
background:url(../images/navigation-hl.jpg) no-repeat;
font-variant:small-caps;
}
#menu li.apply a:hover {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) no-repeat;
}
body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
}
#menu li ul {
width:213px;
display: none;
z-index:7000;
border:solid 1px #000; border-top:none;
background:#bbbcef;
}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
background-image:none;
color:#333;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
margin:0;
text-align:left;
position:relative; left:-36px;
width:203px;
}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
background:#ffeecd; background-image:none;
color:#000;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
position:relative; left:-36px;
width:203px;
}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul {
display: block;
}
Similar TutorialsHi, I'm very new, so please be gentle. I don't know much about CSS but have been trying to make a drop down menu for my website. I managed to find the basics of what I wanted on a CSS site and know enough to have been able to tweak it (almost) to my requirements. My problem is that the dropdown column widths are set and ideally I'd like them to adjust according to the amount of text which is to be displayed (I hope I'm making sense here), but I don't know how. I tried setting the width to automatic, but all that did was give me a huge column the width of my screen! I've pasted the code and wonder if anyone would be good enough to tell me if it's possible to do what I want and if it is, could you point me in the right direction please? Many thanks, Alison Quote: .preload1 {background: url(three_1.gif);} .preload2 {background: url(three_1a.gif);} #nav {padding:0; margin:0; list-style:none; height:38px; background:#ffffff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} #nav li.top {display:block; float:left; height:38px;} #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;} #nav li:hover a.top_link {color:#6c3600; background: url(three_1.gif) no-repeat;} #nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;} #nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} #nav li:hover ul.sub {left:1px; top:38px; background: #FE9A2E; padding:5px; border:1px solid #fe9a2e; white-space:nowrap; width:145px; height:auto; z-index:300;} #nav li:hover ul.sub li {display:block; height:20px; position:relative; float:left; width:145px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:12px; height:18px; width:145px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #fe9a2e;} #nav li ul.sub li a.fly {background:#FE9A2E url(arrow_over.gif) 135px 6px no-repeat;} #nav li:hover ul.sub li a:hover {background:#F5D0A9; color:#6C3600; border-color:#ffffff;} #nav li:hover ul.sub li a.fly:hover {background:#F5D0A9 url(arrow_over.gif) 135px 6px no-repeat; color:#6C3600;} #nav li b {display:block; font-size:15px; height:18px; width:225px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:145px; top:-4px; background: #fe9a2e; padding:3px; border:1px solid #F5D0A9; white-space:nowrap; width:225px; z-index:400; height:auto;} #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {background:#F5D0A9 url(arrow_over.gif) 130px 6px no-repeat; color:#6c3600; border-color:#fe9a2e;} #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {background:#fe9a2e url(arrow_over.gif) 130px 6px no-repeat; color:#FFFFFF; border-color:#fe9a2e;} Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Problem solved. Howdy, k, the issue i'm having seems to be that IE is ignoring the width I have set for the right menu. It looks fine in everything else. here's the page here's the stylesheet any help'd be greatly appreciated! I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. Hi, I'm having a problem, I'm using the chunk of css code below to make a horizontal menu that I want to run across the 895 px #container that I've created. The menu fits perfectly in IE, but in firefox it overflows the last menu button the next line. How do I get the css menu to be the exact same width in firefox and IE?? Here's the css: Code: #snav ul
{
float:left;
width:100%;
padding:0px;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7.9em;
text-decoration:none;
text-align:center;
color:black;
background-color:#eed9ac;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:#e7bb5b; text-decoration:underline; color:#9b2f1e}
li {display:inline}
Thanks for looking! Hi Is there a way to create a 100% width (liquid layout without table) Horizontal menu using <UL><LI>. I searched Google, but i found only the menus aligned either towards left or middle. Not extending to full width. When i give "width: auto" for LI then all the links get aligned towards the left. Or if i specify some particular width say 12.5% for each Li then when i make it to 800x600 screen its wrapping to second line. Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen. Thanks. I tried to do this CSS drop down menu with 2 methods, but none of them work perfect. The first method is this: PHP Code: #menu1main { /* Top drop down menu styles */ height : 31px; display : block; } #menu1main a { /* Top drop down menu hover styles */ display : block; color : #000000; text-decoration : none; border : none; background-repeat : no-repeat; } .menu1 .menu1list { /* Hide top drop down menu submenu */ display : none; } .menu1, .display { /* Top drop down menu top level styles */ float : left; width : 110px; text-align : center; vertical-align : middle; font-family : Comic Sans MS; font-size : 10pt; line-height : 31px;} /* Top drop down menu submenu hover styles */ a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { background-image : url('image/menu_banner_1.jpg'); background-position : 12px 50% ; } a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { background-image : url('image/menu_banner_2.jpg'); background-position : 12px 50% ; } /* Top drop down menu submenu hover styles */ a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { display : block; text-decoration : none; border : none; color : #000000; text-indent : 16px; text-align : left; font-size : 8pt; line-height : 20px; width : 130px; } a.menu1lv2:hover, a.menu1lv2:active { background-image : url('image/menu_cube_1.gif'); background-position : 0% 100% ; background-repeat : no-repeat; } a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { font-weight : bold; } The HTML for this is: Code:
<div id="menu1main">
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b1lv1" href="">Intro</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Title</a>
<a class="menu1lv2" href="">Part 2 Title</a>
<a class="menu1lv2" href="">Part 3 Title</a>
</div></div>
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b2lv1" href="">Chapter 1</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Long Title</a>
<a class="menu1lv2" href="">Part 2 Long Title</a>
<a class="menu1lv2" href="">Part 3 Long Title</a>
</div></div>
</div>
The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method: PHP Code: ul.top { /* Top drop down menu styles */ display : block; padding : 0; margin : 0; border : none; font-family : Comic Sans MS; font-size : 10pt; text-align : center; vertical-align : middle; } #topnav li.topnav0 { /* Top drop down top level menu styles */ position : relative; float : left; background-image : url('image/menu_banner_1.jpg'); background-position : 50% 0% ; background-repeat : no-repeat; width : 110px; line-height : 31px; } #topnav li.topnav0 a { /* Top level link styles */ color : #000000; text-decoration : none; } li.topnav0 a:hover { /* Top level hover styles */ text-decoration : none; font-weight : bold; } #topnav ul.topnav1 a:hover { /* Drop down hover styles */ text-decoration : none; background-image : url('image/menu_cube_1.gif'); background-position : 0 50% ; background-repeat : no-repeat; } li.topnav0 ul.topnav1 {/* Drop down box style */ display : none; background : #FFFFFF; padding : 0; margin : 0; position : absolute; top : 100%; left : 0; } #topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */ display : block; padding : 0; margin : 0; text-indent : 16px; text-align : left; font-size : 8pt; line-height : 20px; width : 250px; } #topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */ display : block; } And the HTML is as follow: Code:
<div>
<ul class="top" id="topnav">
<li class="topnav0"><div><a href="#">Home</a></div>
</li>
<li class="topnav0"><div><a href="#">Intro</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Title</a></li>
<li><a href="#">Part 2 Title</a></li>
<li><a href="#">Part 3 Title</a></li>
</ul>
</li> <li class="topnav0"><div><a href="#">Chapter 1</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Long Title</a></li>
<li><a href="#">Part 2 Long Title</a></li>
<li><a href="#">Part 3 Long Title</a></li>
</ul>
</li>
</ul>
</div>
The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up. Any help of making either method to work is great appreciated! Thank you very much! I found this code online and I'm trying to alter it slightly for what I need. Code: <html>
<head>
<style type="text/css">
body,html {
padding: 0;
margin: 10;
}
#navcontainer ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #acf;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>
</div>
</body>
It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width? Say I want them all width: 180px; Where do I put that style so that it applies to all the links? [On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?] Thanks Much. j 9 What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss.... Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width. ?????????/ Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . |
|||||||