|
CSS - Problem With Dropdown Menu And Position:absolute...
Similar TutorialsHi everyone Now i hope you all wont get mad at me for this very nooby question i'm about to ask, but i'm pretty new to CSS at the moment, so im not sure what to do... Two questions actually, which i will explain. On my blog at the moment, ive put in a CSS dropdown navigation menu...the problem is that it automatically stays up the top of the page, i want to be able to position it down the bottom of the header... you can have a look at the blog here, which would help if anyone has any ideas...I want to position it just above the thin red line you can see... http://www.rivercitylife.org.au/testing/ another pain i'm having is that the menu is JUST overflowing the boundries of the page width...you can see there is a thin black line on the right hand side up at the header of the page... Sorry if i'm asking lots of questions to start with... Thanks to anyone who has any ideas and can help -Crawf Edit: Please let me know if you need any of the code or you want me to post the stylesheet for the menu.. Hi, I have a table with the following div : div#mod-banner { height:60px; position:absolute; right:180px; top:22px; width:468px; } in IE7 and Opera looks ok but in IE6 it shows it like its left aligned or something. I dont have any knowledge of CSS , can anybody help me? Thanks Hi css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions? This is the x/html: Code: <div id="logo"> <a href="index.html"></a> </div> This is the CSS: Code: #logo {
left: 20px;
top: 0px;
position: absolute;
z-index: 5;
margin: 0pt;
border: 1px solid #315185;
}
#logo a {
background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
display: block;
height: 435px;
width: 140px;
}
#logo a:hover {
background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
display: block;
height: 435px;
width: 140px;
}
Thanks for any tips or references. Hi folks, Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute. I have the following structure - Code: <div>
<div style="position:relative">
<ul style="position:relative">
<li>
<p>
<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>
</p>
</li>
</ul>
</div>
</div>
The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>. Question is: Is what I am attempting going against the grain and something that just isn't going to work? If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable. Any clever ideas? I have an application that includes a login form and it's positioned absolute in the upper right corner. It works great in Safari and Firefox but in IE6 it is not displayed at all. Yet, if I view the source it is there. This is what my css looks like: Code:
#header{
width:780px;
margin-bottom:10px;
background:#e4dbcc;
height:90px;
}
#header .logo{
font-size:2em;
color:#301d0e;
width:400px;
}
#header .logo_subtext{
font-size:1em;
color:#301d0e;
padding-left:80px;
border-bottom:10px solid #e2d2bb;
}
#header .login{
clear:both;
width:380px;
position:absolute;
top:20px;
left:408px;
font-size:70%;
}
Here is the html: Code:
<div id="header">
<div class="logo"> Program </div>
<div class="logo_subtext">company name</div>
<div class="login">
<form action="index.php?action=login" method="post">
login: user <input type="text" name="user_name" size="8"/> password <input type="password" name="password" size="12"/>
<input type="submit" name="Submit" value="submit"/><br />
Don't have an account? <a href="index.php?action=register">Register here</a> Forget password? <a href="index.php?action=password"> click here </a>
</form>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" id="current">ABOUT US</a></li>
<li><a href="index.php?action=program" >PROGRAM</a></li>
<li><a href="index.php?action=contact" >CONTACT</a></li>
<li><a href="index.php?action=register" >REGISTER</a></li>
</ul>
</div>
Thanks in Advance. I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code: Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hiyas, I am a bit of a CSS noob, and I am having some problems so I thought I would post here and see if anyone could help me. I was given some code by a friend the other day to make a drop-down menu that comes down from a jpg-based button. Everything seemed to work, until I tried to make more than 1 menu. Here is my friend's website that uses the code - she can have 3 menus without anything glitching: www.hollyhostile.com The menu is controlled by a javascript file, I have been told this is CSS based but it may indeed be java, so sorry if this is in the wrong place. Her js menu file looks kind of like this: Code: //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.hollyhostile.com/about.html">About Me</a>' menu1[1]='<a href="http://www.hollyhostile.com/faq.html">FAQ</a>' menu1[2]='<a href="http://www.hollyhostile.com/references.html">References</a>' menu1[3]='<a href="http://www.hollyhostile.com/pricing.html">Pricing</a>' //Contents for menu 2, var menu2=new Array() menu2[0]='<a href="http://www.hollyhostile.com/forum">Forum</a>' menu2[1]='<a href="http://www.hollyhostile.com/guestbook/">Guestbook</a>' menu2[2]='<a href="http://www.hollyhostile.com/blog/">Blog</a>' menu2[3]='<a href="http://www.youtube.com/hollyhostile">Tutorials</a>' Then she has this in her index.html file: Code: <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_05.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://www.hollyhostile.com/portfolio.html"><img src="holly_files/purple_06.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_07.jpg" alt="" width="88" height="23"></a></td> However, when I try to use this on my own design, it will only show menu1, and this displays over random buttons, not in a succession. It's very very strange. Here is an example of the kind of thing I want to do: www.gothique-noir.com/asylum Each button apart from "Home" should drop down into a menu, but for some reason it won't let me do different menus. If anyone can help me that would be hugely appreciated Problem solved. I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so. /* setting dealing with selecting particular guest book entries */ Code: #menuSelectGuestEntries
{
position: relative;
margin-top: 10px;
padding-left: 466px;
}
#menuSelectGuestEntries form
{
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.12em;
}
#menuSelectGuestEntries .guestBookPages{
visibility:hidden;
}
#menuSelectGuestEntries .guestBookPages:hover{
visibility:visible;
}
#selectGuestBookEntries {
border: solid 1px grey;
background-color: white;
padding-right; 5px;
width: 70px;
font-size: 13px;
height: 16px;
overflow: auto;
}
#menuSelectGuestEntries ul.guestBookPages {
position: absolute;
color: black;
background-color: white;
font-size: 20px;
top: 1px;
left: 517px;
list-style-type: none;
padding-left:0;
padding-right: 0;
margin-left: 0;
width: 66px;
border: solid 1px grey;
border-top: none;
}
ul.guestBookPages a {
display: block;
text-decoration: none;
width: 70px;
zoom: 1;
}
ul.guestBookPages a:hover {
background-color: #104E8B;
font-weight: bold;
width: 66px;
}
html code
<div id="menuSelectGuestEntries">
<form action="">
Page: <a href=""><</a>
<span name="selectGuestBookEntries" id="selectGuestBookEntries">
1 of 212 <img src="images/dropDownBox.jpg" width="12" height="13"/></span>
<a href="">></a>
<ul class="guestBookPages">
<li><a href="">1 of 212</a></li>
<li><a href="">2 of 212</a></li>
<li><a href="">3 of 212</a></li>
<li><a href="">4 of 212</a></li>
<li><a href="">5 of 212</a></li>
</ul>
</form>
</div>
What I've tried to do is make the form with id Code: #menuSelectGuestEntries relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code: #menuSelectGuestEntries absolutely positioned so when someone hovered over the span with id Code: selectGuestBookEntries which contains the first entry all the entries in list Code: guestBookPages would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code: guestBookPages visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect. Hello, I am working on a website and this website got a dropdown menu and this menu works fine! But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu. The next picture shows the problem: "Test" has to be a submenu from "Wie zijn we?", but it is placed just under it. URL I have used the next HTML-Code: Code: <!-- Navigation item -->
<ul>
<li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
<ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
<li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
<li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
<li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
<li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
<li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
</ul>
And I have used the next CSS-Code: Code: /*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}
/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/
/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/
Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what Hi there, While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container. For instance, if you go here (with FireFox), and then select from the right side menu: Homes for Sale > Fort Collins, CO > Homestead You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing? Here's the code: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
z-index: 900;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Thanks in advance. Hi all- My first post here, and I'm hoping someone here can help me out. I'm beginning to build a client site, and I've got an elusive problem with my multiple-tier CSS dropdown menu not vertically spacing its <li> elements correctly in IE7. The problem doesn't seem to happen in IE6, or Mozilla browsers. This menu began its life as a Project Seven "PopMenu Magic" menu, but I've modified it quite a bit with hand-coding. Other that this small problem in IE7, I'm happy with its look and it's functioning as intended. What's further complicating my troubleshooting is that the problem only happens on second-level pages of my site, but not on the homepage. All of the pages use the same "included" CSS and navigation code (I'm building the site in ExpressionEngine and am embedding the navigation in a manner similar to a PHP include). All CSS and xHTML validates, and I'm at wit's end. Links NOTE: The blocked "URL" in all of these following links is to be replaced with "falmouth academy dot org" . I guess because I'm new the forum thinks i'm a spammer. The vertical dropdown menu listings SHOULD be spaced as seen here URL /index.php The spacing problem reveals itself he URL /index.php/about/introduction The code that should be controlling the vertical spacing is found in this css file: URL /index.php?css=home/stylesheet.v.1212113978 And the specific code segment in that file is: #p7PMnav li ul li a { /* second tier navigation */ color : #ffffff; height : 14px; padding : 4px; } I'm not sure, but it appears that in IE7, only the first item in the list is getting the height and padding attributes applied. The color, however, is applied to all elements as it should. Very puzzling. Hopefully this explanation is clear, but the problem is still as clear as mud. Any help is appreciated - I'm not a CSS guru, and I'm hoping there's something I'm overlooking. Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">
/* background */
body {
background-color: #252525;}
/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}
/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}
/* shrink to fit */
ul.Menu {
float: left;}
/* dropdown button */
ul.Menu {
margin:0px;
list-style:none;
padding:0px;}
/* menu case */
ul.Menu ul {
margin:0px;
list-style:none;
padding:0px;
background-color:#5c5c5c;
border-color:#a3a3a3;
border-width:1px;
border-style:solid;}
/* menu element padding */
ul.Menu li{
margin:5px 5px 5px 5px;}
/* menu element */
ul.Menu a {
display:block;
background-color:#454545;
text-align:left;
padding:4px 9px 5px 9px;
font:normal 11.5px Verdana;
color: #f7f7f7;
text-decoration:none;}
/* menu hover */
ul.Menu li:hover>a{
background-color:#333333;
color: #00ff60;}
</style>
</head>
<body>
<ul class="Menu">
<li><a href="#" target="_top">Select</a>
<ul>
<li><a href="#" target="_top">Option 1</a></li>
<li><a href="#" target="_top">Option 2</a></li>
<li><a href="#" target="_top">Option 3</a></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>
</body>
</html>
Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob I have dropdown menus completly made of UL lists within UL lists. And i control them with css to show and hide them using :hover. Example: div#navDiv li:hover ul {display:block; z-index:11;} well this works completly fine in Mozilla. But i recently encountered a problem in mozilla. Below the dropdown menu's when I put a <div> and when i add the value overflow:auto; it breaks the menu. The menu still works, but when im hovering over the dropdown UL that goes over this <div> with the scrollbar it will disappear right when i get over the <div> below it. But the UL dropdown menu will not disappear if i just remove that one css property "overflow:auto" is there any way to fix this in mozilla? It works fine in IE. The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?" Is the answer "it will be measured from the top left"? I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he http://www.goldenturmeric.com/layout.php The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know. Anyone's help is much appreciated. Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible. Full Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#image {
display: table-cell;
text-align: center;
vertical-align: middle;
width:356px;
height:356px;
border:1px solid blue;
}
#image * {
vertical-align: middle;
}
/*\*//*/
#image {
display: block;
}
#image span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<style type="text/css">
#image img {position:absolute;}
</style>
</head>
<body>
<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>
</body>
</html>
Code that MUST stay in the CSS Code: #image img {position:absolute;}
Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it? |
|||||||