LegendItem styling

Hi All,
For PIE chart, i need to create clickable legend items. This
can be easily done by using itemClick attribute on the
<mx:Legend> tag. But i am not able to do following
1. display underline for the LegendItem label
2. display hand cursor for the LegendItem label when user
hovers mouse over label
I tried following,
1. <mx:Legend itemDecoration="underline"........./> - I
thought LegendItems will inherit this property. I also tried
<mx:Legend styleName="myCustomStyle"........./> with
myCustomStyle declared as <mx:style> with
text-decoration:underline. But none of these works. I don't know if
any of other attributes on Legend tag affects this one. My current
Legend tag declaration is as follows,
<mx:Legend id="appPieLegend"
itemClick="appsLegendClick(event)" direction="vertical" width="25%"
labelPlacement="right" markerHeight="10" markerWidth="10"
paddingBottom="0" paddingTop="0" textAlign="left"
verticalAlign="middle" fontFamily="myVerdana"
fontGridFitType="subpixel" fontStyle="normal" fontWeight="normal"
fontAntiAliasType="advanced" itemDecoration="underline"/>
2. I also tried not setting dataProvider property on Legend
tag But dynamically adding LegendItems to Legend in ActionScript as
follows,
var customLegendItem:LegendItem = new LegendItem();
customLegendItem.setStyle("text-decoration","underline");
customLegendItem.setStyle("textDecoration","underline");
None of these work at all.
I will appreciate any help OR new idea.
Thanks
Suhas

There can be no bevel option because that is nothing any browser can render dynamically. If you want such stuff, you have to use images created in Photoshop.
Mylenium

Similar Messages

Dreamweaver does not link any images or styling to my webpage

Hi,
I have been creating a webpage and have moved images from one folder to another and now the website will not display any images or styling. I have moved all the content back and it still doesn't show. I have created a completely new website with new images and styling and even now it still doesn't link the images to the "live view" (or when I open it in a browser). What have I messed up?
Thanks in advance.
Tom.

Thanks for you quick response - Please note that even if I use a template it doesn't show any image I put in. Can you see a problem with this template code? I have put the HTML and then the CSS after
PLEASE ALSO NOTE: I have completely re-done site management and moved images to where they should be. This has not worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>



<link href="file:///C|/Users/admin/Desktop/tomstinhouse/twoColElsRtHdr.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColElsRtHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar1">
    <h3>sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
    <p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<br class="clearfloat" />
   <div id="footer">
    <p>Footer</p>
</div>
</div>
</body>
</html>
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
.twoColElsRtHdr #container {
width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColElsRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.twoColElsRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColElsRtHdr #sidebar1 p" rule.
.twoColElsRtHdr #sidebar1 {
float: right;
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
.twoColElsRtHdr #sidebar1 h3, .twoColElsRtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
.twoColElsRtHdr #mainContent {
   margin: 0 13em 0 10px; /* the left margin will look best if you match the padding amount to the header and footer. */
.twoColElsRtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColElsRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

Photoshop CC: Copy CSS doesn't work when text is styled as paragraph

I'm using the most recent version of photoshop, CC-14.0, on a Mac running OSX 10.8.4
I'm finding that the "copy css" function does not work if a paragraph is styled with a custom paragraph style. In other words any text that is not styled as "basic paragraph" or "basic paragraph+".
I can copy css from a text block with a custom paragraph style, but the css is wrong. It doesn't reflect the attributes I have set up in my custom paragraph style. Instead it writes out the default "basic paragraph" style. If I copy the css from a text block styled as "basic paragraph+" it writes the css correctly.
This is disappointing because it defeats the purpose of being able to create paragraph and character styles (like in InDesign).
This is a bug or oversight, right? Is there a reason why it should work this way?

14.0 is not latest version. Click Help/updates

Spry Menu Bar Advanced Styling Question

Hello all,
I am using Spry Menu Bars for the first time and have checked
out most of the online documentation. I have gone into the CSS file
to customize much of the look of my first menu using the
documentation I could find.
I would like to do the following, but can't seem to find the
CSS code bits to do it:
1. Change the height (not width) of my top menu trigger item
-- it has created some unwanted padding.
2. Change the width of my submenu independently of the top
menu item -- eliminate cramping and allow for longer text than the
top menu trigger.
3. Change the submenu text color and size independently of
the top menu item text.
Here is a link to my sample navigation bar (only the first
item "Latest News" has a menu):
http://stage.ecdi.com/includes/nav_bar.html
Sorry for the extent of my request, but I have gotten
blurry-eyed looking for posted material that answers my inquiry. I
wish there were an easier way to accomplish complete styling,
considering how popular these menus are.
You guys are the best...
Matt

Hi,
could you have a look here to David's tutorial: http://foundationphp.com/tutorials/sprymenu/customize4.php?
... or this thread (2: gramps) e.g: http://forums.adobe.com/thread/801176#3519178
Hans-Guenter

How do i create a styled spry mysql driven menu using dreamweaver cs4?

How do i create a styled spry mysql driven menu using dreamweaver cs4?
I have cs4. I gave up on using MS sql as a datasource. I finally got a php successfull connection in my PHP web page.
I would like a nice video tutorial for creating a dynamic menu.
I guess i can style it by attaching a css file to the page. Are their any already designed css files out there in some online area?
i am not a good designer. so i would like to simply have a collection of menu_style.css files and choose what looks good.
But first i need to build the spry menu from the mysql database.
Any help is apprechiated.
My first choice was to maintain the data in an MS sql server file. If i could directly attach to an ms sql datasource then that would be the best option.
I dont think i want to have to re-generate an XML datasource each time i add or modify the menu. I would like to maintain the MS Sql or mySql file instead.
If i could generate an XML datasource from the MS Sql database then I may even prefere that, but i have spent a lot of time trying to figure out how to do that and not had any success. So i prefere working in MS sql but would settle for mySql if i had to.
Thanks
Jerry

To create a dynamic menu take a look here http://labs.adobe.com/technologies/spry/samples/menubar/MenuFromNestedData.html#
The XML file for the above menu looks like this
<?xml version="1.0" encoding="utf-8"?>
<items>
     <item id="0001" type="donut">
          <name>Cake</name>
          <ppu>0.55</ppu>
          <batters>
               <batter id="1001">Regular</batter>
               <batter id="1002">Chocolate</batter>
               <batter id="1003">Blueberry</batter>
               <batter id="1003">Devil's Food</batter>
          </batters>
          <topping id="5001">None</topping>
          <topping id="5002">Glazed</topping>
          <topping id="5005">Sugar</topping>
          <topping id="5007">Powdered Sugar</topping>
          <topping id="5006">Chocolate with Sprinkles</topping>
          <topping id="5003">Chocolate</topping>
          <topping id="5004">Maple</topping>
     </item>
     <item id="0002" type="donut">
          <name>Raised</name>
          <ppu>0.55</ppu>
          <batters>
               <batter id="1001">Regular</batter>
          </batters>
          <topping id="5001">None</topping>
          <topping id="5002">Glazed</topping>
          <topping id="5005">Sugar</topping>
          <topping id="5003">Chocolate</topping>
          <topping id="5004">Maple</topping>
     </item>
     <item id="0003" type="donut">
          <name>Buttermilk</name>
          <ppu>0.55</ppu>
          <batters>
               <batter id="1001">Regular</batter>
               <batter id="1002">Chocolate</batter>
          </batters>
     </item>
     <item id="0004" type="bar">
          <name>Bar</name>
          <ppu>0.75</ppu>
          <batters>
               <batter id="1001">Regular</batter>
          </batters>
          <topping id="5003">Chocolate</topping>
          <topping id="5004">Maple</topping>
          <fillings>
               <filling id="7001">
                    <name>None</name>
                    <addcost>0</addcost>
               </filling>
               <filling id="7002">
                    <name>Custard</name>
                    <addcost>0.25</addcost>
               </filling>
               <filling id="7003">
                    <name>Whipped Cream</name>
                    <addcost>0.25</addcost>
               </filling>
          </fillings>
     </item>
     <item id="0005" type="twist">
          <name>Twist</name>
          <ppu>0.65</ppu>
          <batters>
               <batter id="1001">Regular</batter>
          </batters>
          <topping id="5002">Glazed</topping>
          <topping id="5005">Sugar</topping>
     </item>
     <item id="0006" type="filled">
          <name>Filled</name>
          <ppu>0.75</ppu>
          <batters>
               <batter id="1001">Regular</batter>
          </batters>
          <topping id="5002">Glazed</topping>
          <topping id="5007">Powdered Sugar</topping>
          <topping id="5003">Chocolate</topping>
          <topping id="5004">Maple</topping>
          <fillings>
               <filling id="7002">
                    <name>Custard</name>
                    <addcost>0</addcost>
               </filling>
               <filling id="7003">
                    <name>Whipped Cream</name>
                    <addcost>0</addcost>
               </filling>
               <filling id="7004">
                    <name>Strawberry Jelly</name>
                    <addcost>0</addcost>
               </filling>
               <filling id="7005">
                    <name>Rasberry Jelly</name>
                    <addcost>0</addcost>
               </filling>
          </fillings>
     </item>
</items>
Then remains the manner in which you create the XML file which can be found here http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
One you have your menu up and running, you will be able to apply styles and effects

Please Help.JTable insert styled text

Hi all java guru,
on post http://forum.java.sun.com/thread.jsp?forum=57&thread=485469 i've depicted my scenario in which i have a JTable where i want to add styled text.
i've implemented a CustomTableModel that maintains information about text style, in such way that when renderer cell, i can rebuild exact text with its style....same method is adopted for CellEditor.
It is possible to have more than one JTable in my application....then to correctly handle all JTables ' put them in a vector and during editing and rendering i find current focusable/selected JTable and edit/render it.
Clearly i maintain information about style of text when i insert it, that is when i insert text, i update my CustomTableModel...same thing must be done when i delete text from JTable...that is, i must update CustomTableModel too in this case.
Because my CellEditor is a JEditorPane component (extend it) i've registered document associated to it to a DocumentListener that notify every time that a remove operation is happens.
What is the problem now???problem is that when i finish to edit a cell and click on another cell i've got a removeUpdate(DocumenEvent e) event, and i can't distinguish it.....it seems a real remove event....
In this case(when i change cell) the code that is executes returns wrong result and invalidate all the rest.
I think error is where i register celleditor , now i do it in CustomCellRenderer class that extend JEditorPane and implements TableCellRenderer.
Please help me...this is a great trouble that invalidate all my work :(
Any new idea is welcome.
regards,
anti-shock

Hi stanislav, of course i can...you're a myth :)
public class CustomCellEditor extends AbstractCellEditor implements TableCellEditor {
     CellEditor cellArea;
     JTable table;
     public CustomCellEditor(JTable ta) {
          super();
          table = ta;
          // this component relies on having this renderer for the String class
          MultiLineCellRenderer renderer = new MultiLineCellRenderer();
          table.setDefaultRenderer(String.class,renderer);
     public Object getCellEditorValue() {
          return cellArea.getText();
     public Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected,     int row, int column) {
          int start = 0;
          int end = 0;
                                           // Get current selected table
          TableEditor tb = (TableEditor) TableEditor.getSelectedTable();
          TableModel model = (TableModel) tb.getModel();
          Vector fontInfo = model.getFontFor(row,column);
          CellEditor cellArea = (CellEditor) ((CustomCellEditor)tb.getCellEditor (row,column)).getCellEditor();
          Document doc = cellArea.getDocument();
          String content = tb.getValueAt(row,column).toString();
          if (doc!=null && fontInfo.size()>0 && !content.equals("")) {
                                                 // This method reads from model and get right style info
                                                 // for current text, and restore them
                                                 restoreFontWithAttributes(doc,fontInfo,content);
          else
               cellArea.setText(tb.getValueAt(row,column).toString());
          cellArea.rowEditing = row;
          cellArea.columnEditing = column;
          cellArea.lastPreferredHeight = cellArea.getPreferredSize().height;
          return cellArea;
      * @return
     public CellEditor getCellEditor() {
          return cellArea;
     public class CellEditor extends JEditorPane {
          private CellStyledEditorKit k;
          public CellEditor() {
                super("text/plain","");
                k = new CellStyledEditorKit();
                setEditorKit(k);
                // I tried to add document here, but i have had wrong behavior
               doc = new DocumentListener() {
               public void removeUpdate(DocumentEvent e) {
                  // Get current selected table
                  TableEditor tb = (TableEditor) TableEditor.getSelectedTable();
                  TableModel model = (TableModel) tb.getModel();
                  model.updateFontInfo();
               getDocument().addDocumentListener(doc);
}Ok, stan...this is my CustomCellRenderer class....as i have already said, i have some style text info mainteined by CustomTableModel associated with JTable.
I update CustomTableModel every time that an insert and remove operation happens.
If i add a DocumentListener to CellEditor (that rapresents editor cell of my table) happens that, if i remove some character from an editing cell, i got a removeUpdate event.....and this is right!!! But if i change cell (e.g. supposing editing cell(1,1), click on cell(2,1) then stop edit cell(1,1) and start edit cell(2,1)) i got a removeUpdate event, that I don't wait for to me..
Look at this:
empty cell | some text
cell 0 ------- cell1
supposing you're in cell1 and you have finished to insert "some text".Then click on cell0, that is empty....then document associated with CellArea(extend JEditorPane) before of the click on cell0 had some text, but after click have no text, then for it a removeUpdate is happens.....and is that one i got..
it's as if an unique document is associated to all cells, while should be one document for each cell (i hope this is right).
Clearly, i've same code for renderer, in such way that i can restore style of text on rendering.
Hope is clear....if U have any idea or suggestion please give to me.
Tnx a lot Stanislav..
regards,
anti-shock

What is the correct way to add styling to drag-and-drop created calendars?

I have a working instance of a rich client calendar. I generated the view with the required fields (start, stop, provider, ...), put it into the App Module, and dragged it onto a JSF page to create a calendar.
Next I created an activityScope object in a class called CalendarBean (no inheritance)
Class CalendarBean()
private HashMap<Set<String>, InstanceStyles> activityColorMap;
+..+
+public CalendarBean() {+
super();
activityColorMap = new HashMap<Set<String>, InstanceStyles>();
HashSet setEd = new HashSet<String>();
HashSet setLen = new HashSet<String>();
setEd.add("Work");
setLen.add("Home");
activityColorMap.put(setEd, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.ORANGE));
activityColorMap.put(setLen, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.RED));
+}+
+}+
Next, I linked this up as a backing bean and associated the ActivityStyles of CalendarBean to it:
+#{backingBeanScope.calendarBean.activityColorMap}+
I populated some records in the database with properties "Work" and "Ed', but they show default blue.
As I understand it, I need to do something with the getTags() method of the underlying CalendarActivity class, but I'm not quite sure how to do that.
Took a stab at creating a class, CalendarActivityBean, that extended CalendarActivity, and pointed all the CalendarActivity references I had to the new class, but it didn't seem to fire (in debug), and I got into trouble, when inserting records, with
public void calendarActivityListener(CalendarActivityEvent calendarActivityEvent) {
currActivity = (CalendarActivityBean) calendarActivityEvent.getCalendarActivity();
being an illegal cast
What is the correct way to add provider-based styling to drag-and-drop create calendars?
Ed Schechter

A colleague of mine was kind enough to solve this:
The calendar has ActivityStyles property = #{calendarBean.activityStyles}
CalendarBean looks something like this:
package com.hub.appointmentscheduler.ui.schedule;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Set;
import oracle.adf.view.rich.util.CalendarActivityRamp;
import oracle.adf.view.rich.util.InstanceStyles;
+public class CalendarBean {+
private HashMap activityStyles;
private String dummy;
+public CalendarBean() {+
+// Define colors+
activityStyles = new HashMap<Set<String>, InstanceStyles>();
HashSet setPending = new HashSet<String>();
HashSet setArrived = new HashSet<String>();
HashSet setApproved = new HashSet<String>();
HashSet setCompleted = new HashSet<String>();
setApproved.add("APPROVED");
setPending.add("PENDING");
setArrived.add("ARRIVED");
setCompleted.add("COMPLETED");
activityStyles.put(setApproved, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.GREEN));
activityStyles.put(setPending, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.ORANGE));
activityStyles.put(setArrived, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.PLUM));
activityStyles.put(setCompleted, CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.LAVENDAR));
+}+
+public void setactivityStyles(HashMap activityStyles) {+
this.activityStyles = activityStyles;
+}+
+public HashMap getactivityStyles() {+
return activityStyles;
+}+
+}+
Now, go into the Bindings tab on the calendar page, double click the calendar binding, and specify the column you've defined as the calendar's Provider in the Tags dropdown.
Should show colors.

How do I create a vertical side menu with its own styling separate from the horizontal bar above it?

Hello. I need assistance in styling my side menu. I would like for it to have a different style than the horizontal bar that is above it. I would like that the side menu have a black background and with white text vertically aligned to the left. But I would also like that the mouse's arrow to turn into a hand when it touches the letters instead of during the entire width of the background. When I began styling the text, everything aligned fine until I added the links in html code. When I added the <a> tag and created a link to another page, the text goes from the left to the center of the black box. And the entire width is a link rather than just the words. To correct this, I tried renaming the div tag containg the menu. I tried renaming the ul tag. And I tried renaming the li tag and changing the declarations. None of these ideas worked. I thought about changing the <a> tag in the head of the document, but that didn't change the styling either. I also tried creating the black background by inserting a black box as a background image with the links over top of the image. It didn't work. I would appreciate your assistance.   I will supply the coding if anyone is interested in looking at it. Thank you.
Nora.

I can post a link to the page. But I will need to upload it. It will take a day to show. But after I wrote to you. I began working with creating additional a:link styles. I was able to create a shortened clickable area of one the words in the vertical menu. Your advice reinforced what I have learned. The following code shows that I started to make different styles of the a:link for each word on the vertical menu. I think that this will work. To indicate the different a:link style I used bold letters . Thank you very much.
html:
<div class="side_menu_nav">
     <ul class="side_menu">
          <li class="side_menu"><a href="still image.html">STILL IMAGE</a></li>
          <li class="side_menu_video"> <a href="video.html">VIDEO</a></li>
          <li class="side_menu" ><a href="animation.html">ANIMATION</a></li>
          <li class="side_menu" ><a href="website.html">WEBSITE</a></li>
     </ul>
</div>
CSS:
.side_menu_nav {
    margin-top: 100px;
    width: 190px;
    height: 230px;
    background-color: #F63;
    font-size: 18.5px;
    z-index: 5;
    font-family: Arial, Helvetica, sans-serif;
side_menu ul {
    list-style-type: none;
    padding-left: 10px;
side_menu li {
    display: list-item;
.side_menu a:link {
    text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 190px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
    width: 120px;
.side_menu_video a:link {
   text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 65px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
.side_menu a:visited {
    color: #FFF;
    background-color: #000;
.side_menu a:hover {
    color: #CCC;
.side_menu a:active   {
    color: #000;/*text*/

Error in Simple mx Component Styling?

Like many, I am finding the behavior of CSS namespaces in Flex 4 very frustrating.
I have a very simple example which is not working. I hope I'm missing something!
I have a SWC with a defaults.css file. The CSS file is setting the style for Alert using the following:
@namespace "http://www.adobe.com/2006/mxml";
Alert
backgroundColor: #333333;
borderColor:#555555;
color: #ff0000;
backgroundAlpha:0.9;
borderAlpha:1;
buttonStyleName: Button;
paddingBottom: 8;
The namespace is set as you can see. I have also tried this by specifying "mx". The Alert box does not get styled, not even the background color gets set.
What am I missing? I am using the Alert in Actionscript using Alert.show. This worked fine in Flex 3.

Alrighty, I've got a Flex Library project compiling a SWC containing a defaults.css file, with the following:
@namespace "library://ns.adobe.com/flex/mx";
Alert
backgroundColor: #333333;
borderColor:#555555;
color: #ff0000;
backgroundAlpha:0.9;
borderAlpha:1;
buttonStyleName: Button;
paddingBottom: 8;
Then amidst some Actionscript ...
Alert.yesLabel = "Hi";
Alert.noLabel = "Bye";
Alert.buttonWidth = 80;
Alert.show("Hello World?", "Close", Alert.YES | Alert.NO | Alert.CANCEL, ApplicationUI.instance);
Pretty basic, just can't get style working on the Alert at all. It is working for Button, but not for the button's background. If you have a simple example of it working, that's be perfect!
Thanks,
-Patrick

Inserting styled table in a left floated DIV causes dropdown of right floated DIV

Seems fine without the table see http://www.fearlessselling.net/index.html
But adding a styled table bumps right side DIV down
http://www.fearlessselling.net/index2.html
Are the two table and .bordertable CSS styles in conflict with each other?
http://www.fearlessselling.net/fearless.css
Your wisdom willl be appreciated.

Running your css file through the w3schools validator found a few lines with errors (an empty definition for background-color and an !important)
But I think the main difficulty is one of simple math...your widths are adding up to not fit next to each other.
Do a study of your box here...add up your borders, your widths, and your paddings. I suspect you will find the difficulty there.
Z

How to use Spry validation with link styled submit buttons..??

I'm working with a theme package that comes with a bunch of button styles that work with basic links. For example:
<a href='page.html' class='small-button smallblue'><span>Button Label</span></a>
I've got a basic form setup with Spry validation, but the submit button needs some styling to make it look nice with the site. Since there are already styles ready for me to turn links into buttons I figured I'd use the same thing for my submit buttons.
To accomplish that, I'm using the following javascript...
<script type="text/javascript">
function submitForm() {
    document.getElementById("form_name").submit();
</script>
And then I'm updating my submit button to something like this...
<a href='javascript: submitForm()' class='small-button smallblue'><span>Button Label</span></a>
When I do this, the form submits as expected, but the Spry validation doesn't work. Is there a way I can make the Spry stuff work with these types of buttons? I know I could create separate styles for the submit buttons themselves, or I could use an image type button, but I'd really like to figure out how to get these existing styles to work for me since the theme already has so many of them done for me.
Any information on this would be greatly appreciated. Thanks!

Save yourself a lot of trouble and style the normal submit button as per
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<style>
.Standout {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 16px;
    background-color: #CC0000;
    font-weight: bold;
    border-style: none;
    padding-top: 6px;
    padding-bottom: 5px;
    padding-right: 64px;
    padding-left: 64px;
    letter-spacing: 1px;
.Standout:hover {
    background-color: #000000;
</style>
</head>
<body>
<form action="" method="get" name="myform">
<span id="sprytextfield1">
<label for="text1"></label>
<input type="text" name="text1" id="text1">
<span class="textfieldRequiredMsg">A value is required.</span></span>
<input name="input" type="submit" class="Standout">
</form>
<script>
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});
</script>
</body>
</html>
Gramps

How can i add css styling to all elements within a symbol.

How can i add css styling to all elements within a symbol.
For instance.
If i have a symbol call "data" and within this i have 4 elements called 1,2,3,4 how do i add styling to all these elements without having to re-write code for each element.
I know i can style a symbol called "data" by :
sym.$("data").css("font-family", "baumans, sans-serif", "font-size", "15px");
...But this does not style the content of the elements 1,2,3 and 4
If i were using standard CSS and HTML then all div's within a div called "data" would be styled the same.
help "my friends of the code"

Hi Justin,
1) You have a syntax error here: sym.$("data").css("font-family", "baumans, sans-serif", "font-size", "15px");
sym.$("data").css({ "font-family": "baumans, sans-serif", "font-size": "15px"} ); // correct
sym.$("data").css( "font", "15px baumans, sans-serif" ); //correct
2) Then, loading the jQuery file is not required. You can create a class or change tags.
How to add a class:
Changing tags:
You've got 2 demo files (Edge 5.0) here: class or tag.zip - Box

Styling thumbnails

Hi,
Hope this finds you well.
I am new to dreamweaver. As a test exercise, I am putting some thumbnails on a page in the footer. I would like to space them out properly so there is enough space between them and so they look good and align them right.
I'm assuming I do this in CSS Styles. If so, how?
I appreciate your time and look forward to hearing back from you soon.

I just created the footer as a div. I've been taught to enter the images first and then style them afterwards.
That's what I call putting the cart a little ahead of the horse...   I grabbed a 2-column CSS layout from this site (watch the screencast to see how it works): http://www.ez-css.org/css_templates
I added an unordered list to the #footer division.
Inserted some image placeholders.
Styled the #thumbnails list with CSS.
Copy and paste the following code into a new, blank HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>starter 2A: Two columns with header and footer, sidebar on the left hand side, main content comes last</title>
<style type="text/css">
/* 2009 - 2010 (c) | ez-css.org
* ez-start-2B :: version 1.0 (03142010)
* Two columns with header and footer, sidebar on the left hand side, main content comes last.
* You should replace the following rule with your own reset or base styles sheet
* visit: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling
margin: 0;
padding: 0;
* To set the width of the main wrapper
#wrapper {width: 750px;}
* You can use this wrapper for the faux-column technique
* Check http://www.alistapart.com/articles/fauxcolumns/
#body {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #555;
border-top:1px solid #555;
* This element needs a width
#aside {
width: 30%;
padding: 15px 15px 15px 0;
* Unlike the first first column, this element does *not* need a width
#article {padding: 15px 0 15px 15px;}
Below this comment are the core rules, there should be no need to edit any of them
* auto-centering in IE 5
* we reset this value in the next rule so content is left aligned.
body {text-align: center;}
* margin "auto" is to center this element (we set the width in a separate rule near the top of this styles sheet).
* "text-align" is to reset the declaration from "body".
* "inline:block" is to create a block-formatting context (the "width" does that in IE).
#wrapper {
margin-right: auto;
margin-left: auto;
text-align: left;
display: inline-block;
* this is the clearfix method
* we rely on this to contain floats in these elements
#header:after,
#body:after,
#footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
* hacks for IE
* "min-height" triggers "hasLayout" in IE 7,
* "height" is the trigger for IE 5 and 6.
#header,
#body,
#article,
#footer {min-height: 0;}
* html #header,
* html #body,
* html #article,
* html #footer {height: 1%;}
* this element must create a new block formatting context.
* by default, we rely on "overflow:hidden", but if this creates an issue with your design, then apply to this element one of the following rules
* ez-oa
* ez-dt
* ez-it
* ez-tc
* ez-ib
#article {overflow: hidden;}
* rules to apply to the second column (#article) if the styling above (overflow:hidden) creates issues with your design
.ez-oa {overflow: visible; overflow: auto;}
.ez-dt {overflow: visible; display: table;}
.ez-it {overflow: visible; display: inline-table;}
.ez-tc {overflow: visible; display: table-cell;}
.ez-ib {overflow: visible; display: inline-block;}
* 1st column
* the negative margin is to allow the border of the two columns to overlap
#aside {
float: left;
margin-right: -1px;
* the following fixes the "3px jog bug"
* html #aside {margin-right: -4px;}
***   The above are core rules, there should be no need to edit any of them    ***
/***BEGIN THUMBNAILS**/
#thumbnails ul,
#thumbnails li {
list-style:none;
margin:0;
padding:0;
#thumbnails li {
float:right;
margin-left: 10px;
#thumbnails img {
padding: 10px;
border: 1px solid silver; /**optional border**/
</style>
</head>
<body>

<div id="wrapper">
<div id="header">
<h1>#header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis.</p>
</div>
<div id="body">
<div id="aside">
<h2>1: #aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
</div>
<div id="article">
<h2>2: #article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
</div>
</div>
<div id="footer">
<h2>#footer</h2>

<ul id="thumbnails">
<li><img src="" alt="" name="thumbnail1" width="22" height="22" id="thumbnail1" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail2" width="22" height="22" id="thumbnail2" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail3" width="22" height="22" id="thumbnail3" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail4" width="22" height="22" id="thumbnail4" style="background-color: #999999" /></li>
<li><img src="" alt="" name="thumbnail5" width="22" height="22" id="thumbnail5" style="background-color: #999999" /></li>
</ul>

<p>Some footer text</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Styling fonts in Mail

Hi
Recently my Mail application stopped allowing me to style fonts. Its not a big issue really but it should work, and it used to, now it doesn't.
I can copy and paste styled fonts from older emails. No problem.
However if I want to say make a word bold in Arial to highlight it I get nothing, sometimes it goes smaller instead.
Then again if I try to change the size the word will increase indefinately each time I try it. or instance repeatedly selecting a point size of 11.
Why is this? I'm running regular updates from apple, but none have resolced the problem.
Craig

hello?
is there a solution?

Comics balloon - styled tooltips?

Hi, I am making a JApplet for a game, and so far I am using coloring of the component if the user doesn`t do something as he/she is supposed to, i.e if he/she doesn`t enter a player name in the text field, it colors red, I was thinking is it possible to create sort of a pop-up comics balloon styled tooltip when there is a problem with the user`s input. I`ve done a google search but no luck. Any ideas? Thanks in advance.

I solved this by creating a Popup, sticking a JTooltip inside it and making it visible.
Thanks anyway :)
Gili

LegendItem styling

Similar Messages

Maybe you are looking for