Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Css with table

  1. #1
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts

    Css with table

    I would like to learn if there is way with only css to use table dropdown menu.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You need to be more specific, what kind of table? is the dropdown a table or is the whole thing a table?

  • Users who have thanked Wojjie for this post:

    Fot (04-18-2011)

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by mcjambi View Post
    usually i use javascipt for menu ! i do not like table and also google !
    Most drop down menus can be accomplished with just CSS, it keeps things more simple.

  • Users who have thanked Wojjie for this post:

    Fot (04-18-2011)

  • #4
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Drop down menu like this example
    Code:
    <table class="clock" width="500px" style="background-color:#c0c0c0">
    	<tr>
    	<td >
       			<a href="#">Select time</a><br />
       			<table class="menu clock" id="time" width="120" style="background-color:#c0c0c0">
       				<tr>
                    	<td class="menu clock">
                        	<a  href="#">
                            	<input name="sivamtime" type="radio" id="a1" checked="checked" "></input>
                            	<span>18</span>
                            </a>
                        </td>
                    </tr>
       				<tr>
                    	<td class="menu clock">
                        	<a  href="#">
                            	<input name="sivamtime" type="radio" id="b2" "></input>
                            	<span>10</span>
                            </a>
                        </td>
                    </tr>

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You can do that without a table like so:

    Code:
    <a href="#" class="timedrop">Select time
    <ul>
      <li><input name="sivamtime" type="radio" value="11" /><span>11</span></li>
      <li><input name="sivamtime" type="radio" value="10" /><span>10</span></li>
    </ul>
    </a>
    With the following CSS:
    Code:
    .timedrop {position:relative}
    .timedrop ul{display:hidden}
    .timedrop:hover ul{display:block;position:absolute;list-style:none}
    You might need to work out the positioning though to line it up.

  • Users who have thanked Wojjie for this post:

    Fot (04-18-2011)

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If you're looking for a table-less, css drop down menu have a look at this on htmldog. No javascript (except for IE6 support).

  • Users who have thanked SB65 for this post:

    Fot (04-18-2011)

  • #7
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    I change it but always is open.
    Code:
     <ul>
       <li><span><a href="#" class="timedrop">Select time</a></span>
       <ul class="menu clock" style="background-color:#c0c0c0">
       				
       <li class="menu clock"><a  href="#">
                            <input name="sivamtime" type="radio" id="a1" checked="checked" ></input>
                            <span>10</span>
                            </a></li>
                        
                    
       <li class="menu clock"><a  href="#">
                            <input name="sivamtime" type="radio" id="b2" ></input>
                            <span>18</span>
                            </a></li>

  • #8
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    If I use this in css it display in the same place with svg animation but works.Thanks.
    Code:
    #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 
                        position:relative; padding:10px; width:100px;}
            #nav > li:hover ul { display:block; }
            #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
            
            #nav li ul { margin:0px; padding:0px; display:none;}
            #nav li ul li { list-style-type:none; margin:10px 0 0 0;}
            #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
            #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
            #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

  • #9
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Finally ,I use this but I would like to display horizontally.Thanks
    Code:
    #nav > li:hover ul { display:inline; }
            #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
            
            #nav li ul { margin:0px; padding:0px; display:none;}
            #nav li ul li { list-style-type:none; margin:10px 0 0 0;}
            #nav li ul li a { display:inline; padding:5px 10px; color:#A2E200; text-decoration:none;}
            #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
            #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •