|
CSS - Css Dropdown Menu Styling Problem
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 Similar Tutorialsit's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }
#sddm ul li a {
in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'>
Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'>
Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
echo "
</div>
</li>
<li>
<a href='".get_users_link()."'>
Members</a>
</li>
<li>
<a href='".get_news_link()."'>
News</a>
</li>
<li>
<a href='".get_submit_link()."'>
Submit</a>
</li>
<li>
<a href='".get_links_link()."'>
Links</a>
</li>
<li>
<a href='".get_rules_link()."'>
Rules</a>
</li>
<li>
<a href='".get_faq_link()."'>
FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'>
Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
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. 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. 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, 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 I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can. I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list. FIRST MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
<ul>
<li><a href="page1.1.html">Link 1.1</a></li>
<li><a href="page1.2.html">Link 1.2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Link 2</a>
<ul>
<li><a href="page2.1.html">Link 2.1</a></li>
</ul>
</li>
</ul>
SECOND MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
</li>
<li>
<a href="page2.html">Link 2</a>
</li>
</ul>
My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu. This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS. The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do. Does anyone out there have an idea of where I can start with this? Hi there, I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options. The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy. **EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected" I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? Hello all, I am trying to style links on my page and cannot figure out how to do so. I am using a JQuery Framework and perhaps somehow that is messing me up. attached are the two Jquery javascript files. I want to make the links blue, please tell me how to do that. Thank you. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Tabs $('#tabs').tabs(); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} .SearchOptions a {color:#990066} </style> </head> <body> <!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">Buy Books</a></li> <li><a href="#tabs-2">Sell Books</a></li> </ul> <div id="tabs-1"> <form> <table> <tr> <td>Item 1 <input type="text" name="Item1" /></td> <td>Item 2 <input type="text" name="Item2" /></td> <td>Item 3 <input type="text" name="Item3" /></td> <td>Item 4 <input type="text" name="Item4" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> <tr> <td>Item 5 <input type="text" name="Item5" /></td> <td>Item 6 <input type="text" name="Item6" /></td> <td>Item 7 <input type="text" name="Item7" /></td> <td>Item 8 <input type="text" name="Item8" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> </table> </form> </div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> </div> <a href="" class="SearchOptions"> dadadada</a> </body> </html>
I'm using dreamweaver to work on a basic example that I seem to have working fine. However I've uploaded it onto the server and it's coming out as if there was no styleing at all applied inclucing colour. I've showed an example of both the site and code if anyone can help. I should have a load of colums and rows, like tables, wit text in them but all I seem to see is just words laid out with no styling attacted to them......God I've forgotten how awkward code can be at times. Below is the link. http://ballyviewbuilders.com/Centering.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.wrapper
{
width: 750px;
margin: 0 auto;
text-align: left;
}
div.1a
{
float:left;
width:190px;
background: FFFF00;
color:000000;
padding: 10px;
}
div.1b
{
float:left;
width:190px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1c
{
clear:both;
background: EEEE00;
width:400px;
padding: 10px;
}
div.1d
{
float:left;
width:80px;
height:40px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1e
{
float:left;
width:10px;
background: DDDDDD;
color:000000;
padding: 10px;
}
</style>
</head>
<body>
<div class= "wrapper">
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a </div>
<div class ="1a">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1d">gfgdfg</div>
<div class ="1d">gfgdfg</div>
<div class ="1e">g</div>
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
</div>
</body>
</html>
I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. Hi can any one suggest a solution to my problem. I have all my a tags as - a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px} and my img tag as img {border-bottom: none} However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out. So I tried a more deeper selector. #rightside img/#rightside a img/#rightside img a/ They didn't work. So in frustration I added a class to the 4 images a tag and then tried .info/.info img/.info a img/.info img a/ Still no joy. I then moved the class to the img tag in desperation and tried - .info/img .info Still no joy. I tried all these with the below css - {border-bottom: none} {border-bottom: thin #FFF solid} {border-bottom: 0px} {border-bottom: transparent} {border: none} {border: thin #FFF solid} {border: 0px} {border: transparent} I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border. It's not a selector on the same tag as there is no border on the tag. I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas? The code looks similar to this - <div id="new-image"> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> </div> the css is - #new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px} .info {border-bottom: none} The a tag css is above this in the css code. Cheers in advance Jazajay Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML. |
|||||||