CSS - Ff Develper Toolbar: Make Selected Options Persist? Change Its Css?

Hello,

I work with ASP.NET and I never liked the way some controls are
rendered.
Fortunately .NET 3.5 has a new control, ListView, which lets me render
my HTML code the way I want.

I need do display tabular data on various pages of a web site.

Should I use tables? Should I use lists? What other option is best and
which should I use?
And if I use a table what is the cleaner and better table code I
should have?

For example, should I consider this a good code:

<div class="PrettyGridView" id="GridView1">
<div class="AspNet-GridView">
<div class="AspNet-GridView-Pagination AspNet-GridView-Top">
<a href="javascript:__doPostBack('GridView1','Page$1')">1</a>
<a href="javascript:__doPostBack('GridView1','Page$2')">2</a>
<span>3</span>
</div>
<table cellpadding="0" cellspacing="0" summary="">
<thead>
<tr>
<th scope="col"><a
href="javascript:__doPostBack('GridView1','Sort
$Operation')">Operation</a></th>
<th scope="col"><a
href="javascript:__doPostBack('GridView1','Sort$Reps')">Repetitions</
a></th>
<th scope="col"><a
href="javascript:__doPostBack('GridView1','Sort$Duration')">Total
test</a></th>
<th scope="col"><a
href="javascript:__doPostBack('GridView1','Sort$Average')">Average</
a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sin</td>
<td>27124</td>
<td>31</td>
<td>1.1521</td>
</tr>
<tr class="AspNet-GridView-Alternate">
<td>Sinh</td>
<td>19777</td>
<td>31</td>
<td>1.5801</td>
</tr>
</tbody>
</table>
<div class="AspNet-GridView-Pagination AspNet-GridView-Bottom">
<a href="javascript:__doPostBack('GridView1','Page$1')">1</a>
<a href="javascript:__doPostBack('GridView1','Page$2')">2</a>
<span>3</span>
</div>
</div>
</div>

Thanks,
Miguel

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

Hi,

I have used the UL and LI elements to build a tree as follows: Code:

<div class="tree">
<ul>
   <li>
      <span>One</span>
      <span class="controls">
         <input type="radio" ... />
         <input type="button" ... />
      </span>
      <ul>
         <li>
            <span>Child of One</span>
            <span class="controls">
               <input type="radio" ... />
               <input type="button" ... />
            </span>
         </li>
      </ul>
   </li>
   ...
</ul>
</div>

The result of the above XHTML would be somethings as follows:
Code:

- One <Radio> <Button>
   - Child of One <Radio> Button>
...

Now I want to try and get the following result through CSS:
Code:

- One                      <Radio> <Button>
   - Child of One          <Radio> Button>
      - Another Child      <Radio> Button>
   - Second Child          <Radio> Button>
- Two                      <Radio> Button>
   - Child of Two          <Radio> Button>
...

That is in other words I want to have still have elements indented for every child element but all the controls of the elements are under each other at the right side of the div element.

Is this possible? If so are there any example I can use?

I have wrapped the controls inside a span because I felt that this would help. However I do not know how I can change the width of each 'li' element depending on its position in the three! (unless I use javascript, which I am trying to avoid). Also I do not know if CSS wise this is the best way forward.

Thanks for any suggestions.
Regards,
Sim085

I'm using the max-width in IE in my site - specifically I'm using it to set the minimum height of certain elements. Now that it has become a key part of my design, I realized that it generates errors in the W3 validator.

Does anyone know a valid way to use the min-height that will work with IE?

I have a website/application that I want to give the users the option to select from multiple CSS's on their browser. How do I go about letting the user change the style sheet?

-Dynasty

Hi,

I am new at this. I am using a software to create my website . I dont want the customer to see a shipping option on the checkout page as my product cannot be shipped.

How do I remove the shipping information part and show only the billing information from the checkout page?

Someone gave me this css: <style type="text/css">

#DisplayShippingSpeedChoicesTD {
display: none !important;
}
#CalcShippingDivContainer {
display: none !important;
}

</style>

Where should I put this css? SHould it go in the main css file or html template? Any particular location in the css?

Thanks

Well I really don't know how else to explain this error, I have had it for a long time, and even as I am making a new layout the bug is again appearing, this appears to be a firefox issue and not one of ie. However as I do use firefox it's annoying that this bug exists.

Because my style sheet and such is all rather long I will just link to the areas, this page is a new layout so your not gonna get any crap on it.

http://www.unlimitedgamer.net/test_e.htm

css: http://www.unlimitedgamer.net/style_e.css

I know my style sheet is a mess and I intend on cleaning it up, but I am still not some css/div master as I can never figure out these little bugs.

Bug 1: when you click on the left area where there is nothing but background, anywhere about 150 pixels down, the entire layout (aside from the header) is selected, this is annoying as anything becuase I am always clicking back and forth between windows causing this to occur.

Bug 2: the yahoo ad is floating when you scroll, however the image beside it that is in the same div does not?

Thanks for any help.

Hi,

Looking to make menus out of an unordered list. I want one of the menus to be highlighted when the corresponding page is being displayed. I might have more than one menu on a given page.

http://css.maxdesign.com.au/listamatic/ shows examples on how to do so. In the HTML, they use <li id="active"> to target the menu link to highlight.

If I have two menus on a given page, this would result in two identical ID's, however, they could be uniquely identified since they exist in different menu ID's. Is this a problem? Would it be better to use <li class="active"> instead of how Listamatic's use of id?

Thanks

Hi,
I have asp menu in my aspx page. There are 3 menu items. If the user clicks on a menu item, I want to highlight the menu with a different color and by default the other menu items should have another color.

So only the currently selected menu, should have the different color, and the other menu items should have the default color.

How to achieve this?

Thank you

Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this?

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.

Hi All :

Currently i'm running in .NET platform together with VB.net and ASP.

I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap.


Regards,
JeFFery

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here


Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

to dynamically have a menu to change whats css sheet is loaded on page view

Hi Guys,

I have a question about me not understanding how margins work...

I am quite perplexed...I am trying to remove the white space between borders of table cells.

I am using:
Code:

td { margin: 0; }

But there is still white space between the cells...how do I make no space between the cells?



Code is located he
http://www.taipeitripper.com/senshin_center/training_schedule.html

Thank you,
Evan Jerkunica