|
CSS - Table Formatting Confusion
Hi everyone!
I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned. This is my validated CSS code: Code:
.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
width: 85%;
}
.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}
tbody tr.odd {
background-color:lightyellow;
color: red;
}
tbody tr.even {
background-color:red;
color: white;
}
tbody tr.total {
background-color:#6699FF;
color: yellow;
}
table {
table-layout: fixed;
width: 700px;
}
How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me. This is how it SHOULD look : URL And this is how its rendering with my CSS: table Similar TutorialsHi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns. I am trying to replace code like this: <td width="100px><?php echo $row_rsList['taskpriority']; ?></td> with a css style <td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td> where td.pcol { width: 100; } But when I display the table it seems to disregard the width setting. The only other table formatting I ahve done so far is this: table { margin:0; padding:0; } table th { vertical-align: baseline; font-size: x-small; font-weight: bold; font-variant: small-caps; background: #CCCCCC; text-align: left; } Thoughts? hi, and thank for the help in advance. i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom. OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go. Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1) When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2) Hello - I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value. The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D. Here is an example of what I ideally want to achieve (created w/ Visio): Ideal Table Look However, here is what I am currently experiancing Here's the style sheet that I'm using Code:
<style type="text/css">
div.number { visibility:visble;
position: relative;
width: 20px;
height: 20px;
z-index: 2;
left: 5px;
bottom: 35px;
text-align: center;
text-vertical-align: center;
font-family: arial;
font-size: 8pt;
background-image: url(circle.gif);
background-repeat: no-repeat;
background-position:0px -1px
background:none;
border-style:none;
border-width:none;
}
</style>
- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells. Any help would be greatly appreciated. Thanks in Advance. Dave Hi all, first post to the forum after signing up over two years ago... I work mostly on the server side, so I'm hoping that someone can advise me on the trouble I'm having with CSS. http://www.commafruit.co.uk/play/css/imageplace.html In the link above, I have two images, both with the following css: Code: <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:10px;' /> <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:20px;' /> Please could someone explain why they are not in line vertically? They both have left:20px, so surely they should be one on top of the other? The fact that this is not the case in Firefox or IE makes me think I'm really missing the point, and I've been going around and around trying to figure out what. Thanks for any replies. Also, I'd prefer not to use absolute positioning as I'd like to keep the images relative to the div. B. I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here.... Confused? Yes, me too; Here's the html: Code: <html> <head> <link href="test2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="widebar"> <div id="tabs"> <div class="menu1">I want these</div> <div class="menu2">to align to the</div> <div class="menu3">very bottom </div> <div class="menu4">of this div </div> <div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div> </div> </div> Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way. The div that appears on mouseover should sit "on top" of this text with no interference. </body> </html> And here's the css, thus far: Code:
/* css */
#widebar {
width:100%;
height: 200px;
background: #ffccff;
}
#tabs {
float:right;
display:block;
#position: absolute;
#bottom:0;
height: 200px;
background:#334ddd;
width:50%;
}
#tabs2 {
clear:both;
#position: relative;
#bottom: 0;
background: #567dfe;
}
.menu1, .menu2, .menu3, .menu4 {
float:left;
width: 100px;
background: #ccc;
}
Hey, I have the following in a CSS document: Code: /* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }
/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }
In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is: Code: <a class="classmember" href="user.php?id=1">$username</a> But, I also have a Color Key: Code: Color Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>. I thought I could do something like: a.classmember:link { color: #00CC00; font-weight: bold; } But that messes up the Color Key. So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses. Thanks for any suggestions! Hi There - Am having some confusion with CSS inheritance. I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms. I have a large container div with id=forum. Nested inside a table inside that div are more divs. Inside of that I have links inside a div that has class=name. Like this: Code: <div id="forum"> <ul> </ul> <table> <thead> </thead> <tbody> <tr class="odd"> <td class="container" colspan="4"> <div style="margin-left: 0px;"> <div class="name"> </div> <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div> </div> </td> </tr> <tr class="even"> <td class="forum"> <div style="margin-left: 30px;"> <div class="name"> <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a> </div> How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this. Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above. Here's what I was trying to use: Code:
#forum .name a:link, a:visited, a:hover {
color:#F79239;
}
I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this. I am having trouble understanding what exactly the CLASS, ID, DIV, and SPAN elements and attributes do. What are there purposes? How do the relate to each other? When should one be used and not another? In laymens terms please. Thanks Hi I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side. I don't know whether to have each link in its own cell or 1 big cell and have a list of items. I decided to have a list of items but the items display on right side of the table cell and align left doesn't work. Code:
a {
display: block;
width:100px;
text-decoration: none;
}
#list1 { /* all list items */
background: lightblue;
border-width:1px; /* thin is not the same in different browsers */
border-color:black;
border-style:solid; /* required */
list-style-type:none;
}
I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this . Hi there, thanks for reading my post. I am looking to build a website using ASP, with databases. After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily". I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused. I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames . I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!! If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful. Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear. Thanks to anyone who can help, Regards, Porky Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me. I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc. I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div. Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here. I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help. My current (broken) home page can be accessed via: "dgringo.homeip.net/~dgringo/index.shtml" Here is the code and the CSS file: <head> <title>...</title> <script language="JavaScript" type="text/javascript" src="main.js"></script> <link rel="stylesheet" href="entry.css" type="text/css" /> </head> <body> <h1>Me (iMac's) Web-space</h1> <div id="prelude"> <!--#include virtual="includes/header.incl" --> </div> <table id="main"> <tr> <td id="menu"> <!--#include virtual="includes/menu.incl" --> </td> <td id="content"> <!--#include virtual="includes/body.incl" --> </td> <td id="topics"> <p> <!--#include virtual="includes/topic1.incl" --> </p> <p> <!--#include virtual="includes/topic2.incl" --> </p> </td> </tr> </table> <div id="footer"> <!--#include virtual="includes/footer.incl" --> </div> <div class="adendeum"> Last updated <!--#echo var="LAST_MODIFIED" --><br /> </div> </body> </html> ------------- The CSS file now follows: a:link {text-decoration:none;color: black;} a:visited {text-decoration:none;color: black;} a {color: black;} a:hover {text-decoration:underline;color: silver;} body { color: #000000; background: #669999; } h1 { text-align: center; } #prelude { width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; text-align: center; } #main { display: block; width: 100%; border: silver dotted; height: 16em; } #main td { border: dashed; } #menu { position: absolute; width: 20%; left: 2%; } #content { position: absolute; left: 23%; width: 50%; } #topics { position: absolute; left: 74%; width: 20%; } p:first-line { color: gray; background-color: green; } #footer { text-align: center; width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 10px; } .adendeum { font-weight: lighter; color: gray; text-align: center; } Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code. Code: <td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td> |
|||||||