|
CSS - Table Attributes
Thanks for taking the time to read my question.
I am wondering if it is possible to control table attributes with css sheets. For example, center a tabel modify border size modify cellpadding modify cellspacing Thanks again, Brad Similar TutorialsHow do you use element attributes as part of your CSS declaration? For instance, I want to display the following into a row of data... Code: <quotes>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
</quotes>
The CSS I am using is .... Code: quotes {display:table}
titles {display: table-row}
column[id="c1"], column[id="c2"], column[id="c3"], column[id="c4"], column[id="c5"], column[id="c6"] {display: table-cell}
so whereever I have an element with an attribute I am using... element[attribute="value"] {declaration} ...but this is not working. It includes the first column "c1" into the row and then nothing else. Any clues? CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing Code:
/* links for navAlpha menu */
#navAlpha a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navAlpha A:link {
COLOR: white;
}
#navAlpha A:active {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
/* links for navAlpha menu */
#navBeta a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navBeta A:link {
COLOR: white;
}
#navBeta A:active {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
I am trying to create different link attributes for different areas on the same page. For example, I have a banner area that is a dark color and the links need to be a lighter color for contrast, but on the main body of the page the background is white, so I want the links to be darker colors. I also want the hover colors to be different on the different types of links. I have tried using different classes of links, but they all seem to default to one or the other. Any suggestions? Okay, so I am having some issues in positioning items with CSS properly. I have this div first: Code:
#main
{
position: relative;
width: 927px;
margin-right: auto;
margin-left: auto;
background-image: url(/planetscuba/images/main.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 10px;
}
Then inside that tag I have 4 more tags, which are just columns of data. Code:
#navside
{
position: relative;
top: 0px;
left: 0px;
width: 150px;
border-right: #FFFFFF medium dotted;
border-bottom: #FFFFFF medium dotted;
padding-bottom: 10px;
}
#column1
{
position: absolute;
top: 15px;
left: 160px;
width: 222px;
text-align: center;
}
#column2
{
position: absolute;
top: 15px;
left: 397px;
width: 222px;
text-align: center;
}
#column3
{
position: absolute;
top: 15px;
left: 634px;
width: 222px;
text-align: center;
}
Now how I have it right now is the elements are all positioned correctly, but #main does not resize dynamically, which is a problem as I am adding data from a server in these columns, and the amount could change from time to time. In addition the way I am doing is more then likely bloated, but it's the only way I know how to do this. I have a navigation menu on the side which is #navside, then I want to display 3 columns of data, essentially one image and a couple words underneath each image in each column. Now this is all coming from a database, so the easiest way would be just to have the navbar on the side and then content in the rest of the #main div but I don't know how to properly position everything apart from each other without using mass amounts of tags. So to summarize, first problem is to be able to position everything properly so that #main resizes dynamically and then second would be to find some better way to do this. If you can help me on both that would be awesome. Thanks for your help in advance. Thanks for taking the time to read my question. Is is possible to have different link attributes on different sections of a page? For example: I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font. here is my css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
background-color: blue;
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
text-align: left;
text-transform: uppercase;
font-size: medium;
background-color: #FD9800;
font-size: 16px;
border: medium solid #E0E0E0;
padding: 4px;
}
#menu a.nav {
width:92px;
/*How can I have different colored links in this section v.s. the rest of the page?*/
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-weight: bold;
font-size: 12px;
}
a {
color:green;
font-size: 12px;
}
Hi all, I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris Hi All, I'm having problems getting a couple of CSS rules to render on my page. First, here's the page: http://www.righteousguitar.com/ Here are the rules that aren't rendering properly (or likely at all): Code: #Heading {
text-align: center;
}
#Heading h3 {
margin-top: 14px;
margin-bottom: -5px;
}
This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.) Code: #Heading {
text-align: center;
}
#Heading h3 {
margin-top: 14px;
margin-bottom: -5px;
}
These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px. I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can. Thanks in advance for any ideas or suggestions. Sam I've been restyling a legacy web app. the old app had height and width attributes for every image. So when you modernize you can create classes that chunk a whole bunch of stuff, one of which is height and width. In order for SEO analysis to like you do you have to keep the old fashioned height and width attributes on every single image tag? Is it OK to have both a style from a class AND height and width attributes? I assume if they conflict the local ones will win, even though strictly speaking they are not styles. Thanks, just curious. Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag? I tried just putting it in, but the jsp page won't compile: <html:text property="ssn" class="textfield2" /> where textfield2 is a valid style attribute in my included css file. Surely there is a way to specify this so that the taglib will render the proper output. I'm not having any luck googling for an answer. I have the following code, simplified from wordpress for clarity: Code: <div class="entry"> <p><img width="800" class="size-full" src="image.jpg" /></p> <p>This is text.</p> </div> What I am trying to do is indent the text to a position 15 pixels inside the width of the image. In other words, shift ".entry p" 15 pixels right, and shift ".entry p img.size-full" 15 pixels left. The complicating factor is that some of the images are not full width, and so the img.size-full selector has auto margins to center the image. So what I need to have is something like Code:
/* indent the P tag */
entry p {
margin-left: 15px;
}
/* center the img */
img.size-full {
margin: 5px auto;
}
/* This is where I fall down. I can identify the img, but I need to
affect the margin of the p tag, not the img tag, to change the
margin. If I change the img tag, then then centering goes away */
entry p img.size-full {
?????
}
Is this possible? ...Mike I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi, 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 Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? |
|||||||