Cascades label background color.

Hello

Is it possible to set the background color of the label? I would like to simulate a highlight on some of my labels but can't find anything in the docs that can do.

Thank you!

It is possible to style HTML text (I never got any work), but if you put the label in its own container, you can then set the background for the container.

Container {
   id: bunchOLabels
   Container {
      background: Color.Yellow
      Label {
        text: "Yellow"

      }
   }
   Container {
      background: Color.Blue
      Label {
        text: "Blue"
      }
   }
}

Tags: BlackBerry Developers

Similar Questions

label background color

How can I set the background color of my TextFormat?

Want just a white background.

Thank you

Hey,.

to set the background to your label, you can use the graphics software. Use the following sample code as a guide. It creates a red background to the text. Also note that I've added 5 pixels for the height and width of the label size to accommodate the odd adddd of margin to the label object:
```
var myLabel:Label = new Label();

myLabel.text = "I should have a background color to me";

myLabel.setSize(myLabel.textWidth + 5, myLabel.textHeight + 5);

myLabel.graphics.beginFill(0xFF0000);
myLabel.graphics.drawRect(0,0,myLabel.width, myLabel.height);
myLabel.graphics.endFill();

addChild(myLabel);
```
Hope that helps. Good luck!

Background color of bookmarks

I got the stylish Addon for FF and managed on the base to get the color to the bars, I like but the current bookmark menu back color I can't change the background and the color of the gray menu bar is only correct color of #333333 when it blurry

I musty red picture with cirle around the areas I want to change the color, I know it is possible that I was using LavaFoxV2 in the years of the reasons he brand the black box, but I want to use the default schema of FF I want just the area I marked in red to be darker.
```
#navigator-toolbox {
  background-color: #333333 !important;
}

.menubar-text,
#toolbar-menubar .toolbarbutton-text,
.tabbrowser-tab .tab-label {
  color: #333333 !important
}
```
This is the code I use to get the colors above in the menu bar

This should cover each of them:
```
#menubar-items menu menupopup * {
  background-color: #DDDDDD !important;
  color: #333333 !important;
}
```

Cannot delete the background color of the icons on the desktop in XP.

I'm not able to remove the background color of the icons on the desktop in XP.

I tried the following steps with no luck.

1 Control Panel / System / Advanced / Performance tab / button settings and tick: shadows fall to use the desktop icon labels

2. display properties-> Desktop-> Desktop Customize-> Web-> "Lock desktop items" and "my current Home Page" is not checked.

Any suggestion would be appreciated...

Thanks in advance.

Naveen

These links should help you:

http://www.TomsHardware.com/Forum/25340-45-unable-remove-shadow-desktop-icons-Windows

http://www.geekyard.com/OS/Windows/how-to-remove-desktop-icon-background-color/

Can we change the background color of the application?

I tried to find a way to set a global style. If I could set the background color of the entire application, it'd save me from having to apply that color on every page.

Setting the background color of a container in a ScrollView, also reveals a white background when you "too scroll' view. I would like to eliminate it.

Hello level32,.

Maybe if you set a common qml file have it set on other pages, as in the example of cascadescookbookqml, available on GitHub https://github.com/blackberry/Cascades-Samples/tree/master/cascadescookbookqml

You will find a file RecipeContainer.qml defined on the record of the Commons and all other pages using it.

I hope this helps.

How can I change the background color of a button in .qml

Hello, everyone! I have a problem now.

When I define a componnet in QML button, it has a white background color by default. While I want to change the background color, for example red.
```
   Container {
        layout: StackLayout {}
        background: backgroundPaint.imagePaint
        attachedObjects: [
            ImagePaintDefinition {
                id: backgroundPaint
                imageSource: "asset:///images/background.png"
            }
        ]
        Button{
            text: "button"
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
```
I read the reference that write it a clickable button with a height fixed and the visual aspect of the button is predefined and cannot be changed and so forth... look herehttp://developer.blackberry.com/cascades/reference/bb__cascades__button.html

I tried this way to change the theme of the application. But I failed! See more details here http://developer.blackberry.com/cascades/reference/bb__cascades__themesupport.html

How can I achieve this? Please give me help. Thank you in advance. Please forgive my bad English

Hello

Button style is predefined according to me. Dark theme can be activated in the bar - descriptor.xml, but it is applied to the application on a global scale and affect all other controls as well.

You can use a container with background image instead of a button. Example code:

http://supportforums.BlackBerry.com/T5/Cascades-development/button-with-a-background-image/m-p/21489...

[Issue] Make WebView with transparent background instead of the white background color

I'm developing something in Cascades and use WebView control.

By default, the background of WebView is white.

I put WebView in a container.

I want WebView has no white color background and need to be transparent and show the image in the container.

Anyone has same experience?

Thank you.

Joe

Inside your Webview, just set:

WebView {}
Settings.Background: Color.Transparent
}

Change the background color of RadioButton

Hello

How to change the selected RadioButton background color?

It shows the blue when selected.

I tried all States using the setTextFormatForState() method.

but it never worked.

The method seems to only change the format of text label, but not th 'button' (in the background) itself.

Thank you.

Hey,.

so that you can change the appearance of the button under different States (selected or deselected), you must change the button skin. to do this you need to create your own custom skin of the class who extends the class . UISkin here is an example of how to change skin:

http://www.BlackBerry.com/developers/docs/airapi/1.0.0/QNX/UI/skins/package-detail.html

also, here is a link to the list of the Active of the RadioButton class (background colors and etc.):

http://www.BlackBerry.com/developers/docs/airapi/1.0.0/skins-detail.html#rounded

This is the same skin as a regular button its called RoundedButtonSkinWhite.

to apply the skin to the button of your radio, you must call the setSkin method that accepts only classes that extend the UISkin class.

hope that helps. Good luck!

Problem to get the background color

Mr President, in my code, I wasn't able to use fully all the width of the screen,

This is my code

public class HorizontalField extends VerticalFieldManager
{
   HorizontalFieldManager sd=new HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH);
   HorizontalFieldManager r1=new HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH);
   MySeparatorField ds=new MySeparatorField();
   Font fnt,fntv;
    HorizontalField()
    {
       fnt = this.getFont().derive(FontFamily.SCALABLE_FONT, 14);
       fntv = this.getFont().derive(FontFamily.SCALABLE_FONT, 11);
       r1.setFont(fntv);
       /*---------------------Heading-----------------------------------*/
       DateField dd=new DateField("Date");

       dd.setFont(fnt);
       sd.add(dd);
      /*------------------*/
       MyLine s=new MyLine();
       sd.add(s);
       Desp d1=new Desp("Description");
       d1.setFont(fnt);
       sd.add(d1);      

       /*_________________*/
       MyLine s1=new MyLine();
       sd.add(s1);

       Amt d2=new Amt("Amount");
       d2.setFont(fnt);
       sd.add(d2);
       add(new SeparatorField());
       add(sd);
       add(new SeparatorField());

           DateField dfr=new DateField("13.08.09")
           {
               public void paint(Graphics g)
               {
                    g.setBackgroundColor(Color.RED);
                    g.clear();
                    super.paint(g);
               }
           };
           r1.add(dfr);
           MyLine sr=new MyLine();
           r1.add(sr);
           Desp dr=new Desp("Reent")
           {
               public void paint(Graphics g)
               {
                    g.setBackgroundColor(Color.RED);
                    g.clear();
                    super.paint(g);
               }
           };
           r1.add(dr);
           MyLine sra=new MyLine();
           r1.add(sra);
           Amt amtr=new Amt("5000")
             {
               public void paint(Graphics g)
               {
                    g.setBackgroundColor(Color.RED);
                    g.clear();
                    super.paint(g);
               }
           };
           r1.add(amtr);
           add(r1);
           add(new SeparatorField());

       }

    }

 class DateField extends LabelField
{
     DateField(String s)
    {
        super(s,LabelField.LEFT);
     }
    public  int getPreferredWidth()
    {
        return Display.getWidth()*2/10;
    }

}

  class Desp extends LabelField
{
     Desp(String s)
    {
        super(s,LabelField.RIGHT);
     }
    public  int getPreferredWidth()
    {
        return Display.getWidth()*5/10;
    }

}

  class Amt extends LabelField
{
    Amt(String s)
    {
        super(s,LabelField.RIGHT);
     }
    public  int getPreferredWidth()
    {
        return Display.getWidth()*4/10;
    }

}

MyLine code is

public class MyLine extends LabelField
{
    int width,height;

    ButtonField dd;
    MyLine()
    {
        width=1;
        //height=200;
    }
     MyLine(int w)
    {
        width=w;
        //height=200;
    }

     public int getPreferredWidth()
        {
            return width;
         }

     public void paint(Graphics g)
            {
                   // g.setBackgroundColor(Color.BLUE);

                 g.drawLine(0,0,0,70);
            }
}

When I call this HorizontalField I get the result, but in the amount column (i.e. red) background color I get half of this label, I don't know what problem I did

Thank you

The problem is in your calculation of width.

Your should calculate your width in such a way that (approximate):

Display.getWidth () = DateField width, width PED, Amt width + 2 * MyLine width;

Furthermore, a solution may be simply change your constructor Amt class as below:

        Amt(String s)        {                   super(s,LabelField.RIGHT | Field.USE_ALL_WIDTH);        }

Concerning

Bika

How to change the background color

How to change the background color of the label field, how to do it thanks

I can change the color of labelfield, but I want to change the background,

How can I do this

Thank you.

I do not know mantaker do not want to forget the call to super...

public void paint (Graphics gs) {}

gs.setBackgroundColor (0x00FF0000); red background

GS. Clear();

Super.Paint (GS);

}

How to change the background color of TabbedPane?

Hi all

Is there any property to change the background color of the tabbed pane, IE change the black color by default tabbedpane to any other color or background image custom like this Ant. give me a link or idea to develop.

Thanks in advance.

Kind regards

Lakshman K

Currently, there are light and dark themes available for user interfaces. Other than you can change the background color since it's the tide with the theme of the brand. Here's more info on the themes of the interface user of Blackberry.

https://developer.BlackBerry.com/native/documentation/Cascades/UI/themes/

Change the background color of the banner in the theme of the APEX 25

Hi guys,.
I'm changing the background color of the banner in the theme of the APEX 25 (in white).
Oracle.apex.com: Application Express 4.2.5.00.08
Theme/UI: 25. Reactive blue
Page template: A level Tabs - no side bar
Using Internet Explorer 8
I have created a sample in oracle.apex.com too, see below for credentials
What I've done so far:
1. create a file named orange.css with a single line:

hgroup {background: white ;}}

Downloaded this css file via:
Components shared = > Cascading Style sheets
2 then reference this CSS via the shared components = > templates = > edit the template Page = > a level Tabs - No. Sidebar = > definition = > header
Added this line before the < / head > tag:
< link rel = "stylesheet" href = "" #WORKSPACE_IMAGES #orange.css "type =" text/css">"
Then changed:
< h1 > < a href = "" #HOME_LINK # "id ="uLogo"> #LOGO # < /a > < / h1 >"
VOX
< hgroup > < a href = "" #HOME_LINK # "id ="uLogo"> #LOGO # < /a > < / hgroup >"
Although the CSS works well, I have two questions:
1. the sides of the banner are blue instead of white
2. the disconnect next to the user name button is hidden and only appears when you browse on
Does anyone know how to solve these problems?
Here is a link with the model of the application:
https://Apex.Oracle.com/pls/Apex/f?p=4500:1000:115959518208631
Workspace: ORANGE
User: guest
Password: 01range
My email: [email protected]
Much appreciated!

Jeroen van Meenen wrote:

Then changed:

#LOGO #.

VOX

#LOGO #.

You should not use hgroup here. Leave that as a h1 element.
- hgrouphas been removed from the W3C HTML specification.
- With the help of hgroup of this way is non-compliant because it does not contain at least one child h1-h6 element.
Although the CSS works well, I have two questions:

1. the sides of the banner are blue instead of white

The original blue background of the theme is actually applied to the containing header element, not the h1 (or hgroup in your example), it is the rule that must be overridden:
```
header#uHeader {
  background: #fff;
}
```
2. the disconnect next to the user name button is hidden and only appears when you browse on

The link to logout of the theme is white to contrast with the original blue background. What should be replaced by a dark to be visible on the new white foreground color, and a contrasting hover appearance applied:
```
div.userBlock a:link,
div.userBlock a:visited {
  color: #004F7C;
}
div.userBlock a:hover {
  background-color: #b6ceed;
  color: #fff;
}
```

How to change the background color of a line when you have the selection of cells in tableview?

I have a tableview and I chose the selection of cells. How can I change the background color of a line, if I select a cell?

The usual example using:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.BooleanBinding;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener.Change;
import javafx.collections.ObservableList;
import javafx.collections.ObservableSet;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TablePosition;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class RowHighlightedCellSelectionTableViewSample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        scene.getStylesheets().add(getClass().getResource("selected-row-table.css").toExternalForm());
        stage.setTitle("Table View Sample");
        stage.setWidth(450);
        stage.setHeight(500);

        final Label label = new Label("Address Book");
        label.setFont(new Font("Arial", 20));

        final TableView table = new TableView<>();
        final ObservableList data =
            FXCollections.observableArrayList(
                new Person("Jacob", "Smith", "[email protected]"),
                new Person("Isabella", "Johnson", "[email protected]"),
                new Person("Ethan", "Williams", "[email protected]"),
                new Person("Emma", "Jones", "[email protected]"),
                new Person("Michael", "Brown", "[email protected]")
        );

        table.getSelectionModel().setCellSelectionEnabled(true);
        table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

        final PseudoClass selectedRowPseudoClass = PseudoClass.getPseudoClass("selected-row");
        final ObservableSet selectedRowIndexes = FXCollections.observableSet();
        table.getSelectionModel().getSelectedCells().addListener((Change change) -> {
            selectedRowIndexes.clear();
            table.getSelectionModel().getSelectedCells().stream().map(TablePosition::getRow).forEach(row -> {
                selectedRowIndexes.add(row);
            });
        });

        table.setRowFactory(tableView -> {
            final TableRow row = new TableRow<>();
            BooleanBinding selectedRow = Bindings.createBooleanBinding(() ->
                    selectedRowIndexes.contains(new Integer(row.getIndex())), row.indexProperty(), selectedRowIndexes);
            selectedRow.addListener((observable, oldValue, newValue) ->
                row.pseudoClassStateChanged(selectedRowPseudoClass, newValue)
            );
            return row ;
        });

        TableColumn firstNameCol = new TableColumn<>("First Name");
        firstNameCol.setMinWidth(100);
        firstNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));

        TableColumn lastNameCol = new TableColumn<>("Last Name");
        lastNameCol.setMinWidth(100);
        lastNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));

        TableColumn emailCol = new TableColumn<>("Email");
        emailCol.setMinWidth(200);
        emailCol.setCellValueFactory(new PropertyValueFactory<>("email"));

        table.setItems(data);
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);

        final VBox vbox = new VBox();
        vbox.setSpacing(5);
        vbox.setPadding(new Insets(10, 0, 0, 10));
        vbox.getChildren().addAll(label, table);

        ((Group) scene.getRoot()).getChildren().addAll(vbox);

        stage.setScene(scene);
        stage.show();
    }

    public static class Person {

        private final StringProperty firstName;
        private final StringProperty lastName;
        private final StringProperty email;

        private Person(String fName, String lName, String email) {
            this.firstName = new SimpleStringProperty(fName);
            this.lastName = new SimpleStringProperty(lName);
            this.email = new SimpleStringProperty(email);
        }

        public String getFirstName() {
            return firstName.get();
        }

        public void setFirstName(String fName) {
            firstName.set(fName);
        }

        public StringProperty firstNameProperty() {
            return firstName ;
        }

        public String getLastName() {
            return lastName.get();
        }

        public void setLastName(String fName) {
            lastName.set(fName);
        }

        public StringProperty lastNameProperty() {
            return lastName ;
        }

        public String getEmail() {
            return email.get();
        }

        public void setEmail(String fName) {
            email.set(fName);
        }

        public StringProperty emailProperty() {
            return email ;
        }
    }
}

And then the selected line - table.css:

.table-line-cell: {selected row

-fx-background-color: lightskyblue;

}

Change the background color of the theme 25

4.2.1
Hello
If someone has changed the background color of the page 25 of the theme which is white, could you please confirm how this was done. Looks like the sheet is a sort of a DIV and not the background as such. Basically, the entire page is white, including the tab, mused to creates a custom CSS and who calls in the model once the CSS is called, so that this portion of color can be changed.
All of the suggestions.
Thank you
Ryan

ryansun wrote:

4.2.1

Hello

If someone has changed the background color of the page 25 of the theme which is white, could you please confirm how this was done. Looks like the sheet is a sort of a DIV and not the background as such. Basically, the entire page is white, including the tab, mused to creates a custom CSS and who calls in the model once the CSS is called, so that this portion of color can be changed.

The required CSS is:
```
/* Page body */
div#uBodyContainer {
  background-color: #f0f4fa;
}
/* Active tab */
header#uHeader nav ul.uMainNav li a.active {
  background-color: #f0f4fa;
}
```
4.2 these replacements at the level of the model can be included in the property section of Style sheet cascading in the page template Inline .

Footer now floating in the middle of the page and no background color

Hi all
Worked on it for days with no luck. I hope someone can find the stupid mistake, because I know there must be something stupid, but it's driving me around the bend! The page has always been very well until I've recoded part of the body (the four columns with titles, pictures and text) in order to facilitate the 508 compliance. Since then, the orange footer which was firmly inside began floating to halfway to the top of the page and the orange background color disappeared.
I went by my code line-by-line delimiting each start and end div tag and everything is fine. Here is a screenshot of the lower part of the page showing how the footer should look like.
Here is a screenshot of how it looks now in offline mode:
as you can see if all goes well, the footer has lost its orange background and is sitting at halfway to the top of the page.
Here's the HTML code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
" < html lang ="en"XML: lang ="fr"xmlns =" http://www.w3.org/1999/xhtml ">
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
< meta name = "viewport" happy "width = 1100" = >
< name meta = "keywords" content = "Meadows museum, Southern Methodist university, SMU, Dallas, Texas, Algur Hurtle Meadows, The Meadows Foundation, Dr. Mark A. Rogl & aacute;" n, medieval, baroque, tenth in the 20th century Spanish art, 10th to 20th century Spanish art, collection of Spanish art, Spanish painting, Meadows school of art, masterpieces, the great painters of the world, El Greco, Velázquez, Ribera, Murillo, Goya, Miró, Picasso, Juan gray, Renaissance, altarpieces, polychrome wood, Impressionist landscape sculptures, rococo oil sketches, modernist abstractions, sculptures, sculptors of the 20th century , Rodin, Maillol, Giacometti, Henry Moore, David Smith, Claes Oldenburg, James Surls, Santiago Calatrava, Texas artists, Frank Reaugh, Jerry Bywaters, Otis Dozier, Alexandre Hogue, William Lester, exhibitions, education, educational workshops, conferences, interviews of Gallery, seminars, symposium, Museum Shop, golden age of Spain, neo-palladien structure, Jones Great Hall, founder, room show, Restaurant Gates, Moss Chumley Award, William B. Jordan internships , Fortuny, Sorolla, Steve Mumford, Don Quijote, tapestries of the eighteenth century, Roger Winter, Stanley Marcus, Mark Lemmon, the Barrett Collection, Mexican art, DeGolyer library, painting of Greek vase, Juan van der Hamen y the & oacute; n, Division of film and Television, music and dance, performing artists art studio, tales, artist demonstrations, activities, community education program of MLA discussion and book club, master courses in the Liberal Arts, Spanish, corporate membership, membership Museum, Museo Nacional del Prado, Prado Museum designer = Pam Muirheid ">"
< name meta = "description" content = "The Meadows Museum is committed to the advancement of knowledge and the understanding of art through the collection and interpretation of the works of the highest aesthetic and historical significance, as evidenced by the founding collection of Spanish art" >
< name meta = "robots" content = "index, follow" >
< title > home - Meadows Museum < /title >
< name meta = "google-site-verification" content = "WJGKz4uefsWUilZUdPa5ggL23MSk1IsHeLMzUz3B1QE" / >
< style type = "text/css" >

< / div > <! - end supportustitle - >
< div class = 'push' > < / div >
< / div > <!-end part of the body->
<! - start the footer - >
< div id = "footer" >
<! - begin searchbar - >
< div id = "search bar" >
< form role = "Search" style = "margin-right: 0px;" margin-top: 12px; float: left; width: 265px; "" action = " http://Search.FreeFind.com/find.html " method = "get" accept-charset = "utf - 8" target = "_self" > ""
< input type = "hidden" name = "If" value = "47230699" >
< input type = "hidden" name = "pid" value = "o" >
< input type = "hidden" name = "n" value = "0" >
< input type = "hidden" name = "_charset_" value = "" >
< input type = "hidden" name = "bcd" value = "" & #247; ">"
< input type = "text" name = size "query" = "15" style = "border: thin" >
< input aria-label = "Search" type = "submit" value = "Search" >
< / make >
< br / >
< br / >
" < a href =" https://www. "" Facebook.com/MeadowsMuseumDallas "> < img src="images/symbols/facebook_white.png "alt ="like us on Facebook"title ="like us on Facebook "width ="28"height ="28"/ > < /a > < a href =" https://Twitter.com/MeadowsMuseum "> < img src="images/symbols/twitter_white.png "alt ="Follow us on Twitter"title ="follow us on Twitter"width ="25"height ="25"/ > < /a > < a href =" https://blog. "" SMU.edu/tabularasa/ "> < img src="images/symbols/blog_white.png "alt ="Museum blog"title ="Museum blog"width ="23"height ="23"/ > < /a > < a href =" http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw is "> < img src="images/symbols/e-mail_white.png "alt ="write us"title ="Write to us"width ="27"height ="25"/ > < /a > < a href =" membership.htm "> < img src="images/symbols/JOIN.png "alt = 'join the Museum' title = width 'join the Museum' = height"38"="32 ". "> < /a > < a href =" https://www.google.com/maps/preview#! q = 5900 + Bishop + Blvd., Dallas + TX 75205 & data =! 1 m 4! 1 m 3! 1 024 d10476!2d-96.785088!3d32.837337!4m10!1m9!4m8!1m3!1d107264!2d-96.783199!3d32.845558!3m2!1i1! 2i768! 4f13.1 "> < img src="images/symbols/google-maps-iphone-icon.png "alt ="find us on Google maps' title = "Find us on Google maps" width = "24" height = "24" / > < /a >
< / div > 
<! - begin admissionhours - >
< div id = "admissionhours" >
Opening hours: Tue - sat 10:00 - 17:00.
Thursday until 21:00,
Sun 01:00 - 17:00
Closed on Monday.
Admission: $10 adults, $8, seniors 65 & amp; Over, $4, non - EMS students. Free: Members of the Museum, children under 12, SMU faculty/staff/students. Eve of free game after 17:00 < br / >
< / div > <! - end admissionhours - >
<! - begin adresstel - >
< div id = "addresstel" >
Meadows Museum, 5900 Bishop Blvd., Dallas, TX 75205, < br / >
"P.O. Box 750357, Dallas, TX 75275-0357 < img src="images/index/Untitled-1.png "alt =" "width ="6"height ="10"/ > 214.768.2516 < br / >"
"" " < a href =" contacts.htm"class ="white"" > e-mail < /a > < img src="images/index/Untitled-1.png" alt = "" width = "6" top = "10" / > < a href = "site_map.htm" class = "white" "> < /a > Site map < img src="images/index/Untitled-1.png "alt =" "width ="6"top ="10"/ > site created by < a href =" http://www.mypawprint.com "class ="white"> My Pawprint Productions < /a > < br / > "
© 2015 meadows Museum
< / div > <! - end adresstel - >
< / div > <! - end of footer - >
< / div > <! - end wrapper - >
< / body >
< / html >
and here's the layout.css file:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
a: link {color: #656252; text-decoration: underline ;}}
a: active {color: #656252; text-decoration: underline ;}}
a: visited {color: #656252; text-decoration: underline ;}}
a: hover {color: #656252; text-decoration: none;}
}
a.White:Link {color: #FFFFFF; text-decoration: underline ;}}
Elder: active {color: #FFFFFF; text-decoration: underline ;}}
a.White:visited {color: #FFFFFF; text-decoration: underline ;}}
a.White:hover {color: #FFFFFF; text-decoration: underline ;}}
/ * Smartphones (portrait and landscape)-* /.
@media screen alone
and (min-width: 320px)
and (max-width: 480px) {}
/ * Styles * /.
}
/ * Smartphones (landscape)-* /.
@media screen alone
and (min-width: 321px) {}
/ * Styles * /.
}
/ * Smartphones (portrait)-* /.
@media screen alone
and (max-width: 320px) {}
/ * Styles * /.
}
/ * iPads (portrait and landscape)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1100px) {}
/ * Styles * /.
}
/ * iPads (landscape)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1100px)
and (orientation: landscape) {}
/ * Styles * /.
}
/ * iPads (portrait)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait) {}
/ * Styles * /.
}
/ * Desktops and laptops-* /.
@media screen alone
and (min-width: 1224px) {}
/ * Styles * /.
}
/ * Screens * /.
@media screen alone
and (min-width: 1824px) {}
/ * Styles * /.
}
/ * iPhone 4-* /.
@media
only screen and (- webkit - min-device-pixel-ratio: 1.5).
only screen and (min-device-pixel-ratio: 1.5) {}
/ * Styles * /.
}
. Hidden
{position: absolute;}
left:-10000px;
top: auto;
Width: 1px;
height: 1px;
overflow: hidden ;}
an img {}
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
{to header
Width: 1100px;
background-repeat: no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
header a {}
text-decoration: none;
background-image: url (.. / images/index/orange_50th_2011_1100.png);
background-repeat: no-repeat;
background-position: right top;
padding: 0;
display: block;
height: 130px;
text-indent:-700px.
}
header a: focus {}
background-position: right top;
padding: 0;
height: 132px;
text-decoration: none;
display: block;
background-image: url (.. / images/index/orange_50th_2011_1100.png);
background-repeat: no-repeat;
text-indent: 0px;
text-decoration: underline;
color: white;
}
a: focus {}
outline: thin dotted;
outline: 5px auto - webkit-focus-ring-color;
outline-offset:-2px;
}
header b {}
text-decoration: none;
}
H1 {}
height: 75px;
Width: 285px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 50px;
make-weight: normal;
color: #f1efe0;
float: left;
padding-left: 35px;.
padding-top: 75px;
}
H2 {}
height: 51px;
Width: 480px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 25px;
make-weight: normal;
make-style: italic;
float: left;
color: #f1efe0;
padding-top: 99px;
}
H3 {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #666;
height: 25px;
padding-left: 10px;
}
H4 {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 15px;
margin: 25px;
Color: #666666;
}
#logo {}
background-color: #af4d33; / * change the color to match your orange * /.
display: block;
}
{#navbackground}
background-color: #776353; / * change the color to match your Brown * /.
background-repeat: repeat;
}
#nav {}
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
Width: 1100px;
}
.caption {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 11px;
Color: #666666;
margin: 25px;
}
{p}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 13px;
color: #414040;
margin: 25px;
}
.caption {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 11px;
Color: #666666;
margin: 25px;
}
{#wrapper}
background-color: #e2dfcf;
min-height: 100%;
height: auto! important;
height: 100%;
Width: 1100px;
margin-right: auto;
left margin: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
{#wrapper #white
background-repeat: repeat;
padding: 0;
display: block;
height: 10px;
background-color: #FFF;
Width: 2500 px;
}
{#wrapper #slideshow
height: 358px;
background-repeat: no-repeat;
}
{#wrapper #programseventstitle}
Width: 275px;
height: 25px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-weight: normal;
do-variant: normal;
background-color: #e2dfcf;
padding-top: 10px;
}
{#wrapper #newstitle}
Width: 275px;
height: 40px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
vertical-align: middle;
make-weight: normal;
margin: 0px;
background-color: #f1efe0;
padding-top: 10px;
}
{#wrapper #multimediatitle}
Width: 275px;
height: 40px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-weight: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #e2dfcf;
padding-top: 10px;
}
{#wrapper #supportustitle}
Width: 275px;
height: 40px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-weight: normal;
margin: 0px;
background-color: #f1efe0;
padding-top: 10px;
}
#wrapper #bodyArea #photoprogramsevents {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 143px;
}
#wrapper #bodyArea #photonews {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 143px;
}
#wrapper #bodyArea #photomultimedia {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 143px;
}
#wrapper #bodyArea #photosupport {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 143px;
}
#wrapper #bodyArea #programsevents {}
float: left;
background-color: #e2dfcf;
Width: 275px;
height: 350px;
}
#wrapper #bodyArea #news {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 350px;
}
#wrapper #bodyArea #multimedia {}
float: left;
background-color: #e2dfcf;
Width: 275px;
height: 350px;
}
#wrapper #bodyArea #supportus {}
float: left;
background-color: #f1efe0;
Width: 275px;
height: 350px;
}
#wrapper #bodyArea #footer {}
height: 100px;
Width: 1100px;
do-family: Arial, Helvetica, without serif.
do-size: 10px;
background-color: #af4d33;
padding: 0px;
color: #FFFFFF;
background-repeat: repeat;
Clear: both;
}
.footer, .push {}
Clear: both;
}
#wrapper #bodyArea #footer #searchbar {}
height: 70px;
Width: 230px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 12px;
background-color: #af4d33;
Padding: 15px;
color: #FFFFFF;
background-repeat: no-repeat;
float: left;
text-align: left;
Clear: none;
}
#wrapper #bodyArea #footer #admissionhours
{
height: 70px;
Width: 415px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 12px;
background-color: #af4d33;
Padding: 15px;
color: #FFFFFF;
background-repeat: no-repeat;
float: left;
text-align: left;
Clear: none;
}
#wrapper #bodyArea #footer #addresstel {}
height: 60px banner;
Width: 330px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 12px;
background-color: #af4d33;
color: #FFFFFF;
background-repeat: no-repeat;
float: right;
text-align: right;
padding-top: 22px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 15px;
}
{#google_translate_element}
Padding: 25px;
}
HTML {}
overflow - y: scroll;
}
an img {border: none;}
}

Horgykitkat wrote:

What I found after taking on the heights between text boxes, it's that I found myself with lengths of columns of unequal text (alternation of beige areas). So, I created a repeatable jpg with same alternation beiges and put it under the bottom of the bodyArea tag. Again, if there is a better way, please let me know!

A repeated background image 'Fake' columns of the same height is perfectly ok.

It will not work IF your page is sensitive, but it's not so no problem. If it were admissible a better solution would be to take advantage of the css display: table; and display: table-cell;

Regarding your footer background color does not appear I guess you have floating elements in the footer container. If yes then you need clear floating elements that allows the container to footer wrap around the floating elements inside.

Follow these steps using css - overflow: hidden; -on the parent container which has floats inside.

Cascades label background color.

Similar Questions

#LOGO #.

Maybe you are looking for