|
CSS - First Li Element Not Accepting Style Change
I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help:
Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . Similar TutorialsI have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hi all! Hope you are well! Anyway, I have the following in my style sheet.... should this work? PHP Code: td { text-align: centre; } or not? can I apply more than one style to an element? Or do they overwrite each other? thanks Is there a way to style an element's parent with css? I know something like .div1 p { stuff here } takes care of p's that are inside div1 but is there a way to style say any div1 with a div2 inside? Or a ul with a ul inside? Hopefully that is a descriptive enough title. Basically what I'm looking for is a straight-forward guide to which styles will apply to an element type - by html element. For example, suppose I have this brain-dead simple table: <table id="first-table" class="page-table"> ... </table> Is there a simple guide that shows which style elements apply to that table? Something along the lines of the Bare Bones Guide to HTML . The problem I have is that everything I can find is backwards to my needs. They typically list a style element, and then list the html elements which the style will apply to. So for my dumb example above, I'd have to wade through a bunch of interesting looking style elements trying to see whether I can use it to affect that table. TIA On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help Hi guys... Would u mind to see this site I'm working ... http://diario.coldfusion-vpm.com It is being done in Mambo (www.mamboserver.com) And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange CSS file: http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css thanks a lot in advance i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html. Thanks for any assisstance eg: Order By (DESC) to become Order By ( DESC ) Hey all, I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element. I have a DL with one DT & and one DD. I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'. The code: Code:
<dl>
<dt>
<p>Text</p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>
Any help with this would be much appreciated. Cheers in advance. Hi all, I am having a bear of a time trying to modify the size of a checkbox element in a form under IE Windows. For all other browsers on the Mac and Windows I use the following style sheet settings: PHP Code: input[type=checkbox] { font-size: 9px; margin: 0px 0px 0px 0px;} I have also tried coding a "style" attribute directly on the <input type=checkbox"...> element in my HTML code but to no avail! Does anyone know how the heck to do this? i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? I have a header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty I know how to do this using Javascript, but I'm not sure if it can be done using CSS itself. I have a bunch if div tags and some anchor tags on my page. By default, the div tags are hidden, and when I mouseover an anchor, I would like a specific div to be displayed. Again, I can do this in Javascript, but would like to see if there is a CSS-only approach to this. Example HTML: Code: <div id="div1">Option1</div> <div id="div2">Option 2</div> <div id="div3">Option 3</div> <a id="link1" href="somepage.html"></a> <a id="link2" href="someotherpage.html"></a> <a id="link3" href="someotherpageentirely.html"></a> Example CSS: Code:
div#div1 div#div2 div#div3 {
display:none;
width:50px;
height:50px;
background-image: url(divimage.png);
}
a#link1 a#link2 a#link3 {
display:block;
width:100px;
height:100px;
background-image: url(myimage.png);
}
a#link1:hover a#link2:hover a#link3:hover
{
display:block;
width:120px;
height:120px;
background-image: url(myotherimage.png);
}
So in this instance, when one of the anchor tags is hovered over, I would like to change the associated (link1 -> div1, link2 -> div2, link3 -> div3) div CSS to change to be something like this: Code:
div#div1
{
display:block;
}
I realize I've generalized these CSS definitions and on my actual page I have individual CSS definitions for each anchor and div separately as they all differ slightly. Is there a way to do this using straight CSS or am I bound to Javascript in order to do this? Thanks! - skubik I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF I'm using the suckerfish drop down method to get ie6 to work. For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px. I have #menu li ul {width:213px} I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page. I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place. This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave. Here's the menu stylesheet: Code: #menu {
width:860px;
height:80px;
position:relative; margin:auto;
border:solid 1px #000; border-bottom:none;
list-style:none;
z-index:6000;
}
#menu ul {
list-style:none;
padding: 0;
margin: 0;
float:left;
}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
margin: 0;
height:80px;
float:left;
list-style:none;
}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
height:38px;
width:215px;
display:block;
padding:12px 0px 0 0px;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
font-variant:small-caps;
background:url(../images/navigation.jpg) no-repeat;
}
#menu li.apply a {
background:url(../images/navigation.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
text-decoration:none;
height:38px;
background:url(../images/navigation-hl.jpg) no-repeat;
font-variant:small-caps;
}
#menu li.apply a:hover {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) no-repeat;
}
body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
}
#menu li ul {
width:213px;
display: none;
z-index:7000;
border:solid 1px #000; border-top:none;
background:#bbbcef;
}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
background-image:none;
color:#333;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
margin:0;
text-align:left;
position:relative; left:-36px;
width:203px;
}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
background:#ffeecd; background-image:none;
color:#000;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
position:relative; left:-36px;
width:203px;
}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul {
display: block;
}
Hey All!!! K to everyone that has looked at my other thread, this is a totally different site with a totally different problem. Stupid problem though. tri-m.com/test/eng/ The site looks perfect in FF and IE7 but in IE6 you will see the problem. The divs with height:1px are displaying as divs with a height of 18px in IE6. URGG IE6 should be banned!!!! - Jacenta Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim |
|||||||