I have a menu that has to be white text on a black background. I've been getting by, setting up psuedo-classes for any links in the content area. I've been looking to find a way to get the css for the menu to lay-off the text in the content area. It's just a pain in the neck when I cut-and-paste, all the links disappear, it's white text on a white background.
I set up a css menu, now I've got li's and ul's that have a black background, and a specific width. Now I can't use li's or ul's in the content area.
The menu's in a div. I'm trying to use a linked style sheet.
Here's my css-
<!-- m --><a class="postlink" href="http://www.bmdca.org/my_css.htm">http://www.bmdca.org/my_css.htm</a><!-- m -->
Sample page-
<!-- m --><a class="postlink" href="http://www.bmdca.org/health/bloat.php">http://www.bmdca.org/health/bloat.php</a><!-- m -->
I'd really appreciate it if someone could help me find a way to limit the css to that one div.
Thank you for your time and attention.
HughIf you want something to only apply to elements within a DIV which has an ID (such as <div id="my_id">), then simply use that ID as a parent designator within your CSS selector for the child element:
#my_id a {
/* only applies to A elements within the #my_id element */
color: white;
background-color: black;
}Thanks Dog -
I tried the id as selector method, but I thought I was still having a problem with li - ul width.
When I tested the id as selector I stuck a link into one of the lines to be sure that that I was getting black text on a white background.
I went back, made some of the lines in my experimental list longer. Display was fine.
Now it looks like I was totally wrong about what was causing my problem.
It looks like the links in the list are the problem. I'm getting a line break before and after any links I put into a list.
<!-- m --><a class="postlink" href="http://www.bmdca.org/health/bloat2.php">http://www.bmdca.org/health/bloat2.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.bmdca.org/my_css2.htm">http://www.bmdca.org/my_css2.htm</a><!-- m -->
More research!
Thanks again,
HughThis line in the CSS...
#nav ul,li,a {display:block; margin:0; padding:0; border:0;}
...is setting all LI and A elements to display as block type elements. I think what you want here is...
#nav ul, #nav li, #nav a {display:block; margin:0; padding:0; border:0;}Thanks Dog,
You sent me in the right direction.
I needed one more line
#navul ul ul, #nav li:hover ul ul ul { display:none; }
Thanks again!
Hugh
I set up a css menu, now I've got li's and ul's that have a black background, and a specific width. Now I can't use li's or ul's in the content area.
The menu's in a div. I'm trying to use a linked style sheet.
Here's my css-
<!-- m --><a class="postlink" href="http://www.bmdca.org/my_css.htm">http://www.bmdca.org/my_css.htm</a><!-- m -->
Sample page-
<!-- m --><a class="postlink" href="http://www.bmdca.org/health/bloat.php">http://www.bmdca.org/health/bloat.php</a><!-- m -->
I'd really appreciate it if someone could help me find a way to limit the css to that one div.
Thank you for your time and attention.
HughIf you want something to only apply to elements within a DIV which has an ID (such as <div id="my_id">), then simply use that ID as a parent designator within your CSS selector for the child element:
#my_id a {
/* only applies to A elements within the #my_id element */
color: white;
background-color: black;
}Thanks Dog -
I tried the id as selector method, but I thought I was still having a problem with li - ul width.
When I tested the id as selector I stuck a link into one of the lines to be sure that that I was getting black text on a white background.
I went back, made some of the lines in my experimental list longer. Display was fine.
Now it looks like I was totally wrong about what was causing my problem.
It looks like the links in the list are the problem. I'm getting a line break before and after any links I put into a list.
<!-- m --><a class="postlink" href="http://www.bmdca.org/health/bloat2.php">http://www.bmdca.org/health/bloat2.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.bmdca.org/my_css2.htm">http://www.bmdca.org/my_css2.htm</a><!-- m -->
More research!
Thanks again,
HughThis line in the CSS...
#nav ul,li,a {display:block; margin:0; padding:0; border:0;}
...is setting all LI and A elements to display as block type elements. I think what you want here is...
#nav ul, #nav li, #nav a {display:block; margin:0; padding:0; border:0;}Thanks Dog,
You sent me in the right direction.
I needed one more line
#navul ul ul, #nav li:hover ul ul ul { display:none; }
Thanks again!
Hugh