|
CSS - Do Valid Css Dropdown Menus Exist?
This could be a tough one...
I have trawled the search engines for a solution, but I don't think I'll find one. What I want to know is is it possible to create a dropdown navigation menu without using Javascript? I've seen an example of how it can be done with CSS, but the author said that it will not validate. Thanks in advance Andy Similar TutorialsIn today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript? And also, can pure CSS Drop Down menus be used in Dynamic Websites? Thank you. Hi there, I'm trying to integrate some SEO friendly dropdown menus into an existing website design. The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels). Is there a good reference I can use for positioning my divs properly? Thanks Im trying to make my site into a CSS layout with dropdown menus. The layout was fine untill i implemented the dropdown menu. Now the center window area is broken. 1. Why is this happening and whats the solution? 2. How can I make the navigation bar extend across the full length of my page area? http://www.nevertap.com/float/ Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. So I've been doing dropdown menus my "own" way for a while now, but I know it's not the best way. Basically, if I have a row of main links with dropdowns, I put the hidden DIVs in a final cell at the end of the row, and then use negative positioning to move them back over to the left. This almost always works, because IE, Firefox, and even Safari seem to be on the same page as far as how wide the previous cells to the left get pushed based on the text inside them. So they always line up pretty perfectly underneath where I want them. But I know there's a "better" way, because I have to define to the exact pixel how much I should move the hidden DIVs to the left. CMS's, of course, drop the links underneath automatically. In my previous attempts to do this, by say, putting the hidden DIVs inside the table cells that contained the top most link, the spacing always got funky, especially between browser types. Can someone give me the most dumbed-down, simplest version of a drop down menu that is created using best practices? Here's my version, FYI, that works, but of course requires you to specify how much to move each dropdown DIV to the left: Code:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="about_button" style="height: 35px; padding: 0px 26px 0px 26px; text-align:center; cursor:pointer" onMouseOver="this.style.backgroundImage='url(images/links_back_h.gif)';document.getElementById('about_menu').style.visibility='visible'" onMouseOut="this.style.backgroundImage='';document.getElementById('about_menu').style.visibility='hidden'" onClick="window.location='about.php'"><div style="padding-top: 8px"><a href="history.php" class="links">About Us</a></div></div></td>
<td><div id="news_button" style="height: 35px; padding: 0px 26px 0px 26px; text-align:center; cursor:pointer" onMouseOver="this.style.backgroundImage='url(images/links_back_h.gif)';document.getElementById('news_menu').style.visibility='visible'" onMouseOut="this.style.backgroundImage='';document.getElementById('news_menu').style.visibility='hidden'" onClick="window.location='news.php'"><div style="padding-top: 8px"><a href="news.php" class="links">News</a></div></div></td>
<td>
<nobr>
<div style="position: relative; z-index: 500; font-family: 'Trebuchet MS'; font-size: 13px">
<div style="color: #ffffff; position: absolute; visibility: hidden; z-index: 500; left: -634px; top: 17px; cursor: pointer; cursor: hand; font-family:'Trebuchet MS'; font-size: 12px; font-weight: bold; text-align: left" id="about_menu" onMouseOut="javascript: getElementById('about_menu').style.visibility='hidden'; document.getElementById('about_button').style.backgroundImage=''" onMouseOver="javascript: getElementById('about_menu').style.visibility='visible'; document.getElementById('about_button').style.backgroundImage='url(images/links_back_h.gif)'">
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 9px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='history.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Our History</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='people.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Directors/Delegates</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='sponsorship.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Corporate Sponsorship Program</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='contact.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Contact Us</div>
</div>
</div>
<div style="position: relative; z-index: 500; font-family: 'Trebuchet MS'; font-size: 13px">
<div style="color: #ffffff; position: absolute; visibility: hidden; z-index: 500; left: -524px; top: 17px; cursor: pointer; cursor: hand; font-family:'Trebuchet MS'; font-size: 12px; font-weight: bold; text-align: left" id="news_menu" onMouseOut="javascript: getElementById('news_menu').style.visibility='hidden'; document.getElementById('news_button').style.backgroundImage=''" onMouseOver="javascript: getElementById('news_menu').style.visibility='visible'; document.getElementById('news_button').style.backgroundImage='url(images/links_back_h.gif)'">
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 9px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='whoweare.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Congress</div>
<div style="width: 130px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='whatwedo.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Department of Justice</div>
<div style="width: 130px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='contact.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Federal Employees</div>
</div>
</div>
</nobr>
</td>
</tr>
</table>
I've got a client that wants me to do a website for him. He wants his links to have other links appear on rollover...I'm sure I can use CSS to do this, and if not that then JS, but what is the best way to do this?? Should I use images?? Text with shading behind it??? I'm not new to web design, but I've never needed to this before and am a little at a loss as to how to start out on this one... Hi there. I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, Hi... i need to make a table to wrap my content, but i would like to keep the top and side borders so that the table will only expand downwards if there is to much to hold in the windows.... but regular tables will loose the top border, and thats not to my liking ;( is there a way to fix a div tag or something ? thanks... F/ I seem to recall seeing this trick, but now when I am looking around for examples I can't find any. What I want is a footer div (with the standard footer links, and email address) which will always be docked on the bottom of the viewing area of a browser. So if I scroll up and down the webpage / or resize the browser window, the footer will always appear, visible at the bottom of the window. Any ideas, examples? Ed I have been having a heck of a time with css and ie. My current problems relate to ie for Mac. 1. If I have a div I can't give a % for vertical-align, the table cell that the div is contained in is effected by expanding vertically way beyond acceptable. I removed the % and used a text value and have to deal with the non-alignment. 2. If I have a div float right and text that is align right, the div is shoved way to the right off the screen. I have to scroll to see the div, and the div is the only thing over there. I removed the text align right and the div is in the right spot. * The un-workedaround conundrum ************** 3. I have a TD with padding like this 6px 6px 6px 100px and an img float right, or in the html align="right". The img has a margin or padding on the right of what looks like 100px instead of the 6px. The text in the TD is right and the padding on the left of the img is right. It works fine on all other browsers except ie 5 on Mac. If anyone has an answer, or a workaround, for for this that would be awesome! ****************************** I'm looking for a solution to add rounded corners to several DIVs on my site but all of the solutions I have come across use a ridiculous amount of extra markup. Rounded corners are presentation and should obviously not require any code changes within the XHTML document but does a pure CSS solution exist? What do you guys use? I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code:
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frm"];
}
else {
theform = document.frm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! if there is anyone who knows css really well and is willing to help me figure a few odds and ends up (the css is already made, just 2 problems), i will give you $2 paypal. I know it's not much, but I just need help with 2 problems. my aim is kutekyla if you are interested. Is there a place where one can find valid doctypes? I have been using the one below for a lot of my design: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> And it has recently come to my attention that this is not pointing to a correct .dtd file. When I do something like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> It drastically changes the layout of my page particularily areas where I have specified 100% height. Is there something I'm missing? Where does one find these correct doctypes? I'm using the max-width in IE in my site - specifically I'm using it to set the minimum height of certain elements. Now that it has become a key part of my design, I realized that it generates errors in the W3 validator. Does anyone know a valid way to use the min-height that will work with IE? Are there any? I am using the 'body:nth-of-type' hack at the moment and it is the one error when i validate my css. Any help much appreciated! I triedThis one aswell but again the css won't validate. I know there must be more i haven't tried but i was wondering if someone would be so kind and save me the effort of finding one that validates?? p.s. i am new at this... be kind!! So my page is valid strict xhtml 1.0, and valid css 2, yet it looks so messed up in FF. I can't figure out why. http://www.drowninginmytears.org/index.php It looks perfect in IE, but totally messed up in FF Can anyone help? Thanks. The following script has been validated and is working fine (not in IE/Win): body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } a { text-decoration: none; } a:link { color: #0000ff; } a:visited { color: #33cc00; } t{line-height:36px;} #wrap { width:613px; left:50%; margin-left:-336px; background:#ffffff; margin-left:auto; margin-right:auto; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:650px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size:13px; text-align:left; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:66% 540px; background-image:url(smalljester.jpg); height:750px; overflow:auto; z-index:2; } I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.] Originally, I used <DIV> as containers for background images which swap when you hover over them. I enclosed the <DIV> tags with <A> tags to make them 'links'. Older versions of IE didn't want to work with this though and I found it this is invalid CSS, so I explored some more... The best solution I have found so far is to use <A> itself as a container. This solved the IE5 problems, but now IE4 SP2 doesn't show them at all. I'm okay with leaving IE4 behind, but I discovered that using <A> tags as containers was an invalid technique. If I can't use <A><DIV> and I can't use <A>, then what can I use to make valid, preloaded CSS image rollovers that work? I'm not considering Javascript an option. Is it possible? Here's a random, simliar example of what I've done with the <A> tags. http:// www. findmotive. com /2006/10/31/simple-css-image-rollover/ Hi all I'm working with Firefox and Firebug plugin. I want to check if the CSS I use is valid *the way browsers interpret it*. Example: Code: /* Valid: */
div.my {
position: relative;
z-index: 10;
}
/* Invalid: */
div.my {
z-index: 10; /* The attribute is not applied to the div, because it's not positioned! These sort of errors I want to get to know somehow! */
}
/* Valid: */
div.my {
z-index: 10; /* At this point the CSS isn't valid yet... */
}
div.my {
position: relative; /* Now it is valid (I guess, because I guess the browser first parses all CSS available and only after this it assigns the attributes?) */
}
I hope you see what I mean. I came upon this because I had some problems with z-indexes and then remembered that every z-positioned element needs to be positioned. If I had a cool Firefox plugin that would have checked the CSS every time before it were applied to the document and warned me this wouldn't have been a big problem. ;-) Thanks a lot for help Josh |
|||||||