How to make pages fit to any screen size

Is there a way to make the pages stretch or condense so that it fits any size screen? I've found where I can adjust the px size of the individual pages but I get white borders at the left/right and bottom edges of the screen that vary depending on the monitor size that I am viewing the page on. Is there a fix for this? Thanks.

Welcome to the Apple Discussions. By screen size do you mean browser window size? If so you can get rid of the white around the body of the page by using a solid color or tiled image for the browser background which is set in the Inspector/Page/Layout pane.
Or, if you want the page background to be the same as the browser background do the following;
1 - set the browser background to what you have the page set to.
2 - set the page content background to transparent.
Now the page background will fill the browser's window no matter what size it is. That's how I have my tutorial site setup: http://toadstutorials.info.
Click to view full size
OT

Similar Messages

How do i make site fit in diffrent screen Sizes?

How do i make my site fit in all screen sizes?
Thanks
-Bryan

"BryanRob" <[email protected]> wrote in
message
news:emsf4m$nhc$[email protected]..
> Heres what i did i made a site about that size in
photoshop then saved it
> and
> put it in dreamweaver in a layer and moved the layer so
it woul dbe
> centered
> then i added this code to get backround colar <BODY
bgcolor="#3c0404"
> text="#000000"> and then added another layer on top
just for text. What am
> i
> doing wrong? SOme people say it looks good some dont.
What are you doing wrong?
1. Creating the site in Photoshop (web sites shouldn't be
made entirely of
graphics..)
2. Using Dreamweaver layers
3. Using deprecated code to style the the background color
instead of CSS...
As far as how it looks, obviously we can't say anything
unless we see it..
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

How to make website fit any screen size?

Hello all!
I am trying to make my website fits any screen size (desktop, tablet, mobile)
In Dreamweaver cs6, I go to file -multiscreen preview – Media Queries- make a CSS file for (site-wide) and click on the Default Presets and then find my CSS files for phone, tablet and desktop. But it does not work for my website, my site does not respond to the size of desktop, tablet or mobile. Can someone please help? Thank you.

The main rule to follow for a responsive design is be flexible.
That means no rigid dimensions, no absolute positioning and images that respond to the width of their containers.
The following typically breaks the rule of flexibility
#apDiv35 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
That is but one example from your document out of more than 40.
If you want a leg up regarding responsive design, have a look at http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

How to make background fit screen

how to make background fit screen

go to settings
go to desktop & screen saver
there you have a dropdownbox with all the options

How to make a field in selection screen as READ_ONLY !!

Hi,
   How to make a field in selection screen as READ_ONLY !!.
Thanks,
Senthil

This is the code you need to have in your program.
AT SELECTION-SCREEN OUTPUT.
LOOP AT SCREEN.
IF SCREEN-NAME = 'MYSELFLD'.
    SCREEN-INPUT = 0.
    MODIFY-SCREEN.
ENDIF.
ENDLOOP.

How to make required field on selection screen in Query

i'm now working with query(SQ01).
but don't know how to make required field on selection screen in Query.
thanks in advance

i'm now working with query(SQ01).
but don't know how to make required field on selection screen in Query.
thanks in advance

How can I resize a JFrame ,to fit into the screen size

I have a Jframe which has JPanel and JPanel contains lot of other components.JPanel size is 980,1400. when i use JFrame.show method jpanel goes beyond the screen size in length and I am not able to see the portion below the screen.How can I resize the JFrame so that JFrame and JPanel shrinks to fit into the screen size.I need this because I have a PRINT button at bottom of the JPanel.Thanks.

Thank you for your reply.I tried with the following code as you have told.But the frame is still going beyond the screen.Can you please look into it and tell me whats wrong ?
//public class PlayerRegForm extends javax.swing.JFrame implements Printable
public static void main(String args[]) {
PlayerRegForm prf = new PlayerRegForm();
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Dimension frameSize = prf.getSize();
if (frameSize.height > screenSize.height)
frameSize.height = screenSize.height;
if (frameSize.width > screenSize.width)
frameSize.width = screenSize.width;
System.out.println("Screen Size ----------------- " + screenSize);
System.out.println(" Frame Size ----------------- " + frameSize);
prf.setSize(frameSize.width, frameSize.height);
prf.pack();
prf.show();
=============================================================================
Screen Size ----------------- java.awt.Dimension[width=1024,height=768]
Frame Size ----------------- java.awt.Dimension[width=112,height=28]

Need background to fit on all screen sizes

Hi
I have got one of websites live digital-colours.co.uk but the background looks different on different screen sizes, I am just looking to see if any of you have an idea how I can make it fit on all screens.
Thanks
Faye

Hi Faye,
you could have a look here: http://johnpatrickgiven.com/jquery/background-resize/ (You have to wait a little bit until the image is completely built.) On the other hand you should have a view to your site in a global way with critical eyes with "Google labs - Browser Size":
http://browsersize.googlelabs.com/
Hans-Guenter

How to make a copy of a legal size document on HP Officejet Pro 8600

How to make a copy of a legal size doucment on HP Officejet Pro 8600 e-All-in-One?

Hi,
Please try
(a) Load legal size papers onto the input tray (you have to extent the tray from the blue/cyan part to fit legal size papers),
(b) Load original face up on the ADF,
(b) Touch copy,
(e) Touch Settings (now you can change size and few other options,
(f) Touch Black or Colors to copy.
Regards.
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

How do I lock in a reduced screen size, so whenever FF starts, the reduced screen size appears?

How do I "lock in" a reduced screen size (that I made by dragging the screen edges) so that whenever I start FF the reduced screen size always appears?

Make sure that you do not start Firefox maximized.
You can check that in the Properties of the (desktop) shortcut.
Firefox should reopen with the window size with which it was closed the previous time.

How do i make this page adapt to all screen sizes???

if i copy and paste my index code can someone please tell me if theres anything i can add so it will adapt to all screen sizes??
<!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>Nicola Campbell Photography</title>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:1001px;
          height:170px;
          z-index:1;
          left: 438px;
          top: 221px;
#navbar {
          height: 40px;
          width: 900px;
          margin-right: auto;
          margin-left: auto;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
</style>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script type="text/xml">

</script>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:901px;
          height:49px;
          z-index:2;
          left: 487px;
          top: 51px;
          text-align: center;
          color: #FF99FF;
          font-size: 80px;
          font-family: HaloHandletter;
#apDiv3 {
          position:absolute;
          width:409px;
          height:56px;
          z-index:3;
          left: 768px;
          top: 96px;
          color: #999999;
          font-family: "Adobe Garamond Pro";
          font-size: 24px;
#apDiv2 div {
          font-size: 100px;
          font-family: HaloHandletter;
          color: #999999;
#apDiv4 {
          position:absolute;
          width:901px;
          height:449px;
          z-index:4;
          left: 451px;
          top: 202px;
#apDiv5 {
          position:absolute;
          width:848px;
          height:152px;
          z-index:11;
          left: 433px;
          top: 201px;
#apDiv6 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:5;
          left: 1250px;
          top: 138px;
#apDiv7 {
          position: absolute;
          width: 891px;
          height: 42px;
          z-index: 5;
          left: 552px;
          top: 174px;
#apDiv8 {
          position:absolute;
          width:48px;
          height:50px;
          z-index:6;
          left: 102px;
          top: 51px;
#apDiv9 {
          position:absolute;
          width:49px;
          height:51px;
          z-index:7;
          left: 152px;
          top: 51px;
#apDiv10 {
          position:absolute;
          width:49px;
          height:49px;
          z-index:8;
          left: 202px;
          top: 51px;
#apDiv11 {
          position:absolute;
          width:52px;
          height:52px;
          z-index:9;
          left: 252px;
          top: 51px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<meta name="Description" content="Welcome to Nicola Campbell Photography. I am based in Lancashire and specialise in Wedding Photography." />
<meta name="viewport" content="width=device-width" />
<link href="untitled.css" rel="stylesheet" type="text/css" />

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />

<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />

<link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />
<style type="text/css">
#apDiv12 {
          position:absolute;
          width:1013px;
          height:648px;
          z-index:1;
          left: 321px;
          top: 299px;
</style>
</head>
<body onload="MM_preloadImages('navbaroriginalroll_r1_c1.jpg','navbaroriginalroll_r1_c2.jpg','n avbaroriginalroll_r1_c5.jpg','navbaroriginalroll_r1_c6.jpg','navbaroriginalroll_r1_c7.jpg' ,'navbaroriginalroll_r1_c8.jpg','navbar_r1_c4.jpg')">
<div id="apDiv2">
<div align="center">nicola campbell</div>
</div>
<div id="apDiv3">P H O T O G R A P H Y</div>
<div id="apDiv7"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar','','navbaroriginalroll_r1_c1.jpg',1)"><img src="navbaroriginal_r1_c1.jpg" alt="c1" name="navbar" width="111" height="40" border="0" id="navbar2" /></a><a href="Aboutme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','navbaroriginalroll_r1_c2.jpg',1)"><img src="navbaroriginal_r1_c2.jpg" name="Image13" width="111" height="40" border="0" id="Image13" /></a><a href="Gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','navbaroriginalroll_r1_c5.jpg',1)"><img src="navbaroriginal_r1_c5.jpg" alt="c5" name="Image21" width="111" height="40" border="0" id="Image21" /></a><a href="Blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','navbaroriginalroll_r1_c6.jpg',1)"><img src="navbaroriginal_r1_c6.jpg" alt="c6" name="Image22" width="111" height="40" border="0" id="Image22" /></a><a href="ContactMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','navbaroriginalroll_r1_c7.jpg',1)"><img src="navbaroriginal_r1_c7.jpg" alt="c7" name="Image23" width="111" height="40" border="0" id="Image23" /></a><a href="Clients.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','navbaroriginalroll_r1_c8.jpg',1)"><img src="navbaroriginal_r1_c8.jpg" alt="c8" name="Image24" width="111" height="40" border="0" id="Image24" /></a><a href="Weddings.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','navbar_r1_c4.jpg',1)"><img src="navbar_r1_c41.jpg" alt="" name="Image25" width="111" height="40" border="0" id="Image25" /></a></div>
<div id="apDiv5">
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
    <p> </p>
    <div id="main" class="wrapper clearfix">
      
      <div id="container">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li> <img src="hollie.jpg" width="500" height="600" /> </li>
            <li> <img src="slider2.jpg" width="500" height="600" /> </li>
            <li> <img src="slider3.jpg" width="500" height="600" /> </li>
            <li> <img src="slider8.jpg" width="500" height="600" /> </li>
            <li> <img src="slider4.jpg" width="500" height="600" /> </li>
            <li> <img src="slider5.jpg" width="500" height="600" /> </li>
            <li> <img src="slider6.jpg" width="500" height="600" /> </li>
            <li> <img src="slider1.jpg" width="500" height="600" /> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider" style="display:none;">
          <ul class="slides">
            <li> <img src="hollie.jpg" width="500" height="600" /> </li>
            <li> <img src="slider2.jpg" width="500" height="600" /> </li>
            <li> <img src="slider3.jpg" width="500" height="600" /> </li>
            <li> <img src="slider8.jpg" width="500" height="600" /> </li>
            <li> <img src="slider4.jpg" width="500" height="600" /> </li>
            <li> <img src="slider5.jpg" width="500" height="600" /> </li>
            <li> <img src="slider6.jpg" width="500" height="600" /> </li>
            <li> <img src="slider1.jpg" width="500" height="600" /> </li>
          </ul>
        </div>
      </div>
    </div>
    
</div>

</div>

<div id="apDiv8"><a href="https://www.facebook.com/nicola.shulmancampbell?fref=ts"><img src="Retro-Facebok-Rounded-128.png" width="48" height="48" /></a></div>
<div id="apDiv9"><img src="Retro-Flickr-Rounded-128.png" width="48" height="48" /></div>
<div id="apDiv10"><img src="Retro-Tumblr-Rounded-128.png" width="48" height="48" /></div>
<div id="apDiv11"><a href="https://twitter.com/nicola_shulman"><img src="Retro-Twitter-Rounded-128.png" width="48" height="48" /></a></div>
<script type="text/javascript">
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
</body>
</html>

APDivs cannot be resized.
APDivs in primary layouts won't work in Responsive Web Design.
APDivs are a very poor layout method.
For this reason, Adobe removed APDivs from Dreamweaver CC.
Example of Fluid Grid Layout with floats & margins, no APDivs required.
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

How To Make Website Resize On Different Screens

Hi, I created a website on Dreamweaver CS3. The website is great and all but whenever I see it on my laptop it fits perfect on the screen but when I use a larger monitor the website looks a bit small.
I did some reading and apparently I made the mistake of using ' <none> as my layout so everything is measured on pixels. How can I make it so that the page resizes depending on the screen size?
I will post my code. and website on here!
Website: www.auto-republic.com
Code: http://pastebin.com/h8DLq7VK
Thanks in advance!

Actually, your mistake was using Absolute Positioning for most of this which removes content from the normal document flow. You should rebuild without any positioning. Here's why APDivs are pure poison in primary layouts.
http://www.apptools.com/examples/pagelayout101.php
If you want a responsive layout that adjusts to various device widths, look at CSS Media Queries and/or the Fluid Grid Layouts feature in CS6.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

How to make pages a graphics layout program

In the earlier version og Pages, you used to beable to choos wheater you wanted to use the program as a wordprosesser or a graphics layout program.
How do you make this desigation in the new version of Pages.

If you use the Help in the Help menu in your Pages you will find this
Create a page layout document
In page layout documents, every page is a blank canvas to which you can add text, images, shapes and other objects, and arrange them however you want. Some Pages templates are designed specifically for creating page layout documents.
If you're using a word-processing template, you can convert it to a page layout document at any time, to have more flexibility in how you design each page. For example, to add text to a page layout document, you add text boxes and type your content in them. You can then layer text boxes with objects, which isn't possible in word-processing documents.
Important: When you convert a word-processing document to a page layout document, any existing body text (text that's not in a text box) is deleted. If you want to save the body text, copy it before you convert the document, then paste it into a text box or another Pages document. Also, when you convert, all objects that are set to move inline with text (in the Arrange pane of the Format inspector) are deleted. All other objects are set to stay on the page and not move with text.
Convert a word processing document to a page layout document
You can covert a document at any time, but it's easiest to do it when you first open the word processing document template (for example, the Blank templates).
Do one of the following:
Choose File > Convert to Page Layout (from the File menu at the top of your computer screen).
Click Setup inspector , click Document, then deselect the Document Body tickbox.
To convert from a page layout document to a word processing document, choose File > Convert to Word Processing (from the File menu at the top of your computer screen).

How to make page centerd in window?

I'm very new to web design, so please keep that in mind.
My canvas is 800x600, and when I preview it in my browser
that page apears in the top left hand corner (probably default). I
would like to know if there is any way to position it in the center
of the page - keeping in mind that viewers would have different
screen resolutions when viewing it. So saying "just make the canvas
bigger and move it over" wont work because someone viewing it with
a screen at 800x600 would see it differently than one with
1600x1200.
These diagrams explain it better:
This is how it is now:
http://img176.imageshack.us/img176/5236/fireworks154454782hq.jpg
This is how i want it to look:
http://img283.imageshack.us/img283/1070/fireworks4633734hg.jpg
I also would like a background behind the canvas.
Infact exactly how this forum is set up is a perfect example. It
has the white page with text etc... and the gradient background
behind it.
How would I go about doing this?
And please keep in mind that I am new to this (just got
fireworks this past weekend, and this is the first site I am trying
to make).
I appreciate any help :-)

Here is some information on centering using CSS:
http://www.maxdesign.com.au/presentation/center/
Here is some info on backgrounds:
http://www.dellwebsites.com/web/background.html
Barefax wrote:
> I'm very new to web design, so please keep that in mind.
>
> My canvas is 800x600, and when I preview it in my
browser that page apears in
> the top left hand corner (probably default). I would
like to know if there is
> any way to position it in the center of the page -
keeping in mind that viewers
> would have different screen resolutions when viewing it.
So saying "just make
> the canvas bigger and move it over" wont work because
someone viewing it with a
> screen at 800x600 would see it differently than one with
1600x1200.
>
> These diagrams explain it better:
>
> This is how it is now:
>
http://img176.imageshack.us/img176/5236/fireworks154454782hq.jpg
>
>
> This is how i want it to look:
>
http://img283.imageshack.us/img283/1070/fireworks4633734hg.jpg
>
>
> I also would like a background behind the canvas.
> Infact exactly how this forum is set up is a perfect
example. It has the white
> page with text etc... and the gradient background behind
it.
> How would I go about doing this?
>
> And please keep in mind that I am new to this (just got
fireworks this past
> weekend, and this is the first site I am trying to
make).
> I appreciate any help :-)
>

How to make a movie of the Screen

In OS 9 I was able to make a QuickTime of the screen while I was drawing in Photoshop. But that was a long time ago. How does it work in OS X Tiger. My old mac had a microphone. My new G5 imac does not.

You can still capture a screen in OS X. It saves your captures as .png image files to your Desktop.
Command-Shift-3 will capture all your see. Command-Shift-4 will turn your mouse into cross-hairs that you drag across any area. And a click on the spacebar (after the above keyboard commands) will turn your cursor into a camera icon that can capture individual windows. Still free.
Snapz Pro allows you to capture (as QuickTime video) anything in its window. It continues to capture until you close it.
One of my "movies" made with it:
http://homepage.mac.com/kkirkster/mycareerfuture/
Only 1.3MB's and it "plays" full screen.

How to make pages fit to any screen size

Similar Messages

Maybe you are looking for