CSS - Css Menu With Styling For Current Page

it'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 {


             padding-top: 0;


             padding-bottom: 0;


             margin-top:0;


             margin-bottom:0;


         } 

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 */


  


 #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;


             } 

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;
    }

I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.

I'm including my html and css below and would appreciate any help.

Thanks, Keith Silva

CSS:

textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
button{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
/*table{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}*/
caption{
font-size: 1.5em;
}
.add{
font-size: 0.6em;
text-align: right;
}
.frm_tbl{
border-spacing: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: Navy;
}
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/*#navlist li:target*/

#mail_frm #mail_nav a,
#loc_frm #loc_nav a,
#other_frm #other_nav a{
background: white;
border-bottom: 1px solid white;
}
#mail_frm{display: none}
#mail_frm:target{display: block}

#loc_frm{display: none}
#loc_frm:target{display: block}

#other_frm{display: none}
#other_frm:target{display: block}

HTML:

//
#include settings
#cgivar id
#cgitextvar notes
#cgitextvar directions
#if @id != ""
//edit existing record
#sql load select * from tbl_org where org_id = @id
#else
//new record
#sqlblankrow tbl_org
#endif
<form method="POST" target="_self" name="org_form">
#formtarget org_save
<div id="navcontainer">
<ul id="navlist">
<li id="mail_nav"><a href="#mail_frm">Mail</a></li>
<li id="loc_nav"><a href="#loc_frm">Location</a></li>
<li id="other_nav"><a href="#other_frm">Other</a></li>
</ul>
</div>
<table id="mail_frm" class="frm_tbl" border="0">
<tr>
<td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td>
<td>Type<br><select name="type" size="1" class="">
#optionlist selected=@type
#options
muni Municipality
state State
discharger Discharger
consultant Consultant
law_firm Law Firm
dischgr_assoc Discharger Assoc
elected Elected Official
lab Laboratory
public Public
academia Academia
tribe Tribe
other Other
</select></td>
</tr>
<tr>
<td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td>
<td>Region<br><select name="region" size="1" class="">
#optionlist selected=@region
#options
none None
north AZ-North
central AZ-Central
south AZ-South
rb1 CA-North Coast(1)
rb2 CA-San Francisco Bay(2)
rb3 CA-Central Coast(3)
rb4 CA-Los Angeles(4)
rb5r CA-Central Valley North(5r)
rb5s CA-Central Valley(5s)
rb5f CA-Central Valley South(5f)
rb6 CA-Lahontan(6)
rb7 CA-Palm Desert(7)
rb8 CA-Santa Ana(8)
rb9 CA-San Diego(9)
</select></td>
</tr>
<tr>
<td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td>
<td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td>
</tr>
<tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr>
<tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr>
<tr>
<td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td>
<td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td>
<td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td>
</tr>
</table>
<table id="loc_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr>
<tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr>
<tr>
<td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td>
<td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td>
</tr>
<tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60">
#showtext ./directions/org_@org_id
#+ </textarea></td>
</tr>
</table>
<table id="other_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr>
<tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr>
<tr>
<td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td>
<td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td>
</tr>
<tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr>
<tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50">
#showtext ./notes/org_@org_id
#+ </textarea></td>
<td><input name="selected" type="checkbox" value="y" title="">Select<br><br>
<input name="archive" type="checkbox" value="y" title="">Archive</td>
</tr>
</table><br>
org_id&nbsp;<input name="org_id" type="text" size="8" value="@org_id" title="">
<button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button>
<button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button>
</form>

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have:

Code:

<html>
<body>
<div>**MENU**</div>
<div><iframe id="contentFrame" src="home.htm"></iframe></div>
</body>
</html>

Clicking a menu item, say "Contact Us", changes the src of the iFrame using:

Code:

<a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>

The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering.

What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame.

Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content.

I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do?

Thanks for any guidance you all could offer.

This is what i am using as my page, and i only want to highlight the top part i.e only test and not the lowers. when i include the current page highlight class to the menu the whole section is highlighted, is there a way to highlight just the li and not the ul under the li that are contained within the same class.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Test</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <style type="text/css" media="screen"> /* horizontal menu coding */ #nav { float: left; margin: 0 0 1em 0; padding: 0; list-style: none; } #nav li { float: left; } #nav li a { display:block; padding: 7px 23.9px; text-decoration: none; font-family:"Arial"; color: white; border-right: 1px solid #ccc; border-bottom: 1px dashed #ccc; font-size: 14px; background-color: #3f6fb7; } } #nav li a:hover { color: #3f6fb7; background-color: #d1cf9f; } #nav pageHorizontal a { background:#d1cf9f; color: white; } #nav ul.current-pagelowerHorizontal a { background:#d1cf9f; color: white; } #nav #nav-home a { background:#d1cf9f; color: white; /* declarations to style the current state */ } /* Print menu coding */ </style> </head> <body onLoad="preloadImages();" bgcolor="#ffffff"> <div class="ts-1-13"> <ul id="nav"> <li id="nav-home" > <a href="testnewMenu.html">test</a> <!--for the new menu --> <ul id="nav"> <a href="XXX.html">Lower 1 </a> </ul> <ul id="nav"> <a href="XXX.html">Lower 2</a> </ul> <ul id="nav"> <a href="XXX.html">Lower 3 </a> </ul> <ul id="nav"> <a href="XXX.html"> Lower 4</a> </ul> <!--for the new menu ul under a list --> </li> <li> <a href="XXX.html">Test2</a> </li> <li> <a href="XXX.cfm">test 3</a> </li> <li> <a href="About_Us.html">About Us</a> </li> </ul> </div> </body> </html>

Hi There,

Is it possible to highlight the current page without specifying a unique body id?

I have been asked to implement current page style on a dynamic site where it is not possible to do this.

Any ideas would be greatly appreciated.

Thanks,

Hey all,
I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS).

So far my instincts say no... but before I spend too much time on solution I thought I'd check here.

Thanks!
BB

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

I am new to designing and just learning now. I want to know how to do menus when click on that menu, will link to the page in the main content area. I have a code, can someone please check and let me know how to link to the main content area?

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pool Inc</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0; 
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>



</head>

<body>

<div id="framecontent">
<div class="innertube">

<h3>Home</h3>
<h3>About</h3>
<h3>Careers</h3>
</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>Welcome to pool Inc.</h1>
</div>
</div>


</body>
</html>

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

Hi, I am new to the forum and need some help with adding a persistent page indicator. I have the CSS working fine for changing images on a menu when hovered over. But I cannot seem to get a persistent page indicator to work. I am using a single image and positioning to change the image when hovered. Can anyone give me some direction please?

Here is the code I have for CSS:

* { margin: 0; padding: 0; } /* Reset stuff */


ul#awesome-menu li { display: inline; }

ul#awesome-menu li a {
display: block; float: left; height: 65px;
background-image: url("../images/navigation_bar_menu.png"); text-indent: -9999px;
}

ul#awesome-menu li a.home {
width: 100px; background-position: 0 0;
}

ul#awesome-menu li a.about {
width: 100px; background-position: -100px 0;
}

ul#awesome-menu li a.resources {
width: 130px; background-position: -200px 0;
}

ul#awesome-menu li a.activities {
width: 120px; background-position: -330px 0;
}

ul#awesome-menu li a.rates {
width: 105px; background-position: -435px 0;
}
ul#awesome-menu li a.photos {
width: 105px; background-position: -540px 0;
}

ul#awesome-menu li a.contact {
width: 161px; background-position: -645px 0;
}

ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
background-position: 0 -65px;
}

ul#awesome-menu li a.about:hover, ul#awesome-menu li a.about:focus {
background-position: -100px -65px;
}

ul#awesome-menu li a.resources:hover, ul#awesome-menu li a.resources:focus {
background-position: -200px -65px;
}

ul#awesome-menu li a.activities:hover, ul#awesome-menu li a.activities:focus {
background-position: -330px -65px;
}

ul#awesome-menu li a.rates:hover, ul#awesome-menu li a.rates:focus {
background-position: -435px -65px;
}

ul#awesome-menu li a.photos:hover, ul#awesome-menu li a.photos:focus {
background-position: -540px -65px;
}

ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
background-position: -645px -65px;
}
a { outline: none; }

And here is my HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link rel="stylesheet" href="css/menu_styles.css" />
</head>

<body>

<ul id="awesome-menu">
<li class="#home"><a href="#home" class="home">Home</a></li>
<li><a href="#about" class="about">About</a></li>
<li><a href="#resources" class="resources">Resource</a></li>
<li><a href="#activities" class="activities">Activities</a></li>
<li><a href="#rates" class="rates">Rates</a></li>
<li><a href="#photos" class="photos">Photos</a></li>
<li><a href="#contact" class="contact">Contact</a></li>
</ul>

</body>

</html>

I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements.

It has tiered drop downs which extend off the end of the page to the right.

Is there a way to make them flip left ONLY if they are at the end of the page?

I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy.

Anyone else encounter this issue and how did they resolve it?

Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES?

Is the answer css? or i-frames(or whatever it's called)

If so, then how would I do this?! PLEASE HELP!

Hi there,

I have an HTML/CSS design I'm working on, that can be accessed he

http://www.design-portal.co.uk/demo/

The CSS can be found he

http://www.design-portal.co.uk/demo/style.css

Basically what I would like is this:

I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example:

http://www.design-portal.co.uk/demo/images/demo.jpg

As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it?

Cheers in advance,

Dave