CSS Centered & Fixed Width Layout

I'm trying to use CSS for building a new layout and do so without resorting to the old methods, like using tables. But I can't even get past a very basic thing using Dreamweaver CS5.5. I want the page layout to be a fixed width yet centered in the browser window instead of stuck to the left. Lots of web sites do this (even Adobe's main site).
In the past I would just create a parent table and simply give it a center alignment then build everything else inside of it. Easy. Unless I'm overlooking something obvious there appears to be no way at all to apply the same sort of alignment property to a DIV-based container. Dreamweaver provides lots and lots of other formatting options, but page alignment for that DIV object isn't there.
If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
I've searched around for examples on how to code CSS to make this work, but haven't been able to simply cut and paste the code into Dreamweaver to make it happen. I need to learn how to do this correctly using Dreamweaver's own CSS property dialog boxes.

If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
OMG no. You don't want to use absolute positioning at all, until you understand CSS positioning fully.
Read this to get an idea how to do your layout -
http://www.apptools.com/examples/pagelayout101.php
HTML & CSS Tutorials - http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
========================================
PRE-BUILT CSS LAYOUTS
For rock solid, commercial products that perform well in all browsers/devices, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework (free)
http://www.notjustagrid.com/demo.asp
Ultimate Multi-Column Layouts (free)
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layout s-em-and-pixel-widths
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

Similar Messages

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

Fixed width of SCN content

After last redesign of SCN all the content is cca 990 pixels wide. This was a fashionable approach of web in 90's. For web sites like forums and blogs I would expect flexible width - people working on large displays like 1920px wide can use full screen and people working with blog as right-hand help column can use it too. Some problems like text behind right edge would dissapear by flex width, I think.
Why fixed layout (I accept the fact it is more comfortable for dev and testing)?
Regards,
Pavol

Pavol;
I am referring today with combining quotes from an article that already was written around fixed width:
http://webdev.entheosweb.com/2008/07/16/fixed-width-vs-liquid-layouts/
Earlier today I tried to respond quickly, and did not refer to the article appropriately nor entirely. Most of the response below was a mix of that article; and comments from me in appropriate places with additional decisions we made as an SCN team.
As you correctly state there are two types of layout that you can choose from : http://webdev.entheosweb.com/2008/07/16/fixed-width-vs-liquid-layouts/
This article also discusses the fact that one is the fixed width layout and the other is the liquid/variable layout. The fixed width layout sets the width of the web page at a specific value, no matter how wide the vieweru2019s internet browser window is, whereas liquid & variable width layouts adjust their width depending on the width of the visitoru2019s browser window. The choice between these two layouts is not always an easy one. In our SCN case we chose for the fixed.
As they quote in the article : http://webdev.entheosweb.com/2008/07/16/fixed-width-vs-liquid-layouts/
For those who do not know much about this : Fixed width layouts mean that you have a predetermined width which you will design the rest of your web page around. The main advantage of this approach is that it gives you greater direction and control over the eventual organization of your web pages.
Which layout you eventually choose will greatly affect the final look and feel of your web site, not to mention the functionality of the site. The ease with which visitoru2019s can scan through your site for relevant information and identify the content that they wish to find is almost always largely dependant on your choice of layouts. We have a lot of content on our website in many places, and unfortunately for you and also from a maintenance perspective we wanted to opt in this release for fixed width.
I picked the the pros and cons of the fixed width from the article as they are widely known to most website designers.
*Fixed Width Layout*
Pros
Pages that you design look exactly the same when viewed using any internet browser or operating system.
Images and other non-textual objects will not overwhelm the textual content of the page, regardless of the size of the browser window or viewing monitor.
The scan length of your pages stays constant no matter how wide the vieweru2019s browser window is.
Cons
Viewers using smaller browser windows or monitors to view the site will probably have to scroll horizontally to see the entirety of the page. This tends to annoy online som eof our visitors. However we know most of our users use IE or Mozilla and have larger screens ( more than 30% has 1024x) from Surveys we do.
A large amount of whitespace is usually generated when viewers use large browser windows to view the site, resulting in wastage of otherwise useful space. Also, more vertical scrolling may be required than should be necessary.
Font size changes can adversely affect the overall layout of the page. Large increases in font size can cause the layout of your page to become distorted, making it messy and unappealing.
In short: We used to have both approaches, but in the new SCN design we choose to have the fixed width approach for now. We weighed both pros and cons
Scott Lawley of our SCN team compiled it for us and referred in an internal presentation around the pros for SCN for fixed width. here is a quick summary ( thanks Scott, have a nice vacation )
Our SAP Corporate styleguide calls for a fixed width layout (see e.g. sap.com)
We already implemented EcoHub with a fixed width layout. All our communities should try to have as much a unified presentation where possible
All of CSO's screen designs are made for a 1024 resolution. They do not work that well with higher resolutions (in our older SDN approach, viewed at higher resolutions it looked sometimes very lackluster, the lines of text became so long that readability is decreased)
On high resolutions the old SDN site became harder to navigate because you had a lot of screen real estate to cover if you wanted to move the mouse from right to left
Using a fluid layout for us meant that we have to continue using table-based layouts which did not entirely fit with the image of the modern web 2.0 platform we wanted to convey.
Most news blogs and major news sites (like e.g. nytimes.com) use a fixed width layout. According to this survey http://tinyurl.com/65yjcv
Flash content does not easily scale. New page layout may need to be considered to better support flash in th enear future for us.
92% of the top 50 news blogs use a fixed layout.
And last but not least there were also some more philosophical and functional differences that we weighed of from each other : news vs. community vs. product
What we will do in the next few releases is allow the collapsable left hand navigation that then will help the vertical scrolling challenge you might infrequently have,
Hopefully this answers your question
Edited by: Marco ten Vaanholt on Dec 17, 2008 7:59 AM
Edited by: Marco ten Vaanholt on Dec 17, 2008 8:02 AM

Css centering layout problem

Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
Olliebear

Is this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
>

[svn] 2210: Fix for layout issue of AIR apps on mac when only width or height is

Revision: 2210
Author: [email protected]
Date: 2008-06-24 11:56:52 -0700 (Tue, 24 Jun 2008)
Log Message:
Fix for layout issue of AIR apps on mac when only width or height is
set on root WindowedApplication tag.
Bugs: SDK-14643.
QA: Yes, very much so.
Reviewer: Ryan
Ticket Links:
http://bugs.adobe.com/jira/browse/SDK-14643
Modified Paths:
flex/sdk/branches/3.0.x/frameworks/projects/airframework/src/mx/core/WindowedApplication. as

Updates:
I've opened a bug with Adobe regarding this issue:
http://bugs.adobe.com/jira/browse/FP-4362
Also, the Cancel operation on a FileReference causes the same issue to happen as does loading. I really think it's an operating system focus issue.
UPDATE:
Looks like this has already been tracked and is scheduled to be fixed:
https://bugs.adobe.com/jira/browse/FP-2785

Spry menubar not working correctly in IE9 - fixed width or padding or...?

Need help. My spry menu bar isn't all the way to the right when in compatibility mode in IE9. When not in compatibility mode it is even further from the right. Is there a way to make it so that it is all the way to the right on both compatibility and non-compatibility modes. Is there a better way than changing the padding or can I do a fixed width? www.superedgar.com
The spry code is below.
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1010;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
width: auto;
left: -1000em;
float: none;
white-space: nowrap;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
cursor: auto;
left: auto;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
width: 14em;
background-image: url(../images/Menu%20Bars/metalsubmenubargray.gif);
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
border-right-width: 2px;
border-left-width: 1px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
position: absolute;
width: 14em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #392B68;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding-top: 8px;
padding-right: 29px;
padding-bottom: 7px;
padding-left: 30px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #392B68;
background-image: url(../images/Menu%20Bars/metalsubmenubargrayhover.gif);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #392B68;
width: auto;
float: none;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-position: 95% 50%;
color: #392B68;
width: auto;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-position: 95% 50%;
color: #FCFDFF;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-position: 95% 50%;
width: auto;
float: none;
color: #392B68;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-position: 95% 50%;
color: #FCFDFF;
width: auto;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;

because of the interpretation of the different browsers, it is very difficult to get the correct outcome each time.
In your case, I would do exactly as you have done, that is apply an auto width to the menu item and then apply a padding to fill the rest. I then centre the menubar so that the difference is equally divided betweeen left and right.
Gramps

Fixed width Portal

Team,
We are trying for a fixed width portal in 6.1, by changing the portalContent style in portal60.template and generating the styles, we are able to get the portal with fixed width. But portal is left aligned, how can we make the portal centered.
used "text-align: center" but it didn't help.
.portalContent
width: 950px;
text-align: center;
overflow: auto;
Which style we need to use for this.
Thanks,
Ramesh
Edited by ramesh.totakoori at 01/16/2007 6:15 PM
Edited by ramesh.totakoori at 01/16/2007 6:16 PM

Hi Ramesh,
Try adding "margin: auto" to the .portalContent CSS block and it should work in any correctly-implemented browser (Firefox, Safari, Opera).
Leave the "text-align: center" in there because I think it's needed for IE 6. Not sure if IE 7 addressed this issue or not.
Hope this helps!
Chris Bucchere | bdg | [email protected] | http://www.bdg-online.com

Fixed width for WebPart Zones with Tableless design lost width in IE8+, works fine in IE7 SharePoint 2010

Hi,
I am facing a weird issue in IE8 and above browser after changing the Tables to <div> (Table less) Design for SharePoint 2010 Layouts with Custom Web part Zones.
If no webpart is added in Zones the width is not staying. refer the above Screen shot.
A basic HTML with fixed width Div blocks no issue in IE8+. Only SharePoint this is a issue.
Any lights here please help.
thanks
Vinod

Hi,
We can use IE F12 developer tools to check the CSS style in this Web Part Zones.
Using F12 Developer Tools to Debug HTML and CSS
https://msdn.microsoft.com/en-us/library/ie/gg699337%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
Or try to add "!important" in your custom div CSS style.
<style type="text/css">
#divid{
width: 1010px !important;
</style>
Best Regards,
Dennis Guo
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

2 CSS Questions on my layout

Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!

Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team.

How to create a fixed-width column within an APEX 4 interactive report?

This thread is a follow-up to {message:id=9191195}. Thanks fac586.
Partial success: The following code provided by fac586 limits the column width of the Apex 4 interactive report column as long as the column data contains whitespace within a Firefox 3.6 browser:
<pre class="jive-pre">
<style type="text/css">
th#T_DESCRIPTION {
width: 300px;
td[headers="T_DESCRIPTION"] {
width: 300px;
word-wrap: break-word;
</style>
</pre>
Notes:
1. The code above is put into the HTML header section for the page.
2. T_DESCRIPTION is defined as VARCHAR2(2000).
3. The code above works within the Firefox 3.6.12 browser but does not work within the Internet Explorer 7.0.5730.13 browser.
I tried adding "float: left;":
<pre class="jive-pre">
<style type="text/css">
th#T_DESCRIPTION {
width: 300px;
td[headers="T_DESCRIPTION"] {
width: 300px;
word-wrap: break-word;
<font color="red"> float: left;</font>
</style>
</pre>
Notes:
1. "float: left;" does not require whitespace and successfully splits the column between characters in lieu of whitespace.
2. "float: left;" shrinks the cell height and allows the page background to show through... couldn't determine how to fix this.
3. The code above works within the Firefox 3.6.12 browser but does not work within the Internet Explorer 7.0.5730.13 browser.
I've done some more research, but I still haven't discovered how to create a fixed-width column within an APEX 4 interactive report that displays properly within an Internet Explorer 7 browser.
Any ideas and help will be appreciated.

Thanks for your help with this!
<pre class="jive-pre">
what theme are you using?
</pre>
A customized version of theme 15.
<pre class="jive-pre">
Floating a table cell makes no sense (to me anyway).
</pre>
You are correct. I was just trying a different approach ... trying to think out of the box.
<pre class="jive-pre">
Think you'll need to create an example on apex.oracle.com with sample data
if there are any further problems.
</pre>
Great suggestion! The code your provided works in the Firefox 3.6.12 browser, but still doesn't work within my Internet Explorer 7.0.5730.13 browser.
UPDATE:
I have recreated the problem at apex.oracle.com, you can use the following information to check it out:
URL: http://apex.oracle.com/pls/apex/f?p=43543:100::::::
Workspace: IR_FIXED_WIDTH_COLS
Username: GUEST
Password: Thx4help
Application: 43543 - CM_RANDY_SD
Note: Table name is TEST_DATA
The following code provided by fac586 works in both Firefox 3.6 and IE7 using default theme "21. Scarlet" at apex.oracle.com; however, it doesn't work when I use a copy of our customized theme "101. Light Blue":
<pre class="jive-pre">
<style type="text/css">
.apexir_WORKSHEET_DATA {
th#T_DESCRIPTION {
width: 300px;
max-width: 300px;
td[headers="T_DESCRIPTION"] {
max-width: 300px;
word-wrap: break-word;
</style>

</pre>
Any idea what in the theme could be causing the fixed width column to be ignored in IE 7?
Edited by: CM Randy SD on Dec 7, 2010 11:22 AM

How to display fixed width column in Advanced Table?

Hi,
This is probably a newbie question for OAF. My requirement is quite simple but I couldn't find the answer in either the OAF developer's guide or anywhere else so I turn to the experts here. I have a region of type Table or Advanced table with three items in them. One of the Item is of type comments which could be up to 4000 characters.
I wanted to show all three on the first page but only have fixed width for the comments section like only show the first 50 characters for example and then if they want to see more detail they can click on a link to see full comments.
The problem is I cannot figure out how to make the comments item fixed width. I have played with the table width properties but it keeps displaying the comments in multiple lines (I don't want that...). I have also tried putting the Table in a Row Layout but it doesn't seem to help.
Since this is new development I can change my region style to anything to meet my requirements.
I hope this is an easy question and if someone can help me that would be great....:-)

Hi,
Thanks but I was not wanting to change the VO attribute length size since I want to have a link on the first page which would enable to see a user the full 4000 comments using the same VO object. Then if I limit it to 50 characters in the VO, I will not be able to display the full comments on the second page.
Isn't there some way in the UI that I can limit it? I know one workaround I can use for now is to have another column in the VO with the 50 character value such as substr(comments, 1, 50) and then have the full comments selected also in the VO and then show this subtr value in the first page and the comments value in the 2nd. I just thought there would be an easier way about it then doing all this workaround.
Any ideas?
Thanks

Css position:fixed works on mozilla 21/IE10 but not in chrome ?

Hello guys,
     I want to stick in position a rectangle or photo while scrolling browser.
I am using    sym.$("Rectangle3").css({"position":"fixed"});
This works fine in Mozilla and IE10 but not in chrome (Version 27.0.1453.116 m)
Anyone to help please?
Thanks in advance.
Anthony

Antony,
I will defer to what Sarah said.
In the future if you needed to add browser prefixes to correct differences which happen for a number of things like transform or shapes, etc..
Or course this will not correct a bug which I was not aware of in this particular case.
Here is how to add browser prefixes:
In this case to make an ellipse a circle because chrome did not recognize the ellipse. I added Opera prefix to show you the syntax.
sym.$('Ellipse').css({
          '-webkit-border-radius': '50%',
          '-o-border-radius': '50%',
          'border-radius': '50%',
          'width': '35px',
          'height': '35px'
Sometime the syntax is a little different. Just google the css to make sure.
Here is another example for a Star Wars intro where I added browser prefixes for Explorer (-ms-), Chrome (-webkit-), and Firefox(-moz-).
The code can be combined but I did not this time for this sample.
Sample files here:
https://www.box.com/s/bdu5c4lq67fkfy7blfhc
// FF
sym.$('gradient').css('background', '-moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-moz-transform-origin', '50% 100%');
sym.$('container').css('-moz-transform', 'perspective(250px) rotateX(25deg)');
// Chrome and others
sym.$('gradient').css('background', '-webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-webkit-transform-origin', '50% 100%');
sym.$('container').css('-webkit-transform', 'perspective(250px) rotateX(25deg)');
// Internet Explorer
sym.$('gradient').css('background', '-ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-ms-transform-origin', '50% 100%');
sym.$('container').css('-ms-transform', 'perspective(250px) rotateX(25deg)');

How to fix width of plain text content control in Microsoft Word 2010?

I try to make the simplest solution for my custom to modify current Word template without hard code anything except field name.
As you can see above image, normally text field in Word is not fixed width control. So, it may affect document layout. Moreover, I want to add dotted line below all text fields in document template.
Is there any possible solution that end-user can do in normal Microsoft Word 2010 application?
PS. I will fill all controls with data from Microsoft Access.

In PDF file, I can easily create fix-size absolute position field inside document template like the following document. In Microsoft Word, I cannot fix even the size of plain text field.
PS. Nobody use table with fixed cell size as normal form (hard copy). I think Microsoft Word is really bad choice for creating any document template by end-user.
Criticizing Word for not doing the same as some other application is hardly relevant. Have you tried word-processing with Adobe Acrobat?
As for your PS, Word tables are ideal for the kind of thing you describe. Your assertion that 'nobody' does so is plain ignorance - it is a common practice. In my previous employment,
many forms were created using Word tables. Before complaining Word is a 'really bad choice', you should learn how to use it.
Cheers
Paul Edstein
[MS MVP - Word]

Fixed-width left-hand column in Muse

I'm trying to create a web page that has a fixed-width left-hand column (say 300 px) and an adjustable content area to the right that changes according to the size of the browser window. Is this possible in Muse?

In your "Site Properties" Layout panel you can set this up by adjusting the padding section.
Turn off the Centre Horizontal button, add pixels to the Left input sector. (see image)

Fixed Width Report Region

Is it possible to set a report region to fixed width rather than auto? If so, where do I edit this? Thanks!

Oh yes, you can do it on the fly with Dynamic Actions. Its all about changing the CSS Class property for table width.
Once you know how to identify the table and have its "class", you write a Dynamic Action at process point "After Page" to change the Class width property.
You could also write a OnLoad JS function to do the same. Depends on which you are more comfortable.
regards,

CSS Centered & Fixed Width Layout

Similar Messages

Maybe you are looking for