Vertical centering

Using margin-left: auto; margin-right:auto; is good for centering an object horizontally
nice and easy and a reliable option when using box model positioning or absolute positioning with %.
my problem is that i need something centered vertically and margin-top: auto; margin-bottom: auto; does not work in the same way.
my object has to use absolute positining because it is hidden until another object is clicked on.
how can i make this vork

Easy
Here is an exemple
function(){return A.apply(null,[this].concat($A(arguments)))}
function(){return A.apply(null,[this].concat($A(arguments)))}<div style="position:absolute; left:50%; margin-left:-100px; top:50%; margin-top:-100px; width:200px; height:200px">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999">
    <tr>
      <td><img src="../Site web Final/images/w_siudmak_30gh.jpg" width="200" height="200" /></td>
    </tr>
</table>
</div>
The key is to put the margin left and top at Minus half the size of your thing. Then put the left and top at 50 %.
It need to be in a Div and voila. It is always centered.
Message was edited by: Chorale0001
You also need to set the div to the exact size of your content, otherwise, nothing good will happen. As in my exemple, everything is working fine.

Similar Messages

Why is vertical centering still such a challenge?

Is it really still this tricky to code DW to allow easy vertical centering? Just wondering. Tools for web design have been around long enough, and yet, simply vertically centering an image remains... elusive. Sure - if you know exactly how to do it, or remember it, or figure it out.... sometimes I can get it to work with relative ease; other times, not so much.
Really, though - no vertical center button anywhere? (I may have missed it.)
Now, I admit, I have some homework to do; in the mean time, though, is there any guide someone can recommend?
I'd like to both center divs vertically as well as center their content vertically, and not necessarily both at the same time... preferably using css.
thanks,
Andrew

as to why this is this case is presumably because as the width of an element shrinks, margins-top and position-top and height are contingent on that allowed width. But margin-top and margin-bottom by default are set to auto. This may make it seem like vertical alignments should occur naturally, but it does not. This is because behind the scenes auto is converted to 0. Meaning that Height auto is automatically set to 100% of its containers height leaving no room for margin-top or margin-bottom. Vertical formatting of block level normal flow elements, relies on a calculation much like horizontal formatting. margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom must equal its parenting elements height. However if you use absolutely positioned elements, then if all three of 'top', 'height', and 'bottom' are not auto: If both 'margin-top' and 'margin-bottom' are 'auto', solve for top+ margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom +bottom must equal its parenting elements height. Therefore, margin-top and margin-bottom will be equal values thus vertically centering the element.

Vertical Centering of a page in GoLive

I need a help in vertical centering a page. After long trials and with the help of others in this forum I was able a website that is functioning well enough. The only concern is that it needs to be centered vertically. You can see the website on: http://www.chimeddorj.com
I read the tutorial on the following link, and I liked the 3rd method.
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
But it was too complicated for me as I don't use GoLive often enough. I made this website 3 months ago and since then I haven't used it again. As a result I kind of forgot a lot of things that I knew at that time. If you know how to make the Vertical Centering, could you please guide me how to place the codes in right places? I could provide you with necessary files if necessary. You can also see the HTML code sources by clicking the right button on the website that I created.
For some people it may be easy as click. Please help me if you can.

Thank you very much for comment. I tried to use the table method with your codes. It is centering the content horizontally, but not vertically. The contents are stuck to the top as I resize the window. It seems like I am missing some point. I copy and paste my current code. Could you please give me more advice?
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Mongolian Artist Chimeddorj</title>
<script src="js/swfobject.js" type="text/javascript" ></script>
<style type="text/css" media="screen"></style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
<tr align="center" valign="middle">
<td align="center" valign="middle">
<div style="position:relative;width:1060px;height:540px;-adbe-g:p;">
<div style="position:absolute;top:0px;left:0px;width:700px;height:540px;-adbe-c:c">
<script type="text/javascript">
var flashvars = {XMLFile: "paintings.xml"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("ArtFlashGallery.swf", "myAlternativeContent","700", "540", "10.0.0",false, flashvars, params);
</script>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a></div>
<br />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

IPhone: Vertically centering UILabel text

The UILabel permits horizontal centering of its text via the textAlignment property, but there seems to be no way to align the text vertically. I have 3 labels, the last holding from one line to several. It if only has a single line, the text is vertically centered giving a big gap from he previous text. That looks uncool. (and in the Mac world, cool is everything). Is there some secret magical way to get UILabel to vertically center is text as well, or do I need to abandon labels and just drop down to drawRect.

Check out NSString(UIStringDrawing). It has the following method, which you can use to calculate the size of the text as it would be in the label. Then you can set the label height to the minimum necessary for the text, which will solve your vertically centering problem.
sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode:

Vertically centered file background matching

How can I have a vertically centered files background match
the background of the html file? I have seen it work, like for
example here:
http://www.aidlindarlingdesign.com/
You can see mine here which does not have the background
working yet:
http://www.agilitygraphics.com/clients/sams
Looks fine, if the browser window is only 600 or close to
that high. But if you open it further, the gradient of the file and
the page background don't match anymore. How would I fix this? Can
I have a transparent background to the file?
Thanks a lot for any help with this!

the aidlindarlingdesign site is using a transparent swf to
display the soft edges around their content. Google "transparent
swf" and you will find a multitude of competent tutorials on how to
do this.

Vertical centering in Spark/Flex

I am horizontally dividing my panel between two elements.
To acheive that I am using the following layout controls
     <s:layout>
          <s:HorizontalLayout>
             <s:paddingBottom>20</s:paddingBottom>
             <s:paddingTop>50</s:paddingTop>
             <s:paddingLeft>20</s:paddingLeft>
             <s:paddingRight>20</s:paddingRight>
             <s:gap>300</s:gap>
          </s:HorizontalLayout>
     </s:layout>
This is splitting the panel correctly on the horizonal front.
However, I am then trying to center my other components vertically within the panel and am failing. My non-spark component seems to center perfectly using the following:
     <mx:VBox verticalGap="20" horizontalAlign="center">
          </mx:VBox>
However, when I add a second panel I can't seem to figure out how to center it vertically. I am using the following code:
<s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" horizontalCenter="0" verticalCenter="0">
     <s:layout>
     <s:VerticalLayout>
        </s:VerticalLayout>
     </s:layout>
</s:Panel>
Any advice on how to verticaly center that second panel is welcome.

UbuntuPenguin and _spoboyle -
   Thanks for the help. Setting the verticalAlign to middle and height to 100% seemed to mostly solve the issue.
That seems to line up the VBox and the Panel.. However, when I place an object into the panel that object isn't centered vertically within that panel. I have a mouse listener on the images in the VBox and when you click one it removes it from the VBox and adds it to the panel. The VBox recenters everything correctly, but the moved object is not centered.
<s:Panel verticalCenter="0" id="mainPanel" visible="true" width="100%" height="100%" backgroundColor="0x000000" creationComplete="hidePanelHeader(event)">
     <s:layout>
          <s:HorizontalLayout>
               
             <s:gap>300</s:gap>
             <s:verticalAlign>middle</s:verticalAlign>
          </s:HorizontalLayout>
     </s:layout>
     <mx:VBox backgroundColor="0xFFFFFF" height="100%" verticalGap="20" verticalAlign="middle">
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p71" creationComplete="blinkP7Disk(p71)" mouseDown="exploreNode(p71)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p72" creationComplete="blinkP7Disk(p72)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p73" creationComplete="blinkP7Disk(p73)"/>
     </mx:VBox>
     <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" height="100%">
          <s:layout>
               <s:VerticalLayout>
                    <s:verticalAlign>middle</s:verticalAlign>
                    <s:gap>20</s:gap>
               </s:VerticalLayout>
          </s:layout>
     </s:Panel>
</s:Panel>

Vertically centering a div

Hi All,
I want to be able to have a full screen image with text overlaying it in the centre. I want the full screen image to respond to the size of the viewport. I have the following code which works for the opening screen image.
CSS:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 3vh;
text-align: left;
html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
#a {
    display: table;
background-color: #0CF;
#b {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
#content {
    border: 5px solid red;
    width: 90%;
    height: auto;
    margin: auto;
HTML:
<div id="a">
<div id="b">
    <div id="content">
      <h1>THIS IS MY HEADING</h1>
    </div>
</div>
</div>
I want to be able to replicate this down my page. I can simply copy and paste the Html and it works but it obviously runs off the same CSS. If i change the div id name and copy the CSS code and rename that, it stops working.
Any help would be great on this as I really need this to work for my design.
If you need me to elaborate more just let me know.
Cheers,
Alex

Is this the kind of solution you are looking for?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic,300|Droid+Ser if:400,400italic' rel='stylesheet' type='text/css'>
<style>
html {
    height:100%;
body {
    background: #fff;
    color: #878787;
    font-weight:300;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    text-align:left;
    height:100%;
    padding: 0;
    margin: 0;
.fullScreen {
width:100%;
height:100%;
display: table;
.fullScreen .fullScreenText {
display: table-cell;
text-align: center;
vertical-align: middle;
.fullScreen .fullScreenText p {
text-align:center;
.fullScreen h2 {
    font-size: 30px;
    color: #fff;
    text-align: center;
.fullScreen a {
text-decoration: none;
display: inline-block;
background-color:#C90;
color: #fff;
padding: 15px 25px;
font-weight: 600;
</style>
</head>
<body>
<div class="fullScreen" id="panel1" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2012/04/26/20/06/butterfly-43008_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the home page</h2>
<a href="#panel2" data-scroll data-speed="800" data-easing="easeInOutQuad">About Us</a>
</div>
</div>
<div class="fullScreen" id="panel2" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2014/10/29/17/19/butterfly-508143_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the about page</h2>
<a href="#panel1" data-scroll data-speed="800" data-easing="easeInOutQuad">Home</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/* =============================================================
    Smooth Scroll 3.2
    Animate scrolling to anchor links, by Chris Ferdinandi.
    http://gomakethings.com
    Easing support contributed by Willem Liu.
    https://github.com/willemliu
    Easing functions forked from GaÃ«tan Renaudeau.
    https://gist.github.com/gre/1650294
    URL history support contributed by Robert Pate.
    https://github.com/robertpateii
    Fixed header support contributed by Arndt von Lucadou.
    https://github.com/a-v-l
    Infinite loop bugs in iOS and Chrome (when zoomed) by Alex Guzman.
    https://github.com/alexguzman
    Free to use under the MIT License.
    http://gomakethings.com/mit/
* ============================================================= */
window.smoothScroll = (function (window, document, undefined) {
    'use strict';
    // Feature Test
    if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
        // SELECTORS
        var scrollToggles = document.querySelectorAll('[data-scroll]');
        // METHODS
        // Run the smooth scroll animation
        var runSmoothScroll = function (anchor, duration, easing, url) {
            // SELECTORS
            var startLocation = window.pageYOffset;
            // Get the height of a fixed header if one exists
            var scrollHeader = document.querySelector('[data-scroll-header]');
            var headerHeight = scrollHeader === null ? 0 : scrollHeader.offsetHeight;
            // Set the animation variables to 0/undefined.
            var timeLapsed = 0;
            var percentage, position;
            // METHODS
            // Calculate the easing pattern
            var easingPattern = function (type, time) {
                if ( type == 'easeInQuad' ) return time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuad' ) return time * (2 - time); // decelerating to zero velocity
                if ( type == 'easeInOutQuad' ) return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInCubic' ) return time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutCubic' ) return (--time) * time * time + 1; // decelerating to zero velocity
                if ( type == 'easeInOutCubic' ) return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuart' ) return time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuart' ) return 1 - (--time) * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuart' ) return time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuint' ) return time * time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuint' ) return 1 + (--time) * time * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuint' ) return time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
                return time; // no easing, no acceleration
            // Update the URL
            var updateURL = function (url, anchor) {
                if ( url === 'true' && history.pushState ) {
                    history.pushState( {pos:anchor.id}, '', '#' + anchor.id );
            // Calculate how far to scroll
            var getEndLocation = function (anchor) {
                var location = 0;
                if (anchor.offsetParent) {
                    do {
                        location += anchor.offsetTop;
                        anchor = anchor.offsetParent;
                    } while (anchor);
                location = location - headerHeight;
                if ( location >= 0 ) {
                    return location;
                } else {
                    return 0;
            var endLocation = getEndLocation(anchor);
            var distance = endLocation - startLocation;
            // Stop the scrolling animation when the anchor is reached (or at the top/bottom of the page)
            var stopAnimation = function () {
                var currentLocation = window.pageYOffset;
                if ( position == endLocation || currentLocation == endLocation || ( (window.innerHeight + currentLocation) >= document.body.scrollHeight ) ) {
                    clearInterval(runAnimation);
            // Scroll the page by an increment, and check if it's time to stop
            var animateScroll = function () {
                timeLapsed += 16;
                percentage = ( timeLapsed / duration );
                percentage = ( percentage > 1 ) ? 1 : percentage;
                position = startLocation + ( distance * easingPattern(easing, percentage) );
                window.scrollTo( 0, position );
                stopAnimation();
            // EVENTS, LISTENERS, AND INITS
            updateURL(url, anchor);
            var runAnimation = setInterval(animateScroll, 16);
        // Check that anchor exists and run scroll animation
        var handleToggleClick = function (event) {
            // SELECTORS
            // Get anchor link and calculate distance from the top
            var dataID = this.getAttribute('href');
            var dataTarget = document.querySelector(dataID);
            var dataSpeed = this.getAttribute('data-speed');
            var dataEasing = this.getAttribute('data-easing');
            var dataURL = this.getAttribute('data-url');
            // EVENTS, LISTENERS, AND INITS
            event.preventDefault();
            if (dataTarget) {
                runSmoothScroll( dataTarget, dataSpeed || 500, dataEasing || 'easeInOutCubic', dataURL || 'false' );
        // EVENTS, LISTENERS, AND INITS
        // When a toggle is clicked, run the click handler
        Array.prototype.forEach.call(scrollToggles, function (toggle, index) {
            toggle.addEventListener('click', handleToggleClick, false);
        // Return to the top of the page when back button is clicked and no hash is set
        window.onpopstate = function (event) {
            if ( event.state === null && window.location.hash === '' ) {
                window.scrollTo( 0, 0 );
})(window, document);
</script>
</body>
</html>

Vertically Centering Block Links Using CSS

How would I vertically center the
First Cell link within it's own gray background on the
following page?
Test
Page

Cell height is not invalid. It is deprecated and will cause
your page to
fail validation against strict doctypes.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Dont use height on your td cells, it's invalid mark-up
and will cause you
> issues. Set the height on the 'a' by using either
padding top and bottom
> or line-height, as the example below shows.
>
> Cut and paste code below into a new Dreamweaver document
and then run it
> via a browser.
>
>
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> body {
> margin: 0px;
> padding: 0;
> }
> a {
> font: 12px Verdana;
> line-height: 50px;
> width: 200px;
> display: block;
> background: #CCCCCC;
> text-decoration: none;
> }
> a:link {
> color: #0000FF;
> }
> a:visited {
> background: #999999;
> }
> a:hover {
> background: #999999;
> }
>
> #table {
> width: 200px;
> border: 1px solid #000000;
> }
> .cells {
> text-align: center;
> border: 1px solid #000000;
> }
> </style>
> </head>
>
> <body>
> <table border="0" cellpadding="0" cellspacing="0"
id="table">
> <tr>
> <td class="cells"><a href="#">First
Cell</a> </td>
>
> </tr>
> <tr>
> <td class="cells">Second Cell</td>
> </tr>
> <tr>
> <td class="cells">Third Cell</td>
> </tr>
> </table>
>
> </body>
> </html>
>
>
>
>
>
>
>
>
>
>
>
> rmiman wrote:
>
>>
quote:
Originally posted by:
Newsgroup User
>> Change your cells css style rule to
>>
>> .cells {
>> text-align: center;
>> vertical-align: middle;
>> height: 50px;
>> border: 1px solid #000000;
>> }
>> "rmiman" <[email protected]> wrote
in message
>> news:[email protected]...
>> > How would I vertically center the
First Cell link within it's
>> own > gray background on the following page?
>> >
>> >
http://www.rminc.com/test_examples/test.html
>> When I do that the
First Cell link still appears at the top of
>> it's own grey background.
>>
>

Vertically Centering Dynamic Text

I am trying to get the text I am loading into a dynamic text
box vertically aligned. There are from 3 to 8 lines of text that
load into the dynamic text box via an array. I haven't found
anything to do this. Can I get a coordinate that tells me the
height of the loaded in text? Thanks for any help...

I have the answer to my own question....
placeText = function(){
//this first line just creates a variable with the button
number pushed
var currentButton = _parent._parent.buttNo;
//oBox_txt is my dynamic text box
oBox_txt.autoSize = "center";
//this line populates the text box with text from an array
using the predefined
//variable "currentButton"
oBox_txt.text = textual[currentButton];
oBox_txt._y = ((100 - oBox_txt._height) / 2);
This assumes that the box is at the _y coordinate 0, and that
the box is 100 pixels high.

Vertically Centered

I have a text imported from word that has the vertical orientetion centerd. I cant fin how to modify this for the next page and make a top align ... some idea?

luisfel,
have you tested, if Pages has tryed to solve the Word settings by creating different layouts? You can see the layout guides by selecting the menu item "View/Show Layout". If you see more than three framed areas (one small at the top for the header, one tall in the middle for the main text, one small at the bottom for the footer), or if you see large white spaces between the header or footer and the main text area, you can solve the problem by adjusting the layout borders in the layout palette (2nd button of the infopalette in the bottom section).
Since I avoid to use Word documents wherever I can, I have no idea how Pages will handle special Word document layouts. But there are a few ways, why you can't adjust the page layout in Pages as easy as you want to do.
Frank.

Centering vertically

Dumb quesdtion, I'm sure, but I'm just trying out Dreamweaver
8
Having problems with vertical centering.
I have a Flash movie (SWF). I put it in a table (100%) with
one cell that I set to vAlign = Middle, Align = Center
It centers horizontally fine. As you resize the browser, the
flash moves and recenters itself.
But, for the life of me, I cannot get it to center
vertically. It starts down about 1" on screen, higher than middle
and stays there no matter how you resize the browser.
I remember doing something with a <DIV> in the past,
but does anyone know how to simply center the Flash movie
vertically without twisting myself into knots?
Thanks, in advance, for your help.
AAKAlan

http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"AAKALAN" <[email protected]> wrote in
message
news:ea6c5e$hnk$[email protected]..
> Dumb quesdtion, I'm sure, but I'm just trying out
Dreamweaver 8
> Having problems with vertical centering.
>
> I have a Flash movie (SWF). I put it in a table (100%)
with one cell that
> I
> set to vAlign = Middle, Align = Center
> It centers horizontally fine. As you resize the browser,
the flash moves
> and
> recenters itself.
> But, for the life of me, I cannot get it to center
vertically. It starts
> down
> about 1" on screen, higher than middle and stays there
no matter how you
> resize
> the browser.
>
> I remember doing something with a <DIV> in the
past, but does anyone know
> how
> to simply center the Flash movie vertically without
twisting myself into
> knots?
>
>
> Thanks, in advance, for your help.
>
> AAKAlan
>

Advice on vertically and horizontally centering page content

Hello
can any one offer advice on how to veritcally and
horizontally center the content. On this page
http://www.karenandersonphotography.com.au/
I want the red top/bottom borders to be the same height regardless
of screen size currently in larger screens the red at the bottom of
the page expands.
any advice appreciated.
thanks Shontelle

There is no such thing as auto height.
Vertical centering is only achievable reliably with two
approaches -
1. Using frames. <ptui>
2. Using tables - the method is described on Gary's site -
http://www.apptools.com/examples/tableheight.php
Realistically, just center things horizontally. Nobody will
care that you
forget the vertical part.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g35s91$f7$[email protected]..
> Just put a container around the header, footer and
content to the width
> you
> want. Then set height of the footer since that is not
defined in your
> CSS.
> And lastly set the margin of the container to auto.
>

Horizontal panelGroupLayout centered in vertical panelGroupLayout?

I am trying to do something I think should be pretty simple, but I must be missing something. Today is my first day with ADF layout components, so I the likelihood of me missing something is very high.
I am trying to create th following simple layout:
------------------------------------------------------------+
| |
| Contact Us |
| Search: |
| [ imagine this is a text box] GO |
| |
|-----------------------------------------------------------+
The container is the "end" facet of a panelStretchLayout facet.
Inside here, I've tried to keep this real simple:
                <f:facet name="end">
                    <af:panelGroupLayout layout="vertical"
                                         xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                         id="pglContactSearch" halign="left"
                                         inlineStyle="text-align:left;">
                      <af:spacer width="10px" height="20px" id="spCU"/>
                      <af:goLink text="Contact Us" id="glContactUs"
                                 styleClass="greyBlock"
                                 destination="http://www.msn.com"/>
                      <af:outputLabel value="Search:" id="olSearch"
                                      styleClass="greenBlock" for="itSearch"/>
                      <af:panelGroupLayout id="pgSearchText" layout="horizontal"
                                           halign="left" valign="top"
                                           inlineStyle="text-align:left;">
                        <af:inputText id="itSearch" columns="10"/>
                        <af:commandImageLink id="cilGo"
                                             icon="/graphics/go_bn.gif"/>
                      </af:panelGroupLayout>
                    </af:panelGroupLayout>
                  </f:facet>Since vertical centering is hopeless these days, I have a spacer there instead just to give me the room I need at the top. What I'm ending up with is:
------------------------------------------------------------+
| |
| Current Time: 17:07 |
| Search: |
| [ imagine this is a text box] GO |
| |
|-----------------------------------------------------------+
This is an attempt to show that the intputText control and GO image controls in the embedded horizontal panelGroupLayout are centered rather than left aligned with the other controls.
What am I missing? How do I get the horizontal panelGroupLayout to align left within the vertical panelGroupLayout?
I've tried all sorts of group layout nesting alternatives with no luck.
Cheers!

Interesting... It looks like everything is centered in the facet how, but atleast the labels and horizontal panel layout group are all left justified. I'm better off, now I suppose. I changed the vertical panel group layout to a panelFormLayout, since it does basically the same thing in this context. Not perfect, but at least it's predicable behavior now.
Thanks for the suggestion.

Spry menu bar places vertically, not horizontally?

I followed the tutorial on using the widget browser to download Spry Menu Bar 2.0 and after configuring for a horizontal bar placed the bar in the tutorial index.html. The placement results in a vertical menu bar. What am I doing wrong?
SPRY CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spry Menu Bar - Basic : tcm.menu</title>
<link type='text/css' href='Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryMenu.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js'></script>
<style type="text/css">
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#b0c9d9;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: bold;
font-size: 18px;
font-style: normal;
padding:0;
border-color: #cddce7 #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 960px;
.MenuBarFixedCentered {
float: none;
width: 960px;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 10px 0px 0px;
background-color:transparent;
border-width:2px;
border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#333333;
background-color:transparent;
padding: 6px 15px 6px 25px;
width: 138px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
font-size: 16px;
font-style: normal;
background-color:#677e8c;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 171px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #677e8c;
border-color: #697278 #b8c4ca #b8c4ca #697278;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #b0c9d9;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
</style>
</head>
<body>
<ul id="MenuBar">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Entertainment</a>
<ul>
    <li> <a href="#">TV Listings</a> </li>
    <li> <a href="#">Music</a>
      <ul>
        <li> <a href="#">Hits</a> </li>
        <li> <a href="#">Ragga</a>
          <ul>
            <li> <a href="#">Roots</a> </li>
            <li> <a href="#">Reggaeton</a> </li>
            <li> <a href="#">Dancehall</a> </li>
          </ul>
        </li>
        <li> <a href="#">Country</a> </li>
      </ul>
    </li>
    <li> <a href="#">The Dirt</a>
      <ul>
        <li> <a href="#">Hollywood</a> </li>
        <li> <a href="#">NY Beat</a> </li>
        <li> <a href="#">London Scene</a> </li>
      </ul>
    </li>
    <li> <a href="#">The Web</a> </li>
</ul>
</li>
<li> <a href="#">Politics</a> </li>
<li> <a href="#">Sports</a>
    <ul>
      <li> <a href="#">Football</a> </li>
      <li> <a href="#">Baseball</a> </li>
      <li> <a href="#">Basketball</a> </li>
      <li> <a href="#">Racing</a>
        <ul>
          <li> <a href="#">F1</a> </li>
          <li> <a href="#">Indy Car</a> </li>
          <li> <a href="#">Stock Car</a> </li>
        </ul>
</li>
    </ul>
</li>
</ul>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
</script>
</body>
</html>
INDEX.HTML
<!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>Bayside Pulse</title>
<link href="styles/bayside.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic. css" rel="stylesheet" type="text/css" />
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="file:///C|/Users/John Bachelor/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam5844.tmp/Spry-UI-1.7/includes/plugins/MenuBar2/Spr yMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#b0c9d9;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: bold;
font-size: 18px;
font-style: normal;
padding:0;
border-color: #cddce7 #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 960px;
.MenuBarFixedCentered {
float: none;
width: 960px;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 10px 0px 0px;
background-color:transparent;
border-width:2px;
border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#333333;
background-color:transparent;
padding: 6px 15px 6px 25px;
width: 138px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
font-size: 16px;
font-style: normal;
background-color:#677e8c;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 171px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #677e8c;
border-color: #697278 #b8c4ca #b8c4ca #697278;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #b0c9d9;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/bayside_pulse.jpg" width="960" height="150" alt="Bayside Pulse" /></div>
<div id="nav">
    <ul id="MenuBar">
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Entertainment</a>
        <ul>
          <li> <a href="#">TV Listings</a></li>
          <li> <a href="#">Music</a>
            <ul>
              <li> <a href="#">Hits</a></li>
              <li> <a href="#">Ragga</a>
                <ul>
                  <li> <a href="#">Roots</a></li>
                  <li> <a href="#">Reggaeton</a></li>
                  <li> <a href="#">Dancehall</a></li>
                </ul>
              </li>
              <li> <a href="#">Country</a></li>
            </ul>
          </li>
          <li> <a href="#">The Dirt</a>
            <ul>
              <li> <a href="#">Hollywood</a></li>
              <li> <a href="#">NY Beat</a></li>
              <li> <a href="#">London Scene</a></li>
            </ul>
          </li>
          <li> <a href="#">The Web</a></li>
        </ul>
      </li>
      <li> <a href="#">Politics</a></li>
      <li> <a href="#">Sports</a>
        <ul>
          <li> <a href="#">Football</a></li>
          <li> <a href="#">Baseball</a></li>
          <li> <a href="#">Basketball</a></li>
          <li> <a href="#">Racing</a>
            <ul>
              <li> <a href="#">F1</a></li>
              <li> <a href="#">Indy Car</a></li>
              <li> <a href="#">Stock Car</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
</div>
<div id="sidebar">
    <h3>Check This Out</h3>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt quis nostrud exercitation. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
    <p>Sunt in culpa qui officia deserunt ullamco laboris nisi. Duis aute irure dolor mollit anim id est laborum. Sed do eiusmod tempor incididunt ut enim ad minim veniam, in reprehenderit in voluptate.</p>
    <p>Lorem ipsum dolor sit amet, duis aute irure dolor cupidatat non proident. Sed do eiusmod tempor incididunt. </p>
</div>
<div id="maincontent">
    <h2>There’s More to San Francisco than Cafe Townsend</h2>
    <p>Sure, Cafe Townsend's cool, and Chef Ipsum provides a great range of international cuisine. But San Francisco is the city where you can weave dreams of your own. Come, explore!</p>
    <h3>Scott’s For a Night to Remember</h3>
    <p>It's certainly one you're unlikely to forget—or should that be Fegette? Lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. <img src="images/adobeduo.jpg" alt="Scott and Duane" width="400" height="233" class="floatright" />In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p>
    <p>Velit esse cillum dolore mollit anim id est laborum. Ut enim <a href="#">ad minim veniam</a>, ullamco laboris nisi in reprehenderit in voluptate. Excepteur sint occaecat duis aute irure dolor consectetur adipisicing elit. Ut labore et dolore magna aliqua.</p>
    <p>Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. Ullamco laboris nisi in reprehenderit in voluptate excepteur sint occaecat. Cupidatat non proident, sunt in culpa lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, <a href="#">ullamco laboris nisi</a> in reprehenderit in voluptate.</p>
    <p>Eu fugiat nulla pariatur. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p>
    <p>Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore. Ullamco laboris nisi cupidatat non proident, ut aliquip ex ea commodo consequat. Sunt in culpa ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>

Please upload your file to a server and give us a link. It is extremely difficult to work with pasted-in code...much more useful to see it in working order.
Beth

Vertical alignment in cross-tab

Hi,
Anyone of you know how to align the measures Vertically Centered In Cross-tab report? As far as i know, there is option for Horizontal alignment; but no options for Vertical alignment. By default the text are docking on top aligned!!!
Help me out to solve this or any work-around to achieve this?
Thanks in Advance
Viswa

Hey Anindita,
I was not asking about the text orientation. I want to align the text in the cross tab report to be vertically aligned center.
I want the text in each cell should be aligned centered both horizontally as well as vertically. Horizontal alignment is available in cross tab formatting but not for the vertical alignment.
Thanks
Viswa

Vertical centering

Similar Messages

Maybe you are looking for