FORUMS: list search recent posts

Formatting text in a dreamweaver CS5 table

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Jeffrey Powel
Formatting text in a dreamweaver CS5 table
on Feb 12, 2012 at 1:13:51 am

I am stumped by something seemingly very simple. I created a 2x3 table and want to format the columns so the font colors are different on the left than on the right. I am able to R justify the left column and left justify the right one. I am able to specify the orientation (top) for the left column. But every time I change the color of the left column, the right side also changes to that color. I've looked a myriad videos on Dreamweaver CS5 and tables, but canb't find anything that directly relates to this problem.

the code for the table (in a Tooltip box) is:



Come Marching Home




Vocals:
Juliane Poirier


Chorus:
Juliane Poirier, Jeff Powel, Chris Rin


Instruments:
Jeff Powel: Acoustic guitar rhythm and lead, midi bass, electric guitar, percussion, and midi bass.


 



any help would be greatly appreciated. I have been dividing by 0 for over a day now.


Return to posts index

Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 3:02:52 pm

CSS is your friend.

http://www.w3schools.com/css/css_table.asp

I hope this helps

PS. to paste code here, you need to highlight it and press the CODE button in the post window.


Return to posts index

Jeffrey Powel
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 4:52:08 pm

1. Thanks for your reply.
2. Thanks for the heads up regarding pasting code.
3. This is getting closer to my question, but still not answering it. I want to take the 3x5 table in the "tryit editor" and write a css so that the left hand column text was green without putting an in-line color designation on every line. In this example I want to be able to name a table in dreamweaver and direct the left column text of any table so named to be one color on the left column and the right column to be another.

Can it be done?


Return to posts index


Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 6:18:35 pm

Got it. You can use the colgroup tag.

http://www.w3schools.com/tags/tag_colgroup.asp


Return to posts index

Jeffrey Powel
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 6:37:51 pm

Not sure about this but it seems that the colgroup tag aplies to the background of a table and not the text. I have been able to do this in Dreamweaver relatively easily. When I tested the model in your link, I was changing the background color and not the text color


About colgroup it says:

Tip: Add the style attribute to the tag, and let CSS take care of backgrounds, width and borders.

Can you make the text color change in a column with this code?


Return to posts index

Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 7:23:48 pm

You're right. That defines the table, not the contents.

For the text, you can always add a custom class.


Return to posts index


Jeffrey Powel
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 8:44:38 pm

Exactly. So what is a custom class. Could you write a snippet to show me how you'd change the text color in a left and right sided column?


Return to posts index

Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 14, 2012 at 11:56:03 pm

Go to menu:

>Format >CSS Styles >New

Choose Class as your rule type, write a name and click OK. A window will open.

Choose the attributes you want for your text and background, click OK.

Now, in design view select the table cells you need to have that attributes, then in the Properties panel choose your created class from the drop down menu.

I hope this helps


Return to posts index

Jeffrey Powel
Re: Formatting text in a dreamweaver CS5 table
on Feb 15, 2012 at 5:44:48 pm

Did each step. Made the class designation. Applied the class designation to the column. Called up the properties bar indicating on the HTML section that I had indeed picked three cells of the left column. Class was indeed as I specified. Color of text did not change. Went to the "page properties" button on that menu and looked in there. It likewise had a text color option that did not change from my class assignment so I changed it there too. No impact on the left column. A real puzzle to me.


Return to posts index


Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 15, 2012 at 9:27:17 pm

If the contents of your table are links, then you need create a compound rule for the "a" tag.

Can paste your code again or post a link to the actual page?


Return to posts index

Jeffrey Powel
Re: Formatting text in a dreamweaver CS5 table
on Feb 16, 2012 at 12:54:37 am

Go to this web page and place your cursor over the first song in the center of the page

http://dogfishbaystudios.com/SDL3-105NoDDM/samples_jules.htm
I can send you whatever code you need but don't want to bury you in it.

THe table is called SongLinerNotes

From the HTML page:
<div class="tooltipContent" id="sprytooltip10">
<h2><img src="picts/cdcover_jules1.jpg" width="100" height="93" alt="CD Art">Be Your Friend</h2>
<table cellpadding="0" cellspacing="0" id="SongLinerNotes" style="font-weight: bold;">
<col width="113">
<col width="351">
<tr>
<td width="113" align="right" valign="top"><strong>Vocals:</strong></td>
<td width="351">Juliane Poirier</td>
</tr>
<tr>
<td align="right" valign="top"><strong>Chorus:</strong></td>
<td width="351">Juliane Poirier, Jeffrey Powel, Chris Rin</td>
</tr>
<tr>
<td align="right" valign="top"><strong>Instruments:</strong></td>
<td width="351">Jeff Powel: Acoustic guitar rhythm and lead, midi bass, electric guitar, percussion, and midi bass.</td>
</tr>
</table>
</div>


From tooltip css:


.pagebackground #sprytooltip1 h2 {
font-family: Arial, Helvetica, sans-serif;
left: auto;
text-align: left;
}
/*This combination makes both right and left columns black Must be taking its direction just from the first line of code.*/



#SongLinerNotes td {
color:#FFF;
}


Return to posts index

Fernando Mol
Re: Formatting text in a dreamweaver CS5 table
on Feb 16, 2012 at 2:37:07 am

OK. You are using a SpryTooltip. This changes the panorama, because you probably have an specificity problem.

This is the rule that is defining the color of the text in your table:

#SongLinerNotes td {
color:#333;
}


What you want is to change the color of the text in some table cells.

You need to create a class for them. So, to avoid any specificity problems, add a very specific compound rule for the class in that table. Something like this:

#SongLinerNotes td .differentcolor {
color:#666;
}


Then, add the class to the table cells you need to have it.

That should work


Return to posts index


Ross Smith
Re: Formatting text in a dreamweaver CS5 table
on Feb 21, 2012 at 8:57:17 am

Edit the table using Add or edit accessibility. We make good use of it at mikannie.com.au


Return to posts index

douglas welbar
Re: Formatting text in a dreamweaver CS5 table
on Sep 15, 2014 at 6:55:58 am

try this...CSS Formatting on Tables

Douglas


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]