How do I make my webpage 100% width on any desktop resolution?

Hi,
I designed a website mockup on Photoshop with the dimensions of W: 1280 x H: 2464 but when placing the JPG file on the empty homepage
to see how it would look and fit, it wasn't taking up the whole screen and instead was centre and there was white background left and right.
I'm viewing this on my desktop thats 1920x1080.
I'm new to Muse so I'm not sure what is the best dimension settings to choose for a website that would work great on almost any desktop.
An exmple of the style of website I want to create is the Nestea website
For the header and footer of my website I have a huge image instead of a solid colour.
I know the images have to be really large so they don't get stretched out and loose quality but
if someone could tell me the dimensions and settings to put when creating a new website so that
I could re-mockup the website with the same dimensions and that if I placed the JPG file to see how it
would look, that it would fit edge to edge and not loose any quality.
Thanks

Hi,
You may find the below resources helpful in getting you started with a flexible width site in Muse similar to the example you provided.
http://tv.adobe.com/watch/muse-feature-tour/muse-design-for-flexible-browser-width
https://helpx.adobe.com/muse/how-to/add-100-width-slideshow.html
http://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
http://tv.adobe.com/watch/learn-adobe-muse-cc/adding-scroll-effects/
http://helpx.adobe.com/muse/using/scroll-effects-opacity-slideshow-animate.html
Cheers,
Vikas

Similar Messages

How can I make a window show up in every desktop?

How can I make a window show up in every desktop so when a user switches views it's still on their screen, using Xcode, Applescript-ObjC?

hi, try this:
public static void centerWindow(Window win){
Dimension screenSizeWithSpeedBar = Toolkit.getDefaultToolkit().getScreenSize();
Dimension screenSize = new Dimension(screenSizeWithSpeedBar.width,screenSizeWithSpeedBar.height-25);
Dimension frameSize = win.getSize();
if (frameSize.height > screenSize.height)
frameSize.height = screenSize.height;
if (frameSize.width > screenSize.width)
frameSize.width = screenSize.width;
win.setSize(frameSize);
win.setLocation((screenSize.width - frameSize.width) / 2, (screenSize.height - frameSize.height) / 2);
It works with following arguments: JWindow, JFrame and JDialog

I want to delete my icloud-account from my iphone 5 and then register again, because I want to change my email-address/account name. What would be the steps to follow? How do I make sure I do not lose any information stored on/in my iphone 5?

I want to delete my icloud-account from my iphone 5 and then register again, because I want to change my email-address/account name. What would be the steps to follow? How do I make sure I do not lose any information stored on/in my iphone 5?

You would have to delete the existing iCloud account and create a wholly new one - you cannot change the @icloud.com email address of the one you already have. To make a new one, you will also need an new AppleID as any AppleID can only have one iCloud account associated with it.
Deleting the account will not delete anything off your device (if prompted for things like contacts, choose to keep them). You will have to sync everything anew with the new account as you cannot move your sync'd content, your old backups or anything else from one iCloud account to another. You will have to set up sync again and let it sync to the new account, and then make new backups to the new account as well.

How do i make websites think my mobile is a desktop?

How do i make websites think my mobile is a desktop? I cant stand those sites where it forces you to view the "mobile version" i want Firefox to automatically tell them its a "desktop" not a "mobile" so that i can go to any site without changing anything but the FULL website.
Thank you.

Open the add-ons screen (see [[How do I find and install Add-ons?]]) and search for the "Phony" add-on. This will let you tell websites that you're using a desktop version.

How to set an object to 100% width now that Muse no longer has the button?

I'm trying to set a slideshow to 100% width like the tutorials constantly talk about, but that is no longer possible in the latest version of Muse. The button is gone. So how do you do it? And why did Adobe remove the 100% width button? They seemed proud of it when it was released as a new feature.

Hi,
The 100% width option is available for the slideshow widget. But to use it in your slideshow, make sure you have selected the "Hero Image" of the slideshow and then click on the button of the 100% width option.
Please refer to this screenshot :- http://prntscr.com/567j41
Hope this helps
Regards,
Rohit Nair

How can I make the webpage display the same on different sized screens?

I have made a webpage, but it appears differently in different resolutions. I am in 1920x1080 and it appears fine on my screen, but anything smaller than that, the text is zoomed in more and it is not central.
website can be found here: http://www.fitness4funswindon.net23.net/1_Index.html
How do I get this webpage/site to appear in only one specific resolution?
<!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>Fitness4FunSwindon</title>
<style type="text/css">
#apDiv1 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 154px;
          top: 69px;
body {
          background-color: #007E8A;
          background-image: url(Images/background%20image.jpg);
          background-repeat: no-repeat;
#apDiv2 {
          position: absolute;
          width: 361px;
          height: 68px;
          z-index: 2;
          left: 1009px;
          top: 311px;
          color: #FFF;
          font-size: 5em;
#apDiv2 a {
          color: #FFF;
#apDiv3 {
          position: absolute;
          width: 249px;
          height: 216px;
          z-index: 2;
          left: 1020px;
          top: 359px;
#apDiv4 {
          position: absolute;
          width: 1375px;
          height: 173px;
          z-index: 1;
          left: 19px;
          top: 433px;
</style>
<style type="text/css">
#apDiv5 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 2;
          left: 20px;
          top: 18px;
#apDiv6 {
          position: absolute;
          width: 960px;
          height: 1297px;
          z-index: 3;
          top: 12px;
          background-color: #D9E052;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: solid;
          border-top-color: #60F;
          border-right-color: #60F;
          border-bottom-color: #60F;
          border-left-color: #60F;
          margin-left: 400px;
          left: -108px;
          clip: rect(auto,auto,auto,auto);
          visibility: inherit;
          padding-left: 0px;
#apDiv7 {
          position: absolute;
          width: 960px;
          height: 246px;
          z-index: 1;
          left: 0px;
          top: 0px;
#apDiv8 {
          position: absolute;
          width: 963px;
          height: 134px;
          z-index: 2;
          top: 249px;
#apDiv9 {
          position: absolute;
          width: 962px;
          height: 115px;
          z-index: 2;
          left: -2px;
          top: 246px;
#apDiv10 {
          position: absolute;
          width: 960px;
          height: 127px;
          z-index: 2;
          left: 0px;
          top: 246px;
.instructor {
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: solid;
          border-top-color: #000;
          border-right-color: #000;
          border-bottom-color: #000;
          border-left-color: #000;
</style>
<style type="text/css">
#apDiv11 {
          position: absolute;
          width: 955px;
          height: 133px;
          z-index: 3;
          top: 419px;
          left: 5px;
          font-size: 30px;
          font-family: "Comic Sans MS", cursive;
          text-align: center;
          font-weight: bold;
          color: #000;
#apDiv12 {
          position: absolute;
          width: 255px;
          height: 505px;
          z-index: 4;
          left: 31px;
          top: 709px;
#apDiv13 {
          position: absolute;
          width: 334px;
          height: 156px;
          z-index: 5;
          left: 65px;
          top: 552px;
#apDiv14 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 4;
#apDiv15 {
          position: absolute;
          width: 372px;
          height: 348px;
          z-index: 4;
          left: 3px;
          top: 549px;
          background-color: #990;
#apDiv16 {
          position: absolute;
          width: 957px;
          height: 110px;
          z-index: 4;
          top: 568px;
#apDiv17 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 4;
#apDiv18 {
          position: absolute;
          width: 508px;
          height: 587px;
          z-index: 4;
          top: 553px;
          left: 8px;
#apDiv19 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 4;
#apDiv20 {
          position: absolute;
          width: 412px;
          height: 481px;
          z-index: 5;
          left: 544px;
          top: 553px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: medium;
#apDiv21 {
          position: absolute;
          width: 378px;
          height: 129px;
          z-index: 6;
          left: 551px;
          top: 1042px;
#apDiv22 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 4;
#apDiv23 {
          position: absolute;
          width: 161px;
          height: 115px;
          z-index: 7;
          left: 333px;
          top: 775px;
#apDiv24 {
          position: absolute;
          width: 921px;
          height: 107px;
          z-index: 4;
          left: 270px;
          top: 1213px;
          font-family: ravie;
          font-size: xx-small;
#apDiv25 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 5;
#apDiv26 {
          position: absolute;
          width: 1603px;
          height: 769px;
          z-index: 5;
#apDiv27 {
          position: absolute;
          width: 349px;
          height: 157px;
          z-index: 5;
          left: 1320px;
          top: 37px;
#apDiv28 {
          position: absolute;
          width: 948px;
          height: 95px;
          z-index: 8;
          left: 4px;
          top: 1190px;
          font-family: Arial, Helvetica, sans-serif;
#text1 {
          width: 600px;
          margin-top: 300px;
</style>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<link href="mystyle2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv29 {
          position: absolute;
          width: 949px;
          height: 95px;
          z-index: 8;
          left: 8px;
          top: 1189px;
#apDiv30 {
          position: absolute;
          width: 456px;
          height: 243px;
          z-index: 9;
          left: 505px;
          top: 948px;
          background-color: #0000FF;
          text-align: center;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv31 {
          position: absolute;
          width: 389px;
          height: 389px;
          z-index: 10;
          left: 552px;
          top: 557px;
          font-family: "Comic Sans MS", cursive;
          font-size: 20px;
#apDiv32 {
          position: absolute;
          width: 106px;
          height: 33px;
          z-index: 4;
          left: 762px;
          top: 52px;
#apDiv33 {
          position: absolute;
          width: 432px;
          height: 1305px;
          z-index: 4;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><script type="text/javascript">
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_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_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>
</head>
<body onload="MM_preloadImages('Buttons/Contact.2.fw.png')">
<div id="outwrapper">
<div id="apDiv6">
<div id="apDiv7"><img src="Images/banner.fw.png" width="960" height="246" /></div>
<div id="apDiv10">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="1_Index.html">Home</a>    </li>
<li><a href="#" class="MenuBarItemSubmenu">About</a>
    <ul>
      <li><a href="2_2_Info_Instructor.html">Me</a></li>
      <li><a href="2_1_Info_zumba.html">Zumba</a></li>
    </ul>
</li>
<li><a href="3_Timetable.html">Timetable</a>    </li>
<li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
    <ul>
      <li><a href="4_2_Images.html">Images</a></li>
      <li><a href="4_1_Videos.html">Videos</a></li>
    </ul>
</li>
<li><a href="5_Prices.php">Prices</a></li>
<li><a href="6_Contact.html">Contact</a></li>
</ul>
<p> </p>
</div>
<div id="apDiv11">COME DOWN TO ZUMBA SESSIONS (scheduled in "Timetable")! IT IS ALOT OF FUN BUT AT THE SAME TIME YOU WILL BE WORKING OUT!!</div>
<div id="apDiv18"><img src="Images/Page1- Index/instructor_pic_speech.fw.png" width="518" height="640" /></div>
<div id="apDiv23"><img src="Images/Page1- Index/zumba logo_web_vert.jpg" width="160" height="334" /></div>
<div>Content for New Div Tag Goes Here</div>
<div id="apDiv31">Hello, and welcome to Fitness4Fun. On this website you can browse information about me or about Zumba in general. This site includes detailed descriptions on different aspects of Zumba (which is location in the "About" section of the website), images and videos (which is location in the "Gallery" section of the website), prices and offers that are available (which is located in the "Prices" section of the website), and also it allows you to contact me with any queries you may have regarding Zumba. </div>
<div id="apDiv29">
    <div id="text2">
      <p>If you want more information on Zumba please click here to contact me (the instructor) about classes, suitable clothing or what the workouts involve and also why Zumba is a beneficial workout!!!</p>
      <p>If there is any problems with the website please contact [email protected] and it will be fixed ASAP</p>
      <div id="apDiv32"><a href="6_Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Buttons/Contact.2.fw.png',1)"><img src="Buttons/Contact.1.fw.png" width="106" height="33" id="Image4" /></a></div>
    </div>
</div>
<div id="apDiv30">
    <p>
      <embed src="Images/animation advertisement.gif" width="442" height="206"></embed>
    </p>
    <p> </p>
    <p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Thank You

all I want is the content to be centered on all resolutions. How am I to this?
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Don't use positioning. You don't need it except in very rare situations. APDivs are removed from the normal document flow, so centering them is impossible unless you wrap them all inside a relative positioned parent element.
Best advice, start over with one of the centered, fixed-width layouts that comes with Dreamwever.
Go to File > New > Blank page > HTML > Layouts (choose one from the right side panel). Hit Create button.
Use CSS floats, margins & padding to align elements.
Btw, I am not too good with coding/css
That's a shame. You should get up to speed with code basics soon otherwise DW will continue to frustrate you.
HTML & CSS Tutorials -
http://www.html.net/
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/
Nancy O.

How to centre the stage of 100% width in a browser?

I have created a web page in Edge that I intend to be centred in the web browser. If I keep the stage to fixed width (960 px) then I can centre it in the browser with the following in the compositionReady event of the Stage:
$("#Stage").css("margin","auto");
However, I want to create a tiled background, for which I use the following in the compositionReady event of the Stage:
$("#Stage").css("background-image","url(images/[email protected])","background-repeat","re peat");
If I keep the stage to fixed width then I don't see the tiled background because the stage is full of objects and the tiled background doesn't extend past 0 and 960px. If I make the stage width 100% then everything becomes left-aligned, but I do see the tiled background (to the right of the stage objects).
I've tried thinking of clever ways to position everything relative to some transparent element that has its width property set to 100%, but to no avail.
Does anyone know of a way to ensure that everything positions relative to the centre of the stage while retaining the 100% width stage property?

Zaixist posted this a long time ago and you might want to try it:
$("body").css({
            "background-image":"url(images/yourBghere.jpg)",
            "background-position":"center center fixed",
            "background-repeat":"repeat",
            "-webkit-background-size":"cover",
            "-moz-background-size":"cover",
            "-o-background-size":"cover",
            "background-size":"cover"
$("#Stage").css({"margin":"0 auto"})
jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","50%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}
sym.$(".center").center();

How do you make html page resize to fit any browser

Hi All,
How do you make the html page resize to fit any browser/window both vert and horizontally.
Thanks!
Randy

Horizontally by using percentage width instead of pixels. This is called a liquid layout.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Vertical resizing is irrelevant in web design. Page content determines page height. The more content, the longer the page. The less content, the shorter the page. Scrollbars appear when needed.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

I just synced my iPhone and lost all the info in notes from my phone. It was replaced with whT was on my iMac how do you make the sync go from phone to desktop and not the other way around

I Just synced my iPhone and lost all the info in notes I had on the phone. How do you have the info sync from phone to desktop and not the other way around as I usually make contact changes etc on my phone. I would then like to be able to sync that info from desktop to ipad thanks

It does make sense. The iPhone is a one-person device and just syncs to one computer.
The way it should work is as follows:
Old computer content ---> New computer
New computer <---> syncs to iPhone
But the way you are trying to operate sounds like:
Old computer content ---> iPhone
... and ...
New computer content <---> iPhone
So simply move your old stuff (either directly from iTunes, or from a computer backup) to the new computer, have it all there, then sync your iPhone to the new machine.

How Can I make redirect caller from agent to any branch IVR?

I have IPCC Enterprise Edition (ICM 5.0, IVR 3.1)
How can I make redirect caller from agent to chosen branch IVR, and send with call any variable to IVR (e.g. account number).
Regards
Krzysztof

I would suggest that post-routing should not be used. The way to go is to use translation routing applications. Although post-routing is easy to set up, almost all deployments require translation routing. I can't think of anything good to say about post routing, other than it's trivial to configure.
You want the main route point to be on the CM_PIM.RC for a number of reasons. You can check to see which of your IVRs are on line, and/or to do load balancing. If calls don't need to go to the IVR if agents are ready, you can have an LAA Select node immediately, and then translation route. Even if you just have one IVR, translation routing will enable you to do RONA more easily.
You need to bite the bullet and learn translation routing. If you do it that way, peripheral variables attached to the call remain unaffected whether the call is under the control of the CM_PIM.RC or the IVR_PIM.RC. This is exactly what you want.
There is no need, in my opinion, to go to an external database. In your IVR, decisions made by the caller (e.g. which "skill" they want) set peripheral variables. When the call comes out of this script you check the peripheral variable, and depending on the value do a queue to the appropriate skill group and run external script (BasicQ.aef).
Separate the intelligence gathering IVR script from the Queuing script. Allow ICM to make the routing decisions.

How do I make sure my page width is optimized for all monitors?

I have a portfolio-ish website, and I've noticed that on small screens there is white space if you scroll to the right. On big screens (Such as my 27" iMac), the design doesn't fit the whole screen.
http://treyflorkiewicz.com/
How can I fix this?
Thanks!

I believe you have used rectangle frames with image fill on page as background. You may want to use full width rectangles with images as page background which would fit on all screen.
Thanks,
Sanjit

How can I make my footer full width of the screen with a fluid grid layout in CSS?

Any Ideas?
#footer {
clear: both;
color: #FFFFFF;
min-width: 100%; // I have tried max-width and width as well.
margin-right: 0px;
margin-left: 0px;
background-repeat: repeat-x;
background-image: url(/images/footer.jpg);
I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Move your <footer> tag below the closing .gridContainer </div> tag.
Live example:
Alt-Web :: Fluid Grid Test #4
Nancy O.

How do I make a webpage automatically open when i start up mozilla firefox?

Currently when I open firefox, certain windows automatically open (ie. gmail, usps, my work website, etc.) these windows were set to open at startup by the person that previously had my job. There are other webpages that I would like to open at startup but I can't figure out how to :) please help!

On other platforms instead of Tools > Options use:
*Linux: Edit > Preferences
*Mac: Firefox > Preferences
*Windows: Firefox > Options or Tools > Options
See:
*https://support.mozilla.org/kb/How+to+set+the+home+page

How can i make my webpage has login and user has account

i have a project to do, i need user to sign up and have user account where they can check their data

There is nothing built into DW that can do this for you.
This type of thing requires a fair amount of server scripting and database stored content to do correctly (if you are planning to have different content per user or user editable content). Unless you are proficient with the scripting available on the server you're using (ask your hosting company what server scripting languages you have available to you), the best option would be to hire someone to do it for you or find/purchase a pre-made third party "user registration and log-in system".

I will sell my touch. how can i make sure that i dont lose any data but the buyer does not access my info.

i will sell my touch and get the new one. how can i transfer my apps and ID to the new one and erase my info from the old one?
thanks!

Yes. If you do it through the settings on the iPod and have an older iPod, make sure the iPod is charging either via a computer or wall charger. It can takes hours to erase an older iPod.

How do I make my webpage 100% width on any desktop resolution?

Similar Messages

Maybe you are looking for