CSS - "call" Css Menu

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

Hi, not sure if it is possible but i thought it may be possible in CSS...

I was wondering:

* I have a shopping cart (using JS)
* A CSS based Navigation which is "View Shopping Cart"
* An form button called "Add to cart"

** I want the CSS based Nav, to be hidden, until the user clicks on the form button, then it is visible, so that the user can click on it...

Anyone know how this is done???

Cheers

Jackson

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi all,

My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong.

My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap.

So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process.

One such peice was the nav menu.

As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift.

Please can you take a look at the files and let me know where i'm going wrong?

www [dot] dubtrippin [dot] com/test.html

Cheers, Paul.

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Whiel everything else about the menu works fine, the hidden parts when not in use are over on the far right side of the page, hidden unless you scroll over.

Practically, I would like to eliminate the bottom scroll bar, a) because it doesn't look good and b) because there is no reason for the user to need to see the hidden menu boxes until they are supposed to be displayed

But of course I'm not sure what the problem with the code is::

#menu li:hover ul { left: 265px; z-index: 3; }
#menu { width: 100px; }
#menu, #menu ul { list-style: none; margin: 0; padding: 0; }
#menu a { display: block; border-width: 0; margin: 0; padding: 0; width: 100px; }
#menu li ul { position: absolute; top: 0; left: 100%; width: 100%; z-index: 3; }
#menu li ul:hover { display: none; z-index: 3; }
#menu ul li:hover ul { display: block; z-index: 3; }

the website link:: HOB

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

Please go to www dot boatgofaster dot com

If you move your mouse over the page the menu bar jumps to the left about 10 px. Doesn't matter where you move the mouse, the menu jumps. You might need to refresh the screen a couple times to see it.

Would appreciate any help.

Tom

Heya guys, my first post here

I am making a website with an image dropdown menu, CSS with HTML. The problem is, that it works in Firefox, but in IE the dropdown menu, doesnt align with the parent menu item.

Example: Internet Explorer
[ Parent ] [ dropdown1 ] [ dropdown2 ]
Example: Firefox
[ Parent ]
[ dropdown1 ]
[ dropdown2 ]

css Code:
Original - css Code #nav, #nav ul { padding: 0 0 0 0; margin: 0; list-style: none; } #nav li { float: left; width: 138px; } #nav ul { position:absolute; width: 138px; left: -1000px; } #nav li:hover ul, #nav li.ie_does_hover ul { left: auto; background-position: 0 0; } #nav a { display: block; } ul a{ cursor: default; } ul ul a:link, ul ul a:visited{ cursor: pointer; } ul ul a:hover, ul ul a:active{ cursor: pointer; opacity:.75; filter: alpha(opacity=75); } ul ul li{ background-color:#000000; width:138px; }

  

 #nav, #nav ul {


     padding: 0 0 0 0;


     margin: 0;


     list-style: none;


 }


  


 #nav li {


     float: left;


     width: 138px;


 }


  


 #nav ul {


     position:absolute;


     width: 138px;


     left: -1000px;


 }


  


 #nav li:hover ul, #nav li.ie_does_hover ul {


     left: auto;


     background-position: 0 0;


 }


  


 #nav a {


     display: block;


 }


 ul a{


     cursor: default;


 }


  


 ul ul a:link, ul ul a:visited{


     cursor: pointer;


 }


  


 ul ul a:hover, ul ul a:active{


     cursor: pointer;


     opacity:.75;


     filter: alpha(opacity=75);  


 }


  


 ul ul li{


     background-color:#000000;


     width:138px;


 } 

html Code:
Original - html Code <ul id="nav"> <li><a><img src="media.gif" border="0"></a> <ul> <li><a><img src="fotoalbum.gif" border="0"></a></li> <li><a><img src="filmalbum.gif" border="0"></a></li> </ul> </li> </ul>

  
<ul id="nav">
<li><a><img src="media.gif" border="0"></a>
<ul>
<li><a><img src="fotoalbum.gif" border="0"></a></li>
<li><a><img src="filmalbum.gif" border="0"></a></li>
</ul>
</li>
</ul>

Can u guys help me out?

Thnx in advance!

greets

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it.

Any ideas on how to rectify this?

Code:

<td><input type="text" class="loginbox" size="13" /></td>

.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}