|
CSS - Getting Css Dropdown Menus From Net (best Place?)
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.. 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/ 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... 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>
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 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, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" />
<style type="text/css">
.hiddenPic {display:none;}
</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script>
<script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript>
</HEAD>
<BODY>
<div id="container">
<div id="nav">
<img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="banner">
</div>
<div id="content">
<div id="new">
<table id="klok">
<td id="kloktd">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2">
</td></table>
<p id="new1">Dit is een testlijntje</p>
<p id="new2">lolololol</p>
<p id="new2">what happens if this line is a little bit too long for the box?</p>
<p id="new3">fredje pietje ludo</p>
</div>
<div id="inhoud">
<iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
</div>
</div>
<img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic">
<img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic">
</BODY>
</HTML>
Code: css (will make this shorter later)
html {
margin:0;
padding:0;
height: 100%;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
body {
background-color: #f2f3ed;
margin: 0px;
padding: 0px;
height: 100%;
z-index:0;
position:relative;
text-align: center;
}
#container {
position:relative;
height:auto !important;
min-height:100%;
width: 760px;
margin:0 auto;
}
#nav {
width:100%;
height:160px;
background: url(../images/Nav.png) no-repeat;
}
#banner {
width:100%;
height:101px;
background: url(../images/Banner.png) no-repeat;
}
#content {
width:100%;
height:500px;
background:transparent;
}
#new {
background: #e6e8dc url(../images/New.png) no-repeat;
width:220px;
height:500px;
float:left;
text-align: left;
}
#inhoudhome {
background: #e6e8dc url(../images/InhoudHome.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudlog {
background: #e6e8dc url(../images/InhoudLog.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudprof {
background: #e6e8dc url(../images/InhoudProf.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#footer {
background: url(../images/Footer.png) no-repeat;
height:50px;
width:100%;
position:relative;
}
p#inhoud1 {
margin:35px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud2 {
margin:0px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud3 {
margin:0px 5px 10px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new1 {
margin:35px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new2 {
margin:0px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new3 {
margin:0px 5px 10px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
table.tabellog {
border-collapse: collapse;
margin:37px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof1 {
border-collapse: collapse;
margin:37px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof2 {
border-collapse: collapse;
margin:5px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof3 {
border-collapse: collapse;
margin:5px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
td {
padding:5px;
border-width: 1px;
border-style: solid;
}
td.datlog {
text-align:center;
font-weight:bold;
width:90px;
}
td.omschlog {
font-weight:bold;
}
td.tijdlog2, td.datlog2 {
text-align:center;
}
td.tijdlog {
text-align:center;
width:100px;
font-weight:bold;
}
td.kol1 {
font-weight:bold;
width:125px;
}
td.kol1foto {
width:100px;
height:125px;
}
table {
border-color:#000;
}
table#klok {
margin:64px 5px 0px 57px;
border-width:0px;
}
td#kloktd {
height:45px;
border-width:0px;
}
Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Hi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Hi, I have a problem with creating a CSS banner div. I can't seem to get the .centeredbox to the absolute top of the page, while keeping it centered with auto margin: Code: <html>
<head>
<title>Untitled Document</title>
<style>
.wrapperbox {text-align: center; }
.centeredbox {width: 682px; margin: 0 auto 0 auto; text-align:left; background-color: #000000;BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 11px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;}
</style>
<div class="wrapperbox"></div>
<div class="centeredbox"></div>
</head>
<body>
</body>
</html>
With this code it keeps a little space between the div and the top of the page. I don't want that space . Does anyone have a solution? Hey everyone, i'm having a bit of trouble with a page i'm making, it seems no matter what i do this one div one left align some text in it. It seems to center everything and i cant stop it from doing it, also the div's inside wont all be on the same line as in one after the other it's the Latest Blog section. hxxp://24.141.168.102:8080/ar/?page=blog That's my personal web server i use so if someone could have a look at this and get back to me i'd really appreciate it. Hello. This is the first time I've tried a complete CSS layout, and I just have one bothersome problem. I have everything inside a #container div. I have a min-height set for the container, since in Firefox if I don't have that it just wraps the border around the background image. No matter where I put the footer div, it hangs over the min-height border. However, if I put footer inside another tag called content ( #content #footer { ) it does stay in. But I don't even have a content div in the css! I'm so confused. *lol* Furthermore, by using Float for the navigation div instead of absolute positioning, it shows up with several pixels difference between IE and Firefox. If anyone could help me with this, I would be much obliged. The page is he http://frenziedsilence.com/nygiml/index.php And the CSS: http://frenziedsilence.dom/nygiml/nygiml.css thanks in advance.. -kathryn Hello, I have made playersnutrition.com As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top???? does anyone know how i can place my menu on the right spot. this is the website Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it? I would like to have a header on my page with my logo in the top left corner, and a cloud image going the rest of the way across the top. I set up the cloud image as a background, but wanted the logo to be clickable so it is set up in the html as an image. The problem is that I want the image to be fixed in the corner so that when the visitor scrolls, it stays at the top. It looks good in Firefox and in Chrome, but in IE it is a few pixels offset from the corner and I have no idea how to fix it. See what I mean he felixairservices.com Here is my css for the logo: Code: body
{
background:#6699BB url('sky.jpg') no-repeat top right fixed;
background-size: 90% 228px contain;
}
img.logo
{
position:fixed;
top:0px;
left:0px;
margin:0;
padding:0;
border-style:none;
}
And here is the html I am using to display it: Code: <a class="logo" href="index.html" border="0"><img class="logo" src="Logo.jpg" valign="top" align="left" border="0"></a><br> Any help would be appreciated. I'm just a simple AC contractor trying to build a decent web page for my business. Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this: i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch.... any help what so ever would be much appreciated thanks in advance N3cr0 Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. |
|||||||