Resizable page for different screen sizes but with static image content. Shall I use media query?

I’m making a page that has of mostly image content. It’s a large circle in the middle so I want it to be centered vertically and horizontally. I also want it to stay centered and resized proportionally for different screen sizes. I’ve read about media query but it seems to me that the elements just become fluid. Can I make the elements stay in place using the media query?
I’m working in Dreamweaver CS5.5

Here's the code I'm working with now, I've taken away the things that I don't really understand.
It's working but I guess it won't hold when I start with the media queries.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">
body {}
div {
   font: 12px Arial;
span.bold { font-weight: bold; }
#the-circle {
height: 960px;
width:960px;
margin-left:650px;
margin: 0px 10px 0px 10px;
margin-left:650px;
.link-row {
position:absolute;
width: 960px;
height: 74px;
top: 130px;
left:660px;
.link-row-2 {
   position: absolute;
   width: 960px;
   height: 74px;
   top: 300px;
   left:660px;
.link-row-left {
float: left;
.link-row-right {
float: right;
.link-row-right {
float: right;
.link-row-right {
float: right;
</style></head>
<body>
<br /><br />
<div id="the-circle">
<img src="ACE Test/Logo-DW.png" width="960" height="960" />
</div>
<div class="link-row">
<div class="link-row-left"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
</div>
<div class="link-row-2">
<div class="link-row-right"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
</div>
</body></html>

Similar Messages

Need help resizing pages for different screens

Hey guys,
Ok well I made this website that has a lot of pages now and
the only problem is that I have a 21" widescreen monitor so
everything I created has to be scrolled on a lot of smaller
screens. I'm almost possitive that there is a way to tell the html
to resize the website when different screen sizes are detected. Any
help would be great. Thanks.
Also if there is a way to do this, then would it be possible
to change the settings sitewide without using templates?
Jeremy

> I'm almost possitive that there is a way
> to tell the html to resize the website when different
screen sizes are
> detected. Any help would be great. Thanks.
There is - it's called "design"! You have to build the page
to be
flexible - see this tutorial as an example of how to do it
with tables:
http://www.dwfaq.com/tutorials/Tables/flexible_tables.asp
Once you have the page built, you cannot just drop in a magic
pill and make
it resize itself.
And remember, screen size is not the real variable you need
to worry about -
it's browser viewport size. Even when you know my screen is
1280x1024, you
still do not know what my browser size is.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dayencom" <[email protected]> wrote in
message
news:eiqmfu$33q$[email protected]..
> Hey guys,
>
> Ok well I made this website that has a lot of pages now
and the only
> problem
> is that I have a 21" widescreen monitor so everything I
created has to be
> scrolled on a lot of smaller screens. I'm almost
possitive that there is a
> way
> to tell the html to resize the website when different
screen sizes are
> detected. Any help would be great. Thanks.
>
> Also if there is a way to do this, then would it be
possible to change the
> settings sitewide without using templates?
>
> Jeremy
>

Scaling front panel objects for different screen sizes

Hi,
Can anybody help me of designing Vi for different screen sizes. I have designed a VI for a monitor of small size and lower resolution but when I open the same Vi on a different monitor,objects are not aligned properly. The properties which I have changed are
Window appearence->Default
Window Size -> Panel size 0,0 & Tick marked options of Maintain propotions for different monitors and scale all objects
Window Run Time position-> Maximum
Regards
Imran
Solved!
Go to Solution.

Imran,
I can't solve your problem entirely. However when I have to write a program that will be deployed on a variety of monitor sizes, I tend to set the size of the Front Panel to suit the smallest monitor, and then remove the ability of the user to resize it.
Also, set it to run in the centred position.
See attachments.
Many Thanks,
Dan
Dan
CLD
Attachments:
Customize Window Appearance.JPG ‏44 KB
VI Properties.JPG ‏29 KB

How do you open a project started in Muse, Dreamweaver, or other to tweak for different screen sizes

How do you open a project started in Muse, Dreamweaver, or other design program to tweak for different screen sizes?

Hi. As of now HTML import is not plan of record for Reflow 1.0. See this FAQ for a bit more info - http://forums.adobe.com/message/5071510#5071510.
-C

How to programmatically resize vi for different screen resolutions ?

Hi,
I have been struggling with this,How can i built a vi that should run for different screen resolutions (on different pc's).
There are several threads on forum , But i dont find the exact solution for it.
I have already tried with VI properties in the VI but i dont think its working.
Can someone please help me ?
Thanks and regards,
Shivkant Paswan

Yup it is a pain to use panes, but that is the easiest method I've found which meets my requirements. Learn to use panes and splitters effectively, and then learn their limitations and workaround when you find those limitations. In general LabVIEW should handle multi-resolutions, and resizing better but these are the tools we have today.
Unofficial Forum Rules and Guidelines - Hooovahh - LabVIEW Overlord
If 10 out of 10 experts in any field say something is bad, you should probably take their opinion seriously.

Site Formatting for different screen sizes

Hi there,
I am designing a website for a customer and having some problems with the site fitting on different screens. I set it to what I was led to believe is the universal resolution/screen size, and it looks great on large, wide-screen computers, but doesn't fit right and requires lots of scrolling on smaller screens. I also have a pop-out light box feature when visitors click TEAM and it doesn't fit on smaller screesn either. How can I make the site auto adjust to different screens? This is a big must for the customer and I'm still pretty new to MUSE so i don't entirely know what I'm doing. Any help would be greatly appreciated.
The site is: http://apopecary01.businesscatalyst.com
Thanks!
Nick

Truly variable width "liquid" layouts are not supported. However, visual designs that fill the full browser width are possible using browser fill image tiling and 100% width page items. Also page item pinning and browser fill scrolling can be leveraged to create designs where content moves relative to each other when the browser window height or width changes.
We may be exploring responsive layout options for Muse in the future, but right now it is fixed width only.
- Abhishek Maurya

Banners for different screen sizes...

If I have 2 SWF files that I want to use as the banner or header at the top of the page and want to use one for mobile, and the other 2 bigger ones for tablets and desktops, how do I do this in the media query? I'm trying to reconstruct the site to make it more mobile friendly. The reason I'm using a swf is because I've got rotating images in the banner. I'm new to this and really wanting to learn more on media query. I'm using Dreamweaver CS6 on a Windows 7 64-bit machine.

Hi
The simple answer is, "don't bother".
swf's will not work on apples idevices, and the flash player development for the android devices was dropped last year.
You could use Adobes Edge for this and use your swf as a fallback for devices that do not support the Edge animation, for Edge see - http://labs.adobe.com/technologies/edge/
For the use of media-queries see - http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
PZ

Need help with hiding divs for different screen sizes with fluid layouts.

Ok, so i've got a single page giving info that my website is coming soon and i've designed it for pc, tablet and mobile as i should. I have hidden the divs i don't want from each view and when testing it, all works fine and as it should be but when it is on the server and live, it shows all the divs that are meant to be hidden on one screen????? Is there something else i should be doing and can anyone help me here or is this a question for my host???
Thanks for any help in advance

Probably a coding issue. Without a link, no way to help.
Nancy O.

How do I autofit the site for different screen sizes?

I've built my site in iWeb. But is there a way to have it autofit to the size of the screen it is being displayed on? For example, I built it on my 24 inch 16x9 display at home. I built it using dimesnions so that there are no scroll bars left or right. I get a nice full page. But, when I visit the page on a smaller 4x3 display for example, it doesnt shrink to the new size screen. It just shows what it can then you have to scroll left/right to see the rest of the page.
So is there a functionality in iWeb, or a work around, to have it adjust according to the size of the screen it's being viewd on?
Any help would be greatly appreciated.
Thanks!

The "dynamics" for the textboxes are only vertical, not horizontal.
To have everything move vertical and horizontal, you have to add width attributes to the text boxes. I tried it with a percentage. But did not like the result.
The displayed text are separate textfiles that are loaded with AJAX.
So once you have made the textboxes change their width with JavaScript, these text files fill the available space.
You also have to make the width and height of pictures and movies dynamic.
You can make it as complicated as you like.

Best resolution for different screen sizes?

Hi,
I just created a project and several of the viewers complained that they had to scroll horizontally in order to view the movie.
What is the best resolution to record my next project in so as to ensure that no user will have to scroll (neither vertically or horizontally) to see the contents?
Alternatively, is there some type of feature that automatically adjusts the contents to the viewer's screen?
Thanks very much in advance.

Hi there
I think many folks use 800x600 as a common size.
Choosing the "Best" resolution is nearly always a bit of an art form. You need to consider the lowest common denominator. For example, are your tutorials intended for senior citizens? If so, then you need to consider that they may be running an older computer configured for a smaller resolution.
There are ways to coax the video to play back at whatever resolution is available, but they all will involve a sacrifice in quality. This is because any time you play back your project at a different size than it was recorded, the quality will suffer. The degree to which it suffers depends entirely on how much scaling is happening. Scale just a little and it's not too bad. Scale a lot and things go downhill.
One way to allow scaling is to link to the .SWF instead of the .HTM that is produced. Another way is to edit the HTML page Captivate creates. Remove the pixel values and insert percentages.
Cheers... Rick
Click here for Adobe Certified Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

Creating app for multiple screen sizes?

Hello. I've recently created an .apk file from Flash Professional using AS3 (probably obvious in this forum, but I wanted to be clear). I've been testing it on an ASUS Android tablet. However, I realized that even if I get the app to look fine on this tablet, there are other tablets out there with many different sizes that could have the app look weird.
I've been searching Google for tips on this, but a lot of it doesn't make sense. Is there a pretty easy way to get your app to 'read' the tablet's dimensions and scale itself to those dimensions? I know I could make a different file for each screen size, but wouldn't that require putting several different app files in the app store? That seems silly. Any tips?

first, you should check the scaleMode property of the stage which will allow you to specify how your stage is sized to fit the display.
then, you can use the stage's stageWidth and stageHeight properties to size and position your display elements, if that's needed (because with showall you probably won't need to do any sizing/positioning).

I'm using FF for Mac 3.6.13 and everytime I open a new window or tab the image of what I see is tiny which requires me to click Command + to enlarge it. The actual page is normal size, but its the image of the page that opens tiny.

I'm using FF for Mac 3.6.13 and every time I open a new window or tab the image of what I see is tiny which then requires me to click Command + to enlarge it about 4 or 5 times. The actual page is normal size, but its the image (what I see) of the page that is tiny.

Thanks but Command 0 on a Mac only makes a temporary change to that one page. The link you provided doesn't show how to make a permanent change. Do you know how to permanently change this so I don't have to do it to every new page?
Thank you.

How to handle different screen sizes?

Hi,
I have a couple of 2D 180X180 png images. I used them for splash screen, backgrounds etc etc. How do i ensure that my splash screen and background (using these fixed-sized images) can cover the device's displayable area? For example, if a device is 200X200, how do i stretch my 180X180 images?
I'm currently using lcdui's Image class to display the images, and there isn't any method that i could use to scale the images for different device sizes. :-(
Thanks for any help!! :-)

The way this is usually handled is with different versions containing graphics fro different screen sizes.
You can resize images using MIDP 2.0, but this method is a memory hog, and with an image as big as 180x180 there is a big risk of running out of memory during the process.
Or you can work out a way so that the screen resolotion doesn't affect you. Like centering the image over a background of the same color as the image's background, using tiles to create the background, etc.
shmoove

Optimizing captivate file for different screen resolution

Hi,
I've a problem in optmizing the captivate file for different screens like laptop,netbook and pc. In PC's and laptops, this is not a major issue as the size of the screen is large. But when we play the captivate generated swf file in a netbook, the whole website gets resized to fit in to the resolution of the screen except the captivate file.Captivate file gets truncated in such a way that, the user can read only half of the slide.
Thanks in advance
Parvathy

One thing you can try is adjusting the swf dimensions manually. I haven't found a way to do it in Cp. We had a similar problem with some eLearning we built that all our testers used just fine. But once someone undocked their laptop and was off their desktop monitor, had the same problem you describe, where the bottom of the movie was cut off.
Once you publish the files, open the .htm file with notepad or your text/html editor of choice.
Look for a line that looks something like this:
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "1100", "798", "10", "#CCCCCC");
or
var so = new SWFObject("filename.swf", "Captivate", "1600", "1200", "10", "#CCCCCC");
Change those numbers in quotes to 100%, like this:
var so = new SWFObject("filename.swf", "Captivate", "100%", "100%", "10", "#CCCCCC");
save the .htm
My experience has been it will adjust the swf so it fits either the height or width of the display, whichever is shorter. That is, it will either fill the top to bottom OR side to side, but keep the swf in proportion.
hope that helps.

Parallax scrolling for different screens

Hi there...
Does anybody know how to deal with different screen sizes and parallax scrolling?
It know the 100% width option so that is not the issue.....the issue is the height!!
Laptop versus desktop etc..
So what is the best height to use so it will fit all screen sizes?
Thanks, Cor

Hai Daniel,
I faced the same problem with the overflow controller.
Then depending on the number of records that I am showing in the table I have adjusted the size of the overflow controller in pixels.
my code looks some thing like this.
lv_oflc_height = 53 + ( lv_actual_visible_rows * 21 ).
if the filter is on 20 more pixels added to the height.
<xhtmlb:overflowContainer id     = "OFLC_RCN_HDR"
                            height = "<%= lv_oflc_height %>px"
                            mode   = "SCROLL" >
and this worked for some standard resolutions with out big difference.
Best Regards,
Venkat.

Resizable page for different screen sizes but with static image content. Shall I use media query?

Similar Messages

Maybe you are looking for