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
Similar Messages
-
Background image sizing for all screen sizes
How do I make my background image conform to different size screens? I had it set for my 27" monitor but it looked horrible on my laptop so I made it smaller and its still not fitting my laptop scree and it looks so small on my 27' now its horrible there. Please help???
Hello,
I would suggest you to use this image as the browser fill.
You can check the links about browser fill:
Add an image to the background of the page or browser | Adobe Muse CC tutorials Check from 2:00
https://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
Regards
Vivek -
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 adjust the AICC compliant CBT's to fit all screen sizes across browsers in Captivate 4
Hi,
I have made changed my Adobe Captivate 4 files to be AICC compliant by changing the Settings in Preferences.
When I publish the files, the standard.js file no longer adjusts the CBT's to fit all screen sizes across browsers, as it was doing before by adding the below code -
<style type="text/css"> html, body, #CaptivateContent { height:100%; }
body { text-align:center; margin:0; padding:0; overflow:hidden; }
</style>
Is there a way to scale Adobe Captivate AICC compliant files across different browsers?
Thanks!That code doesn't go in the standard.js file but goes in the head of the HTM template used for AICC output.
Look in your Captivate install directory for the Templates > Publish > AICC > Default.HTM file and add the code there.
If you want 300 more troubleshooting tips for Cp, you'll need to read the book:
http://www.infosemantics.com.au/troubleshoot-adobe-captivate -
Adobe muse-website that fit all screen sizes
hi
i want to build a site in adobe muse.
can i choose the sizes of the elements in the site to be with precents insted of pixles?
( i wanted to make my website in adobe muse fit all screen sizes)Please refer to Zak's response :
Re: Can you create responsive sites with Adobe Muse?
thanks,
Sanjit -
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] -
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">
<!--
<oa:widgets>
<oa:widget wid="2827522" binding="#OAWidget" />
</oa:widgets>
-->
</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" />
<!-- Phone -->
<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
<!-- Tablet -->
<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />
<!-- Desktop -->
<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><!-- #main-container -->
<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">
<!-- FlexSlider -->
<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>
<!-- #main -->
</div>
<!-- #main-container -->
</div>
<!-- #main-container -->
<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. -
Dynamic ALV that fits all screen sizes.
Hi Pundits,
Could you please help me with how i can modify an alv, which is created using OOPS, to fit all the screen sizes without having to change the container size.
Thanks,
ResonHi Reson,
For that u need to go for docking container,
create an object of type ref to CL_GUI_DOCKING_CONTAINER.
If u see the CONSTRUCTOR of that class, u have parameters like ratio, extension etc.
ratio : Percentage of Screen, Takes Priority Over
EXTENSION
see this sample of code :
data : o_dockingcontainer1 TYPE REF TO
cl_gui_docking_container.
CREATE OBJECT o_dockingcontainer1
EXPORTING
Ratio must be included in [5..95]
ratio = '95'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6.
IF sy-subrc NE 0.
MESSAGE i050 WITH text-026. " Error in object
creation
LEAVE LIST-PROCESSING.
ENDIF.
Here the ratio takes the value between 5 and 95.
Please reward the helpful answers. -
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 -
Getting backround image to fit in all browser sizes
I have an image of a baseball field that I would like to use as the backround of a website I am building. The problem I am having is that the image doesn't adjust to the size of the browser if I shrink or inlarge the browser. Is there a way to get backround images to autofit the browser with dreamweaver?
No. Background images are static. They are the size that they are. You can't make a huge background fill viewport in all displays so don't even attempt to use this as your body background image.
The best backgrounds are small, seamless tiles or slices that you can repeat vertically and/or horizontally to fill the available viewport.
More on Backgrounds:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
I'm having an issue with setting up mini dvi to hdmi. I can connect and see the background picture from my macbook (approx 4 years old) but in order to see any screens or video, I have to move the screen almost all the way off the macbook display to the right. Any ideas why this would happen? Also, there is no audio, although when I bought the adapter and cable at the Mac store, they assured me it would handle both.
You have the display set in Extended Desktop mode. In System Preferences>Displays on the MacBook screen there should be an Arrangement tab when you have the MacBook hooked up to the TV and both screens working. When you click the Arrangement tab do you see two monitors side by side? One of them will have a Menu Bar at the top. Just click on the Menu Bar and drag it to the second monitor. That will makethe second monitor your main screen. You can now use your MacBook in ClamshellMode with a wired or Bluetooth keyboard and mouse. http://support.apple.com/kb/HT3131 When you disconnect from the TV your Menu Bar will automatically change back to the MacBook.
Or if you want to work on the MacBook screen while showing it on a TV you can check the Mirror Display box on the lower left hand side of the Arrangement tab under the two monitors box.
No Mini-DVI adapter can carry audio. The only MacBook that sends audio is the Mid 2010 model 7,1 through a Mini DisplayPort.
If you connect the MacBook using a Mini-DVI to HDMI adapter you will probably need to use external speakers or a 3.5mm stereo headphone jack to RCA sound plugs connected to a stereo system for audio if your TV doesn't have separate RCA input plugs for audio with the HDMI plug. The Mini-DVI to HDMI doesn't carry audio and there're no audio plugs on most TVs to work with HDMI since it's expecting audio with the HDMI. -
Please help with making website compatible with all screen sizes
I have recently made a new website using both Adobe Edge Animate and Adobe Dreamweaver.
It looks great and does exactly what I want it to do for the moment. However when using the site on a large screen, anything larger than an ipad mini the site only fills a section of the screen.
Have tried to seach on google for the answer to this and came accross a number of potential solutions.
1, changing the pixel values in Dreamweaver for my site from for example "1024px" to "100%" this sadly did nothing.
2, changing the px values of the Adobe Edge Animate composition from for example "1024px" to "100%" again sadly this did nothing.
3, combining both the above to see if they had to work in conjunction with each other... again though, sadly no luck.
The site address is www.serenabalfour.com
I would really appreciate it if anyone could give me some advice on this issue... I really want to sort it out for this friend of mine.
Thanks very much
PaulThis is less a DW question and more of an Edge Animate question.
You need to create your Edge Animation project with % or use a Scale-to-Fit method. Manually add some breakpoints to re-scale text, etc... with CSS media queries.
http://forums.adobe.com/message/5414992
Nancy O. -
CSS how to get it to fit all Screens?
Hey all!
I am looking around online for sites to try and re-crate. its going great so far, they all turn out perfect. BUT.
They don't fit on all Screens. I make them on my main rig, and it has a bigger screen than any other........I think you know what I mean hehe.
Any way here is what I did to try and fix it.
body {
width:100%;
background-image:url(Images/Kayak_1_Home_01.jpg);
background-size:cover;
that is a bit of the CSS that I did to try and fix it but did not work.
can anyone help? this is all of the CSS
I chose the site with the least amount of CSS code hehe
/* CSS Document */
body {
width:100%;
background-image:url(Images/Kayak_1_Home_01.jpg);
background-size:cover;
p {
position:relative;
color:#FFF;
font-size:20px;
display:inline-block;
left:650px;
top:-50px;
#text {
position:relative;
left:700px;
top:300px;You can also try a Twitter Bootstrap integration directly in Dreamweaver. All you need is an extension for DW, which is free and you can download it from http://www.dmxzone.com/go/21759/dmxzone-bootstrap. You can work with both fluid or fixed grid layouts.
-
Best Adobe Captivate Screen Size for all Devices?
Which would you say is the best screen size to use to cater for all device types (pc, laptop, tablet, mobile, etc.)?
Thanks.Hi there,
You can select any moderate screen size and publish the course and on the publish dialog box, check "Scalable HTML content" (only in case of .swf, HTML5 and PDF).
If you are not sure about which screen size to choose and you are creating a course for large audience for devices and systems of different resolution, then 800 X 600 is recommended.
But now, with scalable HTML content checked, your course window will fit to the screen size of the device, and there will not be any scroll bar.
Thanks. -
What are "average" screen sizes, resolutions etc. for viewing websites?
This may be the wrong forum but -
All screen sizes vary, all browser outputs vary, and all individual preferences for browsers are subjective.
Having stated the obvious, can anyone offer guidance on the best 'common denominator' settings/set-up procedure on starting out on a web design so that the best 'average' viewing and reading is achieved? A tough one!
I now have an iMac 24" set high on 1920 x 1200 and my current website looks fine. But now I'm told 800 x 600 is still a fairly common screen resolution worldwide, and viewed on this my pics and texts are elephantine, need scrolling mercilessly, and are.....
just plain ugly!I think it really depends on your audience. If your audience is ALL, then you'd probably better stick to 640x480 I'm sure there's a few still out there!
If your audience is "recent/new computer users, you could be safe designing for 1024x768. If you just want a good sized swath of users with computers of a decent capability, then some of iWeb's pages (several of the default themes fit well within 800x600) are good for this, leaving plenty of room for dragging items to the desktop and accounting for scroll bars
Maybe you are looking for
-
Row_number() -SQL function throws error - SAP B1 2005 B - PL 36
hi experts, when i try 2 run "SELECT * FROM (SELECT ROW_NUMBER() OVER (ORDER BY CardName) AS RowNo,CardCode,CardName FROM OCRD Where CARDTYPE='C') AS OCRD" query in SAP B1 2005 B, PL-36 it shows an error -server throw an exception. anybody can commen
-
Unble to stop at debug. : Automatically TO is created.
Hi all, Thanks for looking into this issue. I am writing ABAP code in Include ZXLTOU14 which is in EXIT_SAPML03T_003 in SAP Enhancements MWMTO008 (Storage type search for stock removal). The purpose is to change the storage type according to the busi
-
VPN settings for Apple TV - Shared Secret?
We are setting up and on network tab on the mac > connect up > the L2TP / VPN server did not respond - verify settings (auto), asks for a shared secret...anyone know what to do....thanks, Louise
-
Is there a good replacement wireless network card that fits into my HP G72-B60US laptop. The Broadcom 4313GN wireless card that came with it will only do 72Mbps tops. If I plug in a Netgear A6200 USB adapter, the speed goes up to 144Mbps. I'd like
-
I was send an email via apple stating that I need to update my credit card information or my account will be cancelled in 48hours. Is this a valid email or fraud. I had the iphone for more than 2 years and did not receive a similar email