Centering a very wide Edge Website?

I'm trying to find a way to center a website built in Adobe Edge Animate, and having a heck of a time. I've tried virtually every code I've found for centering a website, without any luck so far.
I have a website that is 2000px wide. Its this wide so that it formats well on large screen resolutions with ease, however, I want it to look good for people that have resolutions below 1920x1080, however I can't find a way to do it. Here is the website as it right now
http://zsuttonphoto.com/Press.html
Obviously, I would like the horizontal scroll bar to be removed, and the center column to be centered in the screen, so that it looks like this--
http://i.imgur.com/AYR4bAe.jpg
Does anyone have any advice on how to do this?

Hey Z
Here is a small sample (exclusive of any coding) jus to give you an idea. Also sample is minimal just to showcase.
Preview example in browser and resize.
Preview: http://www.heathrowe.com/edge/presskit/presskit.html
Download: http://www.heathrowe.com/edge/presskit/presskit.zip
Key points
- Stage w is set to 100%, to provide full independant with
- Anything else on the stage is contained in blocks (nested divs) for mangement and position puposes. Example top area elements is in a nested div called 'Top'; bio elements is nested in a div called 'bioArea' etc.
The key with the positioning is to make the nested div blocks % (in my case 100% w) w/h and relative to the Top/Left (%) of the Stage. Select thee 'Top' div group for example and observe the Position and Size properties in the Property Panel.
The next key is to position the elements within the nested div blocks relative to its own container. So the same principle applies -. in the case of the 'Top' div it has your header image, a fake logo to the left, and a fake tag line to the right, and a menu bar. These elements are nested in the 'Top' div so to make them relative in position - set the X/Y to % and ensure the upper left position marker is active. This tells Edge to 'lock' the relative position to the parent container (Top) to the upper left. Select the fake byLine element, set X/Y to % and ensure the upper right marker is active.
Then work your way down, for each element relative to the container its in.
Note I only used 2 images in the above example. You can make good use of the Edge div/text tool where possible to avoid over-use of images.
Its a quick example and some trial/error will be required. Just make sure to test each element position before moving along. Also as you scale down to say a mobile phone width, some 'resize' event handler will be required to hide some elements, change font size etc where desired or applicable.
hth
Darrell

Similar Messages

IE8 and prior not showing Edge Websites. Whats the best solution?

Hi All...
Whats the best solution to have Edge websites appear on IE8 and Prior internet Explorer versions.?
Is it too weird to Design the whole website in Adobe Edge? should I just use this sofware to create partial animations for webpages?
I see lots of arguments around SEO too. Very confused if I should trust Edge to replace the HTML5-JavaScript-CSS3 handcoded websites.

Hi, Departure-
There are a couple of options for displaying to users of IE8 and below: you can display the down-level stage (which, by definition, displays to browsers that do not support Animate content), or you can turn on the Google Chrome Frame, which is available in the Web section in the Publish Settings dialog.
Hope this helps.
-Elaine

A very wide, continuous page that will feature a horizontal scrollbar

Hello, I'm trying to create a very simple portfolio website that simply features one long, horizontal page that will be wider than the browser window and therefore produce a horizontal scrollbar that can be manually scrolled. This is surely a very simple thing to achieve but I don't know how to achieve it! Do I change the page width somehow??
Any help would be much appreciated! Thanks.

that's great and what i'm looking for, but where do I insert these numbers?
As you can probably tell, Im quite unfamiliar with dreamweaver..
If you view source in your browser, you'll see how that demo page was built.
File, New, HTML page. Add some content to your page and wrap select areas around <div> tags
<div1>
some content here
</div>
<div2>
some content here
</div>
<div3>
some content here
</div>
<div4>
some content here
</div>
Then style and position each div with CSS.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

In my macbook pro sees in the screen very wide a vertical black bar and it does not let see what this underneath that bar

in my macbook pro sees in the screen very wide a vertical black bar and it does not let see what this underneath that bar

Take it in for service. Your screen probably needs to be replaced.

How to handle very wide EPS images?

Hello,
I am working on a project where we need to be able to open very wide EPS images in photoshop, but seems that the program has some limit. The image contains a printed music stave
Please, see the attached eps file: I am able to open it with Preview (MacOS) despite it is truncated in some way, but I am completely unable to open it with Photoshop. Is there any other possible program to try if Photoshop fails?
Any thoughts are very welcome.
Thank you in advance!
Best,
Fabrizio

Thank you guys and sorry for the automresponder, I really don't know how to avoid that!
Anyway, as you can see all the files are truncaed. Any solution? It's interesting how the EPS file actually includes hte complete file but no program seems to be capable to display it entirely.
Thank you again.
Best,

When printing off the web, I get very wide margins. a 2-page article, will print in 46 pages!

When printing off the web, I get very wide margins. a 2-page article, will print in 46 pages!

Try resetting your printer margins in '''about:config'''.
Type '''about:config''' in the URL bar and hit Enter. <br />
''If you see the warning, you can confirm that you want to access that page.''
Filter = '''print_margin'''
Right-click and select '''Reset''' for both '''''margin_left''''' and '''''margin_right''''' for that particular printer, and then restart Firefox. If you have ever used other "printers" in that Firefox Profile, you'll have separate groups of preferences listed for each printer.

Using a very wide image in Muse

Ok, I know there must be a simple solution but I can't find it!
I just want to create a site and place a very wide image in the middle. I want the user to be able to move right or left along the image with the web header etc reamining in the middle of the page. Later I would like to add clickable elements to the image. Could anyone help please?

After the image has been placed and resized, go to it in the Assets panel and right click and choose "Import Larger Size". By default Muse limits imported images to 2048 pixels in the largest dimension. In general this results in images that are far larger than what you should be typically using on the web in order to have reasonable page load times. However, when you have a case where an image needs to be larger, you can resize it larger in Muse then use this right menu item to bring in more image data.
If you're going to have a very wide image in your design, you're going to want to do everything you can to reduce its file size. If it's a JPG, use Photoshop's Save for Web features and reduce the compression quality to as low a value as you can possibly stand.
Current average broadband download speeds in the US equate to roughly 900k/second (and that number is optimal since it ignores the latency to create a connection). In general download speeds are higher on the coasts of the country and lower in the middle states. If you end up putting a 3Mb image on your home page every visitor to your site will have to wait on average 3+ seconds for the page to load and that doesn't include the time for whatever other content is added to the page or the overhead for creating the connection to the server in the first place. Especially on mobile devices site visitors are very quick to abort attempting to load a site if the load time is more than a few seconds, so designs that use images with large dimensions need to make special efforts to reduce file sizes and weigh the tradeoffs between achieving a specific design versus turning away impatient site visitors.

Finder columns width are very wide within an app

I have searched for an answer but can't find it. Since using Mavericks when I open a finder window within an app to open a document, the finder window is way too large. The columns are very wide and fall on to my second display. If I adjust this (and I have tried with the ALT button as well) the next time the problem keeps coming back.
Any solutions?
Thanks

I have this issue too - though I've been able to work around it a little by entering the file name in the search box.

The google search address (?) disappeared from Safari....I went to view and customize and dragged it into safari but it didn't take...the address place is very wide......that's it...I"ve lost google.thanks

The google search address (?) disappeared from Safari....I went to view and customize and dragged it into safari but it didn't work...the address place is very wide......that's it...I"ve lost google.thanks,

Search and URL entry have been combined.
Put your search data into the space and hit return.

Making a very wide page slide to the left

I have a very wide page in my site and I'm wondering what device I can use so that the page slides to the left. I want it to move gradually rather than in steps, as an anchor tag would do.
Similar to what this home page does, although this is a slide show. My page contains a series of text blocks and images.
Is there such a thing in Muse? Am I overlooking something obvious?
Thanks for any assistance.

Hi Bud,
You can achieve this by creating a wide page. Increase the page width in page properties.
After which you need to place the anchors as you move towards the right on the page and then create objects which link to them for the page transition to happen.
- Abhishek Maurya

Erratic bezier animation in a very wide sequence.

I have a sequence that is extremely wide. 9720 pixels by 1920 pixels high. A high resolution panoramic image is imported into this sequence. The image is larger then the sequence.
The idea is to animate the image along a bezier path and then export 9 separate video files 1080 wide and 1920 high.
The sequence is 30 seconds long and I placed 3 animation nodes on Position under Motion at the beginning, middle and end of the sequence. Each node uses "linear" for temporal Interpolation and "Continous Bezier" for the spacial interpolation.
By adjusting the bezier handles I formed an elliptical path that starts and ends at the exact same point so that the video can be looped.
Closeup of path is below
So much for the setup. Now the problem. (The screenshots are taken at 15 seconds while on the middle animation node)
When I render this project, I render it to seperate video file using the cropbox on the source tab in the "export settings" screen. Like this:
I rendered the above video in H264 as well as WMV and in both it plays back with a smooth animation as expected. However, when I immediately after this render export the following:
The footage is very jittery and unusable. Since both videos are rendered from the same animated image, I can not understand why the results are different. the further the cropbox moves to the right, the more jittery the footage becomes. This is even visible in the Program monitor during playback. To add to the confusion, If I render the entire sequence area to a normal 1920 x 1080 video, all of the footage is stable as expected.
I think I am doing something wrong here but what?

Ok, I now know what triggers the problem and I think it is a bug. As it turns out, the problem of erratic animation only occurs when I scale (Without animation) the source image. If I leave it at 100% the animation is fine.
I tried to set keyframe for the scale but that doesn't help at all not even when I animate the scale slightly between two values. For now I am forced to scale my images in photoshop first.
Strange that such a major feature is not working right. I suppose the bug shows due to my unusually wide sequence window of 9720 pixels since the error doesn't show up when rendering the far left of the window (The first 1920 pixels is where pretty much everyone else works)
Uhm... Should't I be paid for this work?

Ipad Air & Ipad mini very slow loading websites

Hi all
Im experiencing very slow website loading issues on my Ipad air and my daughters Ipad mini retina. When this occurs the devices even stop loading the site completely. When i open the same site on iPhones 4s or iMac it loads instantly, WiFi is provided by 2 AirPort express stations, since iPhone & Imac load instantantly. During these issues speedtests on both Ipads are showing download speeds in the range of 44 mb/s. All of this leads me to believe there's nothing wrong with WiFi signal.
All mobile devices are running on IOS 7.1, loading apps is no issue, just loading sites is giving the problem
Any help or advice on this matter would be greatly appreciated
Kris

That's weird. Have you tried to reset the network settings on them?
Go to Settings > General > Scroll to bottom and Reset > Reset Network Settings.
Try and see if that helps. You'll need to put your passwords back in but it may help

Sidebar loads very sluggishly - one website!

I visit one website that is a social journal; the vertical sidebar (along the right hand of page) lists topics and logged-in users.
Within the past two days, the information in the sidebar has consistently been loading extremely sluggishly --- very long delay! Proceeding forward or backward through the articles/pages is very time-consuming because of the slow loading.
Interestingly, this sluggishness also occurs similarly with Safari on both my iMac and MacbookAir!
Since I do not see Safari behaving in this manner on other websites, my assumption was that this reflects a problem with the site's server.
But... WRONG!
I go to the same offending website using Firefox... and the site's pages load completely... in just moments! Tested this repeatedly... and not the slightest sign of sluggishness when using Firefox on this site!
Any advice on how to correct this problem?
I have considered going to "Reset Safari"... but I find the vast number of choices of what to reset quite intimidating.
Is there another route?

Further update to this problem:
I booted from a 3-week-old SuperDuper backup that contains the same version of Safari (5.0.5).
Checking the offending web site... I find no sluggishness in loading! Great!
Repeatedly ran a number of page reloads... found no hint of sluggishness!
OK!
I reboot from MacHD... and, to my utter surprise... the loading problem is gone here as well!!!
So... What happened?
Did the act of booting from a backup... then going back to MacHD repair something?
I haven't the foggiest!

Websites over Blogs - The Future of the Net and World Wide Web, Websites over WordPress

Hey there, I have been a blogger for the past six years and frankly it has been getting tired and stale. It’s the same thing day in, day out. Recently a co-worker introduced me to Adobe Muse and I am going back to school to learn web design so I can make my own websites. Don’t get me wrong, blogging is cool but I am tired of blogging now. I want to know if it is more rewarding and more stable to work with websites instead of blogs.
My issue is the updating of websites. I want to be able to make websites about my favourite new movies and music, not to mention TV shows and Caribbean culture. I’ll do three different sites of course as I like to divide and conquer and I hate doing the general thing. I already have a domain name picked out and I would sign up and start doing my websites as early as this evening. I have been positing like crazy on message boards about this but I wanted your take. I know you have done websites before and a co-worker, recently introduced me to Adobe Muse and I am loving the drag and drop features. It’s easy to use and it’s great to use and I am still learning to publish.
What I want to know if how you update blogs without manually pushing down later posts down to a new page or to the bottom of an existing page, because in blogs WordPress does this for you automatically when you publish something new. I know webpage programs vary but what is the general procedure like? Blogs automatically create pages where things are basically archives to an older page with the older posts being there and newer posts appearing at the top of the main page. I really want to do websites again and learning how to create my own sites and all is cool. What I want to know as well is, if I can import my own templates and apply them to my site in Adobe Muse and Adobe Dreamweaver which I have used in the past when it was a Macromedia product.
Also how do I publish my website or publish updated stuff like updated pages and items, etc? Blogs are fun and all but lately it’s just getting tired so with emerging technologies like php and css as well as html5 which are the future is it worth it to create blogs to put your opinions and content out there or work with websites and are most pages out there blogs or regular websites? Which is more profitable? I ask this because while websites are here to stay and have been around first and longer and still going strong blogs are hot and popular. Blogs haven’t been able to topple websites.
Do you have a website or websites for yourself and how has it been, the process and so on? Can you update easily and do you use Adobe Dreamweaver? How is your web publishing and web content experience? What is web content like to you and where do you see your content going in the next five to ten years because while social media like Facebook is hot now, wit may not be hot in the next five to ten years. It may be a trend now that may evaporate in a few years so the next big thing may come along and websites and blogs may hold their own. What is your take?

With the steady stream of emerging web technologies, the web is constantly changing. What worked well for web developers 6 years ago has been replaced by all new programming and design methods. This cycle never stops either. A new trend emerges, remains popular for a while then fizzles out and is replaced by another one. It's impossible to predict what will and won't last. Only time will tell. So professional web developers must keep pace with all new technologies or risk being left behind.
6 years ago almost all web sites were built to support the average desktop/laptop screen. A standard page width of 800 - 1000px was common. Today however, we must cater to a whole new generation of mobile and tablet devices. The one-size-fits-all web site layout is no longer relevant.
Mobile users interact with the web differently than desktop users. They need finger-friendly navigation and forms. They want quick access to less content. And they need pages that fit their device and don't drain their batteries & data plans with gratuitous images, animations & other media files.
On the other hand, a desktop user with a good broadband connection is likely to want more information, greater interactivity and plenty of media-rich content because their device can support it.
Finding a balance between these two polar opposites is just one of the many challenges modern web developers face.
Dreamweaver vs Muse
Dreamweaver is a pro-level web authoring tool aimed at people who care about code. There's no limit to what you can do in DW, providing you have the requisite skills with HTML5, CSS, JavaScript, PHP and MySql databases. DW expects you to know code. If you don't, you'll be very frustrated until you learn code.
Muse is aimed at consumers and designers who know nothing about code. All that drag & drop ease of use is nice but it comes at a price. MU is limited. You cannot use it to build dynamic blogs, shopping carts, or content management systems like WordPress. It won't build mobile phone apps either. MU might be all you need for a static hobby site, but if you need more than that, you won't be able to do it in Muse. More importantly, if you build your site in Muse, be prepared to stick with Muse for the life of your site. The code it generates is almost impossible to work with in any other HTML editor.
Decide what's important for your long-term project goals. Use the right tools for your project.
Nancy O.

Very wide blank before url text at url address input box

My problem is that there is such a wide blank at the head of the url address input box.
I have a screen snapshot here, please see it and you will know the problem!
snapshot picture url: 1【 http://inshion.kilu.de/pic2013-10-08-192209001.png 】
2【 http://inshion.kilu.de/pic2013-10-08-192626001.png 】
Thank you very much!

the only time i've seen something similar interfering with the address bar this way, was when fingerprinting software (that probably hooked into firefox somehow) was involved...
https://support.mozilla.org/en-US/questions/937571?page=2#answer-373458

Centering a very wide Edge Website?

Similar Messages

Maybe you are looking for