The width of the container, footer.

Hello, I am a new user of the native SDK, and I write in order to solve several problems that I had to work with containers.

First of all, I created the following structure:

import bb.cascades 1.3

{Page}
{Of container
layout: {StackLayout}
direction: LayoutOrientation.TopToBottom
}
background: Color.White
topPadding: 50.0
{Of container
horizontalAlignment: P
background: Color.White
bottomMargin: 45.0
ImageView {}
ID: logoCht
imageSource: "asset:///logo_cht.png."
Accessibility.Name: "logoCht".
accessibility.labelledBy: [logoCht]
}
}
{Of container
horizontalAlignment: P
background: Color.White
layout: {GridLayout
columnCount: 3
}
ImageButton {}
ID: btnPaquetes
defaultImageSource: "asset:///paquetexdpi.png".
pressedImageSource: "asset:///paquetexdpi.png".
disabledImageSource: "asset:///paquetexdpi.png".
accessibility.labelledBy: [btnPaquetes]
Accessibility.Name: "Boton packages.
onClicked: {}

}
}
ImageButton {}
ID: btnHoteles
defaultImageSource: "asset:///hotelesxdpi.png".
pressedImageSource: "asset:///hotelesxdpi.png".
disabledImageSource: "asset:///hotelesxdpi.png".
accessibility.labelledBy: [btnHoteles]
Accessibility.Name: "Boton Hoteles.
onClicked: {}
                
}
}
ImageButton {}
ID: btndestinos
defaultImageSource: "asset:///destinosxdpi.png".
pressedImageSource: "asset:///destinosxdpi.png".
disabledImageSource: "asset:///destinosxdpi.png".
accessibility.labelledBy: [btndestinos]
Accessibility.Name: "Boton Destinos".
onClicked: {}
                
}
}
}
{Of container
horizontalAlignment: P
background: Color.White
layout: {GridLayout
columnCount: 3
}
ImageButton {}
ID: btnBuscador
defaultImageSource: "asset:///buscadorxdpi.png".
pressedImageSource: "asset:///buscadorxdpi.png".
disabledImageSource: "asset:///buscadorxdpi.png".
accessibility.labelledBy: [btnBuscador]
Accessibility.Name: "Boton Buscador".
onClicked: {}
                
}
}
ImageButton {}
ID: btnVuelos
defaultImageSource: "asset:///vuelosxdpi.png".
pressedImageSource: "asset:///vuelosxdpi.png".
disabledImageSource: "asset:///vuelosxdpi.png".
accessibility.labelledBy: [btnVuelos]
Accessibility.Name: "flights of Boton.
onClicked: {}
                
}
}
ImageButton {}
ID: btnContactenos
defaultImageSource: "asset:///contactenosxdpi.png".
pressedImageSource: "asset:///contactenosxdpi.png".
disabledImageSource: "asset:///contactenosxdpi.png".
accessibility.labelledBy: [btnContactenos]
Accessibility.Name: "Boton Contactenos.
onClicked: {}
                
}
}
}
{Of container
horizontalAlignment: P
background: Color.White
layout: {GridLayout
columnCount: 2
}
bottomMargin: 30.0
ImageButton {}
ID: btnLlamar
defaultImageSource: "asset:///llamarxdpi.png".
pressedImageSource: "asset:///llamarxdpi.png".
disabledImageSource: "asset:///llamarxdpi.png".
accessibility.labelledBy: [btnLlamar]
Accessibility.Name: "bird call".
onClicked: {}
                
}
}
ImageButton {}
ID: btnChat
defaultImageSource: "asset:///chatxdpi.png".
pressedImageSource: "asset:///chatxdpi.png".
disabledImageSource: "asset:///chatxdpi.png".
accessibility.labelledBy: [btnChat]
Accessibility.Name: "bird cat".
onClicked: {}
                
}
}
}
{Of container
background: Color.LightGray
preferredHeight: 150
preferredWidth: 1280
horizontalAlignment: HorizontalAlignment.Fill
layout: {GridLayout
columnCount: 3
}
            
ImageView {}
ID: logoChtFooter
imageSource: "asset:///logo_cht_movil.png."
Accessibility.Name: "logoChtFooter".
accessibility.labelledBy: [logoChtFooter]
}
{Label
text: qsTr ("asdfasdfsdf")
}
ImageView {}
ID: logoIram
imageSource: "asset:///iram.png."
Accessibility.Name: "logoIram".
accessibility.labelledBy: [logoIram]
}
}
}
}

But I can't, is to have the footer at the bottom, because it appears next to the buttons.

Also, I want to know if all of the containers change according with each electronic device and how the containers to get this new size.

Hoping that you will help me soon.

Yours faithfully,

You must create a second container with spaceQuota and verticalAlignment, in this way:

import bb.cascades 1.3

Page {
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        background: Color.White
        topPadding: 50.0
        Container {//This is what you need
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
            verticalAlignment: VerticalAlignment.Fill
            Container {
                horizontalAlignment: HorizontalAlignment.Center
                background: Color.White
                bottomMargin: 45.0
                ImageView {
                    id: logoCht
                    imageSource: "asset:///logo_cht.png"
                    accessibility.name: "logoCht"
                    accessibility.labelledBy: [ logoCht ]
                }
            }
            Container {
                horizontalAlignment: HorizontalAlignment.Center
                background: Color.White
                layout: GridLayout {
                    columnCount: 3
                }
                ImageButton {
                    id: btnPaquetes
                    defaultImageSource: "asset:///paquetexdpi.png"
                    pressedImageSource: "asset:///paquetexdpi.png"
                    disabledImageSource: "asset:///paquetexdpi.png"
                    accessibility.labelledBy: [ btnPaquetes ]
                    accessibility.name: "Boton Paquetes"
                    onClicked: {

                    }
                }
                ImageButton {
                    id: btnHoteles
                    defaultImageSource: "asset:///hotelesxdpi.png"
                    pressedImageSource: "asset:///hotelesxdpi.png"
                    disabledImageSource: "asset:///hotelesxdpi.png"
                    accessibility.labelledBy: [ btnHoteles ]
                    accessibility.name: "Boton Hoteles"
                    onClicked: {

                    }
                }
                ImageButton {
                    id: btndestinos
                    defaultImageSource: "asset:///destinosxdpi.png"
                    pressedImageSource: "asset:///destinosxdpi.png"
                    disabledImageSource: "asset:///destinosxdpi.png"
                    accessibility.labelledBy: [ btndestinos ]
                    accessibility.name: "Boton Destinos"
                    onClicked: {

                    }
                }
            }
            Container {
                horizontalAlignment: HorizontalAlignment.Center
                background: Color.White
                layout: GridLayout {
                    columnCount: 3
                }
                ImageButton {
                    id: btnBuscador
                    defaultImageSource: "asset:///buscadorxdpi.png"
                    pressedImageSource: "asset:///buscadorxdpi.png"
                    disabledImageSource: "asset:///buscadorxdpi.png"
                    accessibility.labelledBy: [ btnBuscador ]
                    accessibility.name: "Boton Buscador"
                    onClicked: {

                    }
                }
                ImageButton {
                    id: btnVuelos
                    defaultImageSource: "asset:///vuelosxdpi.png"
                    pressedImageSource: "asset:///vuelosxdpi.png"
                    disabledImageSource: "asset:///vuelosxdpi.png"
                    accessibility.labelledBy: [ btnVuelos ]
                    accessibility.name: "Boton Vuelos"
                    onClicked: {

                    }
                }
                ImageButton {
                    id: btnContactenos
                    defaultImageSource: "asset:///contactenosxdpi.png"
                    pressedImageSource: "asset:///contactenosxdpi.png"
                    disabledImageSource: "asset:///contactenosxdpi.png"
                    accessibility.labelledBy: [ btnContactenos ]
                    accessibility.name: "Boton Contactenos"
                    onClicked: {

                    }
                }
            }
            Container {
                horizontalAlignment: HorizontalAlignment.Center
                background: Color.White
                layout: GridLayout {
                    columnCount: 2
                }
                bottomMargin: 30.0
                ImageButton {
                    id: btnLlamar
                    defaultImageSource: "asset:///llamarxdpi.png"
                    pressedImageSource: "asset:///llamarxdpi.png"
                    disabledImageSource: "asset:///llamarxdpi.png"
                    accessibility.labelledBy: [ btnLlamar ]
                    accessibility.name: "Boton Llamar"
                    onClicked: {

                    }
                }
                ImageButton {
                    id: btnChat
                    defaultImageSource: "asset:///chatxdpi.png"
                    pressedImageSource: "asset:///chatxdpi.png"
                    disabledImageSource: "asset:///chatxdpi.png"
                    accessibility.labelledBy: [ btnChat ]
                    accessibility.name: "Boton Chat"
                    onClicked: {

                    }
                }
            }
        }
        Container {
            background: Color.LightGray
            preferredHeight: 150
            preferredWidth: 1280
            horizontalAlignment: HorizontalAlignment.Fill
            layout: GridLayout {
                columnCount: 3
            }

            ImageView {
                id: logoChtFooter
                imageSource: "asset:///logo_cht_movil.png"
                accessibility.name: "logoChtFooter"
                accessibility.labelledBy: [ logoChtFooter ]
            }
            Label {
                text: qsTr("asdfasdfsdf")
            }
            ImageView {
                id: logoIram
                imageSource: "asset:///iram.png"
                accessibility.name: "logoIram"
                accessibility.labelledBy: [ logoIram ]
            }
        }
    }
}

Tags: BlackBerry Developers

Similar Questions

  • The foot is moving to the left and is more focused. It's as if he is no longer in the container

    The foot is moving to the left and is more focused. It is as if he is no longer in the container. I don't see the contour of the container. This same thing is happening in two different sites. Can you tell me what I am doing wrong?

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Dragonfly Toy puppies < /title > Home Page

    < style type = "text/css" >

    <!--

    {body

    margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

    padding: 0;

    text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

    color: #FFF;

    do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    do-size: 100%;

    background-color: #000;

    }

    .twoColFixLtHdr #container {}

    Width: 900px; / * margins (in conjunction with a width) auto Center the page * /.

    border: none; / * This setting overrides the text-align: center on the body element. */

    background-color: #000;

    margin-top: 0;

    margin-right: auto;

    margin-bottom: 0;

    left margin: auto;

    }

    .twoColFixLtHdr #header {}

    background-color: #000;

    background-image: url(Images/Header.jpg);

    background-repeat: no-repeat;

    height: 350px;

    Width: 900px;

    padding-top: 0;

    padding-right: 0px;

    padding-bottom: 20;

    padding-left: 0px;

    }

    {.twoColFixLtHdr #sidebar1}

    float: left; / * because this element is floating, it takes a width * /.

    Width: 240px;

    height: auto;

    padding-top: 5px;

    padding-right: 0px;

    padding-bottom: 15px;

    padding-left: 0px;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    background-color: #000;

    text-align: center;

    }

    an img {border: none;}

    }

    a {outline: 0;}

    }

    #sidebar1 a #poodle {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    text-decoration: none;

    }

    #sidebar1 a #maltese {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    }

    #sidebar1 a #yorkie {}

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    cursor: pointer;

    }

    #sidebar1 a #partiyorkie {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #dachshund {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #maltipoo {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    #sidebar1 a #morkie {}

    display: block;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 20px;

    left margin: auto;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

    cursor: pointer;

    }

    {.twoColFixLtHdr #mainContent

    Padding: 20; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.

    background-color: #000;

    height: auto;

    Width: 660px;

    text-align: center;

    margin: 0px;

    float: left;

    }

    .twoColFixLtHdr #footer {}

    background-color: #000;

    Width: 900px;

    padding-top: 0;

    padding-right: 10px;

    padding-bottom: 0;

    padding-left: 10px;

    Clear: none;

    float: none;

    height: auto;

    }

    .twoColFixLtHdr #footer p {}

    margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.

    padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.

    }

    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

    float: right;

    left margin: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page to the left * /}

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}

    Clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    ->

    < / style > <!-[if IE 5] >

    < style type = "text/css" >

    / * Place corrections for IE 5 css box model * in this conditional comment * /.

    .twoColFixLtHdr #sidebar1 {width: 230px ;}}

    < / style >

    <! [endif]--> <!-[if IE] >

    < style type = "text/css" >

    / * place patches css for all versions of Internet Explorer in this conditional comment * /.

    .twoColFixLtHdr #sidebar1 {padding-top: 30px ;}}

    .twoColFixLtHdr #mainContent {zoom: 1 ;}}

    / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.

    < / style >

    <! [endif]-->

    "" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >

    "" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >

    < / head >

    < body class = "twoColFixLtHdr" >

    < div id = "container" >

    < div id = "header" >

    <!-end #header--> < / div >

    < ul id = "MenuBar1" class = "MenuBarHorizontal" >

    < li > < a href = "#" > home < /a > < /li >

    < li > < a href = "#" > Services < /a > < /li >

    < li > < a href = "#" class = "MenuBarItemSubmenu" > bulls & amp; Dams < /a >

    < ul >

    < li > < a href = "#" > poodle Toy < /a > < /li >

    < li > < a href = "#" > Maltese < /a > < /li >

    < li > < a href = "#" > Yorkies < /a > < /li >

    < li > < a href = "#" > party Yorkies < /a > < /li >

    < li > < a href = "#" > Mini Dachsunds < /a > < /li >

    < li > < a href = "#" > Maltipoos < /a > < /li >

    < li > < a href = "#" > Morkies < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "#" > puppy care < /a > < /li >

    < li > < a href = "#" > stories of success < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < div id = "sidebar1″" >

    Puppies < h2 > < / h2 >

    < p > click on your favorite breed < /p >

    "< h2 > < a href ="poodle.htm"onmousedown =" MM_swapImage ('poodle' ", ' Images/poodle_active.jpg', 1)" > < img src = "Images/poodle_link.jpg" alt = "Link to the poodle puppy Page" name = "poodle" width = "200" height = "250" id = "poodle" onmouseover = "MM_swapImage ('poodle',", ' Images/poodle_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="maltese.htm"onmousedown =" MM_swapImage ("Maltese",", ' Images/maltese_active.jpg', 1)" > < img src = "Images/maltese_link.jpg" alt = "Link to the Page of Maltese puppy" name = "Maltese" width = "200" height = "200" id = "Maltese" onmouseover = "MM_swapImage (" Maltese ",", ' Images/maltese_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="yorkie.htm"onmousedown =" MM_swapImage ('yorkshires' ", ' Images/yorkie_active.jpg', 1)" > < img src = "Images/yorkie_link.jpg" alt = "Link to the Yorkie puppy Page" name = "yorkie" width = "200" height = "200" id = "yorkie" onmouseover = "MM_swapImage ('yorkshires',", ' Images/yorkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="parti_yorkie.htm"onmousedown =" MM_swapImage ('parti_yorkie', ", ' Images/partiyorkie_active.jpg', 1)" > < img src = "Images/partiyorkie_link.jpg" alt = 'Link to the Page of puppy Yorkie party' name = "partiyorkie" width = "200" height = "200" id = 'partiyorkie' onmouseover = "MM_swapImage ('partiyorkie',", ' Images/partiyorkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="dachshund.htm"onmousedown =" MM_swapImage ("dachshund",", ' Images/dachshund_active.jpg', 1)" > < img src = "Images/dachshund_link.jpg" alt = "Link to Mini Dachshund puppy Page" name = "dachshund" width = "200" height = "200" id = "dachshund" onmouseover = "MM_swapImage (" dachshund ",", ' Images/dachshund_hover.jpg', 1) ' MM_swapImgRestore"/ > < / has >"

    "< a href ="maltipoo.htm"onmousedown =" MM_swapImage ('maltipoo' ", ' Images/maltipoo_active.jpg', 1)" > < img src = "Images/maltipoo_link.jpg" alt = "Link for the Page Maltipoo puppy" name = "maltipoo" width = "200" height = "200" id = "maltipoo" onmouseover = "MM_swapImage ('maltipoo'", ' Images/maltipoo_hover.jpg', 1) ' MM_swapImgRestore"/ > < /a >"

    "< a href ="morkie.htm"onmousedown =" MM_swapImage ('Astaire' ", ' Images/morkie_active.jpg', 1)" > < img src = "Images/morkie_link.jpg" alt = "Link to the Morkie puppy Page" name = "morkie" width = "200" height = "200" id = "morkie" onmouseover = "MM_swapImage ('Astaire',", ' Images/morkie_hover.jpg', 1) ' MM_swapImgRestore"/ > < /a > < / h2 >"

    < / div >

    <!-end # sidebar1″--> < / div >

    < div id = "mainContent" >

    Welcome < h1 > < / h1 >

    < p > this site is under Construction < /p >

    < h2 > Check Back soon < / h2 >

    <!-end #mainContent--> < / div >

    <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

    < div id = "footer" >

    footer < p > < /p >

    <!-end #footer--> < / div >

    <!-end #container--> < / div >

    < script type = "text/javascript" >

    <!--

    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});

    ->

    < /script >

    < / body >

    < / html >

    You have additional locking where none is required.

    Beginning on line 215 of your code, change this:

    to do this:

    When a problem arises, the W3C code validation tools will help you find errors in your code.

    Code Validation tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

    http://ALT-Web.blogspot.com/

  • Width of the container compared to the width of the banner graphic

    Uses DW CS5.5.  I have a 955 px wide container.  Within this container, I placed three such different DIV as defined using CSS: .banner (who is 955 px wide and spans all the top of the container, then two DIVS below, named .column_left and .column_right.

    I have a graph that is 955 px wide that I will place in .banner DIV at the top of the page.  The width of the graph, the DIV .banner width and width DIV container are all defined with the value 955 px wide, would this cause problems?  What is the 'best practices' for this?  The graphics are slightly less 955 px to ensure that it is not overflowing the container?  The .banner DIV must also be less than the width of the container to avoid problems related to the overflows?  Just try to be less confused regarding my initial design of the model I am formatted.

    It is the first of the two questions today, with that I need to get help.  The other is to use the background image in the container, which I will ask separately.  TKS.

    Any element that you insert as a div is positioned just after the chart because it is space available depending in the natural HTML flow, unless the image is launched which will remove the natural flow of html.

    I try as much as possible use of divs as possible that does not always work because l become lazy and start to insert some divs more than what is strictly all because there is a natural tendency to think that each element is in its own division sometimes there is place to be, but very often there is no good reason It's just down to sloppy coding.

    If it of just a unique banner image and is not part of a slide show, it is probably not a reason why it should be in its own div.

    The divs create you a more difficult page becomes to maintain when you return after a few months of update of content.

  • How to set the width of the container in sensitive (ask the dialogue) the installation program?

    I want my site to 1000px width. Just for the start of the sensitive dialogue requires dreamweaver colums how much I prefer and I can also put 3 sizes as small. Tablet and computer.

    the size of the container is always 1170. Is this a bug? Ill be grateful for the response. Zet

    In the new Document dialog box, insert the value for the big screen as in

    When the page has been created, you will see that the width is 1000px

  • Slide show 100% width - Image to file at the top of the container for slide show

    I would use a slide show width 100%, in the image of tank in proportion and have the image itself axis to the top of the container, as it is resized. Currently, the behavior is that the image is resized the center of the culture of the top of my images. I would have rather high pin and let the low get cropped as increases the width of the browser.

    Any code Add ' l, I can add to make this happen?

    Thank you!

    Hi Josh,.

    Would not be possible in the slideshow, you can try using the composition where you can fill out the image in the target window and choose the placement of the image but the width of 100% is not available in the compositions.

    Kind regards

    Akshay

  • How to set the width of a container of spry tab without affecting other Web site?

    I have a spry with 3 legs tab container and I want to add more width to the container as a whole, but when I change the width in the Panel CSS styles, it affects all the containers on my site. How can I make a change that affects only a container, I train? Thank you!

    In code view, add a style inline, and adjust the width according to your needs:

    style = "" width: 900px ">"

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Double click to edit the template is double the width of the container div...

    Hi, has anyone seen this before - when I opened my master, the first time I click into it, everything gets selected. When I double click to edit the model, the width of the container div (that surrounds my page) double size. When I check the width properties page or on my CSS stylesheet, it displays the original width of 989 px, but when I scroll on the container in design mode, it displays 989px (1 985 px).

    I have not saved this to my Web page, but I can't edit the template. Anyone know why this is happening?

    Thank you!

    Wendy

    The symptom of having to double-click to edit is almost a diagnosis for a container of an overflow: hidden style applied.  Is this the case?

    Yep - I can see that it is-

    #Container {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 12px;
         color: #FFF;
         width: 989px;
         margin: 0 auto;
         overflow: hidden;
         background-color: #CFDEE2;
         height: auto;
    }
    

    The doubling of the width thing is only a function of the display - I think you may be getting used to and know that this happens only in the mode Design of DW.  I assume you are using the overflow so that the container contains properly its floats?  Have you tried floating the container in place?  A floating element always contains its floats, too.  If you float it instead, you will need to have an another wrapper around her who centers, as a floating element will not also focus.

  • Need help - gap between the copyright &amp; footer

    I have a white space between the orange walk and the black box of the fair copyright above. I changed the 10 px 0 px and back to 10 px padding when he did nothing.


    I know I'm missing something simple. Can someone take a look and help out. Thank you.

    HTML code:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"

    <!-TemplateBeginEditable name = "doctitle"-->

    < title > Untitled Document < /title >

    <! - TemplateEndEditable - >

    <!-TemplateBeginEditable name = "head"->

    <! - TemplateEndEditable - >

    < style type = "text/css" >

    <!--

    {body

    Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.

    background-color: #4E5869;

    margin: 0;

    padding: 0;

    Color: #000;

    }

    / * ~ ~ Tag of the element selectors ~ ~ *.

    UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

    padding: 0;

    margin: 0;

    }

    H1, h2, h3, h4, h5, h6 {p}

    margin-top: 0;           / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

    padding-right: 15px;

    padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */

    }

    an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

    border: none;

    }

    / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

    a: link {}

    color: #414958;

    text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

    }

    a: visited {}

    color: #4E5869;

    text-decoration: underline;

    }

    a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

    text-decoration: none;

    }

    / * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.

    . Container {}

    Width: 80%;

    Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */

    min-width: 780px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */

    background-color: #FFF;

    margin: 0 auto; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */

    }

    / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

    . Header {}

    background-color: #6F7D94;

    }

    / * ~ ~ It's layout information. ~~

    (1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

    */

    . Happy {}

    padding: 10px 0;

    color: #FFF;

    }

    / * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.

    . Content ul, ol {} content

    padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */

    }

    / * ~ ~ Footer ~ ~ * /.

    .footer {}

    background-color: #b27300;

    Clear: both;

    padding-top: 10px;

    padding-right: 0px;

    padding-bottom: 10px;

    padding-left: 0px;

    }

    {.copyrightblack}

    background-color: #000;

    height: 50px;

    Width: 1260px;

    make-weight: bold;

    text-transform: uppercase;

    text-decoration: none;

    vertical-align: middle;

    do-family: "Helvetica Neue";

    do-size: 16px;

    Bottom: 0px;

    position: relative;

    }

    / * ~ ~ various float/clear classes ~ ~ * /.

    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

    float: right;

    left margin: 8px;

    }

    .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

    float: left;

    right margin: 8px;

    }

    .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

    Clear: both;

    height: 0;

    font size: 1px;

    line-height: 0px;

    }

    . Container content p {}

    do-family: "Helvetica Neue";

    }

    . Container content p {}

    make-weight: bold;

    Color: #000;

    }

    . Container content table tr td div {}

    color: #FFF;

    make-weight: bold;

    }

    ->

    < / style >

    < / head >

    < body >

    < div class = "container" >

    < div class = "header" > <! - end .header - >

    < div class = "content" id = "copyrightblack" > < / div >

    < / div >

    < div class = "content" >

    < p > <! - end content - >

    <!-->

    < /p >

    <!-TemplateBeginEditable name = 'content'->

    < /p > < p > content

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    <! - TemplateEndEditable - >

    < p > < / p >

    < div class = "copyrightblack" >

    < div align = "center" > © 2013 NDP < / div >

    < / div >

    < / div >

    < div class = "footer" >

    < p > < / p >

    <! - end .footer - > < / div >

    <! - end .container - > < / div >

    < / body >

    < / html >

    It is the padding here

    . Happy {}

    color: #FFFFFF;

    padding: 10px 0;

    }

    You should also reduce the width of 1260 here to 805

    {.copyrightblack}

    background-color: #000000;

    bottom: 0;

    do-family: "Helvetica Neue";

    do-size: 16px;

    make-weight: bold;

    height: 50px;

    position: relative;

    text-decoration: none;

    text-transform: uppercase;

    vertical-align: middle;

    Width: 1260px;

  • Determine the size of the container when using SizeUnit.PERCENT

    Hello

    How can I determine the width and height of a container, when I use the percentage of the size of the container?

    I have the following code, but this.width and this.height are both 0, causing the background sprite is not to demonstrate:

       public class HeaderContainer extends Container
        {
            private var _imgCategory:Image = new Image();
            private var _lblTitle:Label = new Label();
            private var _matrix:Matrix = new Matrix();
            private var _sprBackgroundColor:Sprite = new Sprite();
            private var _tfmtTitle:TextFormat = new TextFormat();
    
            public function HeaderContainer()
            {
                margins = Vector.([5,5,5,5]);
                debugColor = 0xCCCCCC; // grey
                flow = ContainerFlow.HORIZONTAL;
                align = ContainerAlign.NEAR;
                size = MyConstants.HEADER_SIZE;
                sizeUnit = SizeUnit.PERCENT;
                initializeUI();
            }
    
            public function initializeUI() : void
            {
                with (_sprBackgroundColor)
                {
                    x = y = 0;
                    graphics.beginFill(0x0000FF, 1);
                    graphics.drawRect(0, 0, this.width, this.height);
                    graphics.endFill();
                }
                ...
            }
    

    Have you tried to call the initializeUI method after the container has been added to the scene? You can easily register a handler to do this.

  • Place a label in the middle of the container

    Hello

    I think it's an easy problem. But unfortunately I couldn't do it right, neither could find the answer in the forum. My eye looks like this:

    cTitleBar = new Container();
    cTitleBar.margins = Vector.([5,5,5,5]);
    cTitleBar.debugColor = 0x33FF33;
    cTitleBar.size = 10;
    cTitleBar.sizeUnit = SizeUnit.PERCENT;
    cTitleBar.flow = ContainerFlow.HORIZONTAL;
    cTitleBar.align = ContainerAlign.NEAR;
    cTitleBar.containment = Containment.DOCK_TOP;
    cMain.addChild(cTitleBar);   // cMain is the main container
    cTitleBar.layout();
    
    var title:Label = new Label();
    title.text = "My Title";
    title.autoSize = TextFieldAutoSize.LEFT;
    title.x = (cTitleBar.width - title.width) / 2;
    title.y = (cTitleBar.height - title.height) / 2;
    cTitleBar.addChild(title);
    

    The title.x and the title.y has been set to the correct value, but the label was still appearing in the upper left corner of the container. How could I make it work?

    Thank you very much

    I did the same thing

    Try this:

    private var c:Container = new Container();
    c.flow = ContainerFlow.HORIZONTAL;
    c.align = ContainerAlign.MID;
    c.setSize(700,400);
    c.setPosition(162,100);
    
    lbl1.width = 680;
    lbl1.format = new TextFormat("Comic Sans MS", 80, 0x000000,null,null,null,null,null,TextFormatAlign.CENTER);
    lbl1.text = "My Title";
    lbl1.height = lbl1.textHeight + 5;
    
    c.addChild(lbl1);
    addChild(c);
    c.layout();
    
  • How to get the container of the grid Center in a browser

    How to get the container of the grid Center in a browser

    . Grid {}

    width: 80%;

    margin: auto;

    }

  • White space at the bottom of the container

    I've tried everything. I turned off sticky footer and removed the padding down but I can't figure out how to remove white space at the bottom of the container.image.jpegimage.jpeg

    I wasn't expecting the rounded corners to cause problems.

    But positioning not connected and disconnected from the separate elements in a Web page is always something to be careful with. Smart Guides can pop up very reassuring, but Muse simply cannot change the principles of HTML. The length of a text and the depth of a just framework is not easy to predict and anticipate, so a bad alignment can occur. Grouping could help. Try to find a different design that is less sensitive to these effects.

  • How can I create a label twist wrapped around a cylindrical container of a square image, like the label of the container of pringles chips paper?

    Hello

    I'll make a new packaging for a product that my company will launch next month. The packaging is cylindrical and paper twisted and wrapped around a cylinder.

    I finished the label in Adobe Illustrator, and it's a square image. Now, I want to design the label in the form of torsion that hurts the cylindrical container like the label of the container of pringles chips paper.

    Please give me some advice or instructions that may help me to design the label my desired form. Thank you...

    Kaddour,

    You may be, based on the version cut showing a cup which begins and ends at the level of the corners (guides are your friends):

    Round 1) create the complete label goes all the way, in the form of basic rectangular/square (works both a rectangle and a square, this last just have the same width and height), with all the works of art;

    (2) to decide the number of cuts;

    (3) create an oblique path right from the upper left corner (you can use the line Segment tool) for somewhere farther to the right, and then with the reference Point in the range of transformation the left superior value changes the value of W to the total width of the rectangle divided by the number of cuts, this will give you the right angle;

    (Pass 4) a copy of the straight path of 2) to the right by its value of W;

    5. Select two straight paths of 3) and 4) and Ctrl / Cmd + J to join them so create a parallellogram with twice the value of 3 W) / 4);

    (6 moving copies of the parallellogram left and right by the W of the value of 3) / 4), repeat until you have covered the original rectangle.

    (7) let the parallellogram on the far left where it is (covering the left upper part of the original rectangle) and move the others down by the height (of the original rectangle / the parallellograms), leave one where it is and continue with the remaining until they are all under one of the other;

    (8) copies of the original rectangle of 1 move) downwards by its height until you have rectangles behind the parallellograms.

    (9) for each set of parallellogram and rectangle, select both and object > clipping mask > make.

    (10) select and group;

    Now you should have the final shape and look of the rectangle cut as a group of clipping masks, done digitally; You can use as it is to cut a single label, or you can:

    (((11) copies of shifting to the right by the W of the value of 3) / 4) to have multiple labels to cut.

    This obviously requires a fairly precise cut, but it may be less critical than usual, given the nature of the twisted label.

  • How to get rid of a white border around the container Div (main box)?

    I look and look for a solution but could not find one. I develop a Web site, but the main problem is the white border (I changed it black so you can see what I mean) around the Web site when I go to preview DW to Google Chrome or Internet Explorer.Capture 1.PNG

    I've tried everything! margins of body of setting everything to zero, but nothing works... someone can help me?

    Ah, I see.

    When you got rid of the margins, your drawing of 1885 pixels width is now too narrow and he stops before your scroll bar on the right.

    If you want the design to fill the entire browser window, you must use % for width, not px.

    100% of the container and 25% for the 4 boxes

  • Move the container sprite as the movement of the mouse

    Hi all

    I am developing a game where there is an object that follows the mouse. There are also other objects and a map on the screen. I feel like any content background (the entire map and other items) to move when the user moves the mouse to the left or to the right. In other words, if the user moves the mouse on the right side, then all content (with the exception of the object which moves according to the mouse) must move left so that the user can see part of the map on the right side.

    From now on, I created new sprite container in which I added all my objects and map. So when the user moves the mouse to the right, I move the container sprite to the left so that it looks like all things moves to the left. Code looks to as below

    var pt:Point = new Point (character.x, character.y);

    PT = dori.localToGlobal (pt);

    If (pt.x > (stage.width * 0.5))

    {

    Container.x-= 5;

    }

    The project structure is such that I add container directly to the stadium. and this container contains just like the card, character and other objects.

    Now the problem is that as soon as the mouse goes beyond middle of scene... it creates distance between the location of the mouse and the character... !! I mean it moves according to the mouse but some distance will be created between the mouse and character. and continues to increase this distance that I continue to move the mouse to the center of the stage!

    I'm really stuck with this problem. Please someone help with this. I hope I've explained that well. I would like to know if you need more information, but please help.

    use linear interpolation to determine how your objects should move.  for example, if when the mouse is at x = stage.stageWidth, bg should be stage.stageWidth - bg.width and when the mouse is in x = 0, bg must be 0 use:

    paramF (bg, stage.stageWidth, stage.stageWidth - bg.width, 0, 0);

    in a loop that updates with the movement of the mouse:

    BG.x = BG.m * MouseX + BG.b;

    function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void {}

    MC.m =(Y1-Y2) /(x1-x2);

    MC.b = Y1 - mc.m * x 1;

    }

Maybe you are looking for

  • Satellite A660-158 want covers do not

    Since I bought the laptop (17.09.2010) I'm not using the recovery option. But once I want to use them he does not leave. Not on F8, not on F12, not on F11, not on 0 (zero). The utility called Toshiba Recovery Disk Creator tell me it's something wrong

  • Adding new addresses to the eprintcenter

    I created my printer HP Photosmart 5520 in the eprintcenter.  Set it to receive emails from named email addresses, at the beginning with my email address.  It works very well. Attempt to add additional e-mail addresses I can't find where on the scree

  • files LLB and mnu

    What should I do first a Bachelor's degree in law and make mnu then, so that I can make the mnu to the library?

  • HP MINI 1000 Webcam very dark

    Why is the webcam on the mini 1000 very dark. Are there solutions for the future or present solutions available? I searched without a bit of luck.

  • Failed to start Windows

    I have a packard bell easynote, which starts well but when I connect I get a message saying "windows startup failed. Press ok for the difficulty "." When you click ok the diagnosis of disc box comes with two boxes checked. Once the disk check is comp