|
CSS - Using Css For Table Style?
Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one?
Similar TutorialsHello, I have a table and I am styling its cells: table.Grid td {background-color: red;} Inside this table I will have some other tables but I don't want their cells to have the styles changed. I see two options: give a class to Grid table cells: table.Grid td.Grid {background-color: red;} Reset the changes in child tables: table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;} But can I apply the following style: table.Grid td {background-color: red;} And make it only for the cells inside that table but not inside the child tables in this code line? ... without needing to reset the styles on child table cells or give main cells a class ... Thanks, Miguel Hi. First of all i am new to CSS styling . I am using asp.net and i have created an html table in wich i added some treeviews, labels and stuff. I aslo created a StyleSheet where i wanna add style to a specific label within the table. Maybe it's very simple but i don't know what else to do, i am trying to do that by ours. For instance, #Label1 { color:Orange; } it's not working, if has no effect. Label1 is the name of the label. I think i'm not refering correct the Label. Should i add a reference to the table too? i tried something but it were wrong I'd like to do something like this: Quote: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#666666" width="100%"> <tr> <td>Test</td> </tr> </table> But I don't want to use an inline style tag. I tried this: Quote: <html> <head> <style> .border { border-color: #666666; border-collapse: collapse; border: 1px; } </style> </head> <body> <table class="border" cellpadding="0" cellspacing="0" width="100%"> <tr> <td>Test</td> </tr> </table> </body> </html> But it does not work. What am I doing wrong? gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! Hi guys, I recently redeseigned my site using CSS from tables. When the window (IE) was made smaller before, the content would stay put but you just wouldnt see it all (obviously cause now the window is smaller) but with CSS it dumps it at the very bottom of the screen and leaves my content area totally blank. Is there some way this can be fixed? Daragh I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I 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! on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? I might have asked this before, but I can't remember. I have my base class .baseClass { width: 100% } how can I inherit that into other classes? Like maybe: .childClass#baseClass { height: 200px; } .biggerChild#baseClass { height: 400px; } now all three classes would have a width of 100% If I google this all I get are pages telling me <p> will inherit from <html> Also, I know I could do like this: .childClass, .biggerChild { width: 100%; } but I have a pretty big .css file, and it really bugs me to find the base class and add the derived class to it. Also, my base class can have a short name, and my derived class can have a long name, so this saves me some typing. ^^. Thanks for your time, CJB Can anybody solve the mystery of what's going on on this page?: http://www.j-archive.com/showscores.php?game_id=3346 The "Jeopardy! Round" score table and the "Double Jeopardy! Round" score table should look exactly the same, but on my browsers (Chrome 4 and IE6) the "Double Jeopardy! Round" table has a wider td for the first row. It's as if it's "inherited" the width of the tds that follow it (or perhaps came before it?)... I've checked over the markup and the CSS several times and I can't find any errors that would cause this. What's going on? Thanks-- Hai guyz!! I've been workin' on this website template since December and I was just wonderin' if you guyz (the pros) would share your opinion on the design -- pretty peasss! http://i898.photobucket.com/albums/ac183/micha8l/web_page.png k thx, Mike I want to apply this style to a Table TD cell: Code: border-bottom: 1px solid #D2D7DD; It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with? Thanks. Hi, just writing to get peoples oppinions. i have created a template for standardising the way my collegues at work layout their style sheets. any feedback will be welcome; PHP Code: /* ==== General Rules ==== */ body { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } p { } a:link, a:visited { } a:hover { } img { } th { } td { } dt { } li { } /* ==== Layout Rules ==== */ #topBar { } /* ==== Specific Rules ==== */ #topBar h1 { } #topBar h2 { } #topBar h3 { } #topBar h4 { } #topBar h5 { } #topBar h6 { } #topBar p { } #topBar a:link, #topBar a:visited { } #topBar a:hover { } #topBar img { } #topBar th { } #topBar td { } #topBar dt { } #topBar li { } #leftBar { } /* ==== Specific Rules ==== */ #leftBar h1 { } #leftBar h2 { } #leftBar h3 { } #leftBar h4 { } #leftBar h5 { } #leftBar h6 { } #leftBar p { } #leftBar a:link, #leftBar a:visited { } #leftBar a:hover { } #leftBar img { } #leftBar th { } #leftBar td { } #leftBar dt { } #leftBar li { } #rightBar { } /* ==== Specific Rules ==== */ #rightBar h1 { } #rightBar h2 { } #rightBar h3 { } #rightBar h4 { } #rightBar h5 { } #rightBar h6 { } #rightBar p { } #rightBar a:link, #rightBar a:visited { } #rightBar a:hover { } #rightBar img { } #rightBar th { } #rightBar td { } #rightBar dt { } #rightBar li { } #mainContent { } /* ==== Specific Rules ==== */ #mainContent h1 { } #mainContent h2 { } #mainContent h3 { } #mainContent h4 { } #mainContent h5 { } #mainContent h6 { } #mainContent p { } #mainContent a:link, #mainContent a:visited { } #mainContent a:hover { } #mainContent img { } #mainContent th { } #mainContent td { } #mainContent dt { } #mainContent li { } #bottomBar { } /* ==== Specific Rules ==== */ #bottomBar h1 { } #bottomBar h2 { } #bottomBar h3 { } #bottomBar h4 { } #bottomBar h5 { } #bottomBar h6 { } #bottomBar p { } #bottomBar a:link, #bottomBar a:visited { } #bottomBar a:hover { } #bottomBar img { } #bottomBar th { } #bottomBar td { } #bottomBar dt { } #bottomBar li { } #vNav { } /* ==== Specific Rules ==== */ #vNav h1 { } #vNav h2 { } #vNav h3 { } #vNav h4 { } #vNav h5 { } #vNav h6 { } #vNav p { } #vNav a:link, #vNav a:visited { } #vNav a:hover { } #vNav img { } #vNav th { } #vNav td { } #vNav dt { } #vNav li { } #hNav { } /* ==== Specific Rules ==== */ #hNav h1 { } #hNav h2 { } #hNav h3 { } #hNav h4 { } #hNav h5 { } #hNav h6 { } #hNav p { } #hNav a:link, #hNav a:visited { } #hNav a:hover { } #hNav img { } #hNav th { } #hNav td { } #hNav dt { } #hNav li { } /* ==== Custom Rules ==== */ .imgLeft { margin: 2px; float: left; } .imgRight { margin: 2px; float: right; } |
|||||||