How To Make Website Resize On Different Screens

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

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

Similar Messages

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

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

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

How to make required field on selection screen in Query

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

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

How to make the item in different color in a choice?

if I have a choice and different items, how to make the item in different color?
like:
Choice ColorChooser = new Choice();
ColorChooser.add("100");
ColorChooser.add("200");
ColorChooser.add("300");
I want to show green, red and blue color for item 100, 200 and 300.
I do not know how to do that, anyone can help?
Thanks

Please don't double (and now your up to triple) post. I realize that to you, your problem is the most important thing in the world and it would be nice if you could get several people working on it at the same time. However, the people answering your question do not get paid for it. They are doing it because they want to help someone. Posting several times only shows that you have no respect for them and are only concerned with your problem.

How to make website look correct in Safari, Firefox, and Chrome?

Hello there. I'm working on a website which was inherited to me by someone who died. So I am left with all of his coding which is about 4 years old. Now I'm working on positioning of the website and i've found that the only browser the website looks like it's supposed to is Safari and I can't for the life of me figure out how to make it look right in all the browsers and on a phone or tablet. It might be easier if I started from scratch but unfortunately I don't get that luxury. Please help me.
Here's a link...MuseumOfNaturalistory.com

I dont understand what some of these errors are asking of me. For instance, this one...
if (xmlhttp.readyState==4 && xmlhttp.status==200)
✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
That's the way the code has to be in order to function. What does it want from me?
And then here....
Line 71, Column 5: an attribute value must be a literal unless it contains only name characters </div>✉You have used a character that is not considered a "name character" in an attribute value. Which characters are considered "name characters" varies between the different document types, but a good rule of thumb is that unless the value contains only lower or upper case letters in the range a-z you must put quotation marks around the value. In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.
Line 71, Column 5: character "<" is not allowed in the value of attribute "id" </div>✉It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.
I have absolutely no clue what it is asking of me. Doesn't it have to be that way? Also why when I go to "Line 71" that isn't where this actual code is? Is there some special way to decipher this?

How to make a movie of the Screen

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

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

How to make File Dialog in different color

Hi to all,
How to make File Dialog to appear in orange color.
Regards
khiz_eng

I would like to know this also.....but it appears that there is not much you can do with an AWT FileDialog (not even moving it to the center of the screen).
sigh....
V.V.

How to make a field in custom screen as display field in screen exit

Hi ,
I have created a screen exit for CO02 with a field for item text in header level as input field , when value is given and save button is cliked it gets updated in database but the problem is same field shows as input field in CO03 ( display mode ) .
Code which i have used .
in PBO
if sy-tcode = 'CO03'.
loop at screen .
if screen-name cs 'SUBSCREEN' or screen-name cs 'RESB-POTX1'.
( subscreen - screen name given in screen editor and resb-potx1 field name given in screen editor )
SCREEN-INPUT = '0'.
modify screen.
endif.
endloop.
endif.
and even i tried in PAI too .....
if sy-tcode = 'CO01' or sy-tcode = 'CO02'.
update resb set POTX1 = RESB-POTX1
where aufnr = i_aufnr.
elseif sy-tcode = 'CO03'.
*oop at screen .
*f screen-name cs 'SUBSCREEN' or screen-name cs 'RESBD-SORTF'.
SCREEN-INPUT = '0'.
modify screen.
endif.
endloop.
endif.
but itshows as input field only ........how to make that custom field as display field in CO03

HI Andy,
Try this out.
FIrst check the sy-dynnr, if it is same as your custom screen number
in PBO of your custom screen
if sy-dynnr = 'YOUR_NUMBER' and sy-tcode = 'CS03'.
loop at screen
if screen-name = 'YOUR_SCREEN_NAME'
screen-input = 0.
modify screen
endif
endloop.
endif.
if it wont work they try using Tcode SHD0
Hope this will serve your purpose.
Regards
Ramchander Rao.K

Please tell me how to make websites think Safari is Explorer

Hi there,
I ran across an article a the other day where it said how you could make websites think that Safari is Internet Explorer. I forgot to bookmark the pg. and forgot what it said to do.
I stopped using Safari a while back in favor of Fairefox cuz, even though Firefox freezes on me sometimes, Safari will not connect to certain servers...period ("YouSendIt" is a good example...just plain won't send on Safari, but no prob on Firefox). So anyways...this article I read mentioned that many webmasters deliberately make their servers not respond to Safari (so few users...not worth the trouble to script for Safari to many webmasters apparently). The article said that the solution was that there is a way to make servers think Safari is IE (or Firefox or whatever).
So...I hope someone reading this knows what I'm talking about and can tell me the answer. Thanx a lot! *thumbs up*

Mr. Eeee,
Enabling a Debug Menu, and Setting Safari to Spoof Another Browser will help you change the user agent.
;~)

How to make image resizable using mouse ?

Hi,
I want to know about that how to resize image by using mouse in Java Canvas. I created some tools like line, free hand, eraser. And want to know how to make an image resizable in canvas by using mouse. An image is jpeg, png, or gif format. I want to make image stretch and shrink by using mouse.
Please help me..
Thnax in advance.
Manveer

You make a listener to handle the mouse event that you want to capture, then program the affect you want using the event as the trigger.

Captivate 7: How to make the output fit-to-screen

Hi Everyone,
For the long time, I was in search of making the published SWF be able to display the project as fitting to the screen. I was previously using Captivate 5.5. But now, I'm using Captivate 7. Does anyone know how to make the same thing happen to the SWF file? I previously had to make a change in the HTML script. But that same script line does not exist in the HTML file published from Captivate 7.
Please be aware that I don't know much about HTML scripts. So please be explicit with your assistance.
Thank you in advance for any assistance that you can provide.

Hi there
In Captivate 7, when you publish in SWF format, choose the option titled "Scalable HTML Content".
Cheers... Rick

CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
img, {
    max-width: 100%;
But this code already exists in the css file when you create a new fluid grid based layout
img, object, embed, video {
    max-width: 100%;
can anyone help a newbie please..

this is my source code
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kyle Childress Foundation</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
</div>
</body>
</html>
this is my css
@charset "UTF-8";
@import url("/kyle.css");
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
the animation GIF is 700 x 908
I changed the code from max-width to just width 100% but it still did not work ,, please help

How to make safari open in full screen in Mountain Lion

I can not make safari open in full screen mode since I upgraded to Mountain Lion
It used to open in full screen mode, now every time I have to make it full screen each time.
Helps appreciated
Salih

gunafly wrote:
You can achieve this by going into system preferences>general>uncheck "close windows when quitting applications." The apps will open fullscreen next time, even after a reboot. One caveat, the window will open in the last session left...
Hope this helps!
Thank you, this resolved my question as well.

How to make Website

Hello,
I want to make website in Dreamviewer i like the below website
{image and link removed by moderator}
Thanks
Ashish Bhatt

ashish bhatt wrote:
Hello,
I want to make website in Dreamviewer i like the below website
{image and link removed by moderator}
Thanks
Ashish Bhatt
Ashish,
Welcome to Dreamweaver Forum.
to create a website, you need to buy a Dreamweaver subscription and follow David Powers tutorial on making your first website.
I suggest start from this link and read it through:
<http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html>
Good luck.

How can I make my website compatible with different screen resolutions?

Here is the page that I'm struggling with:
http://www.starbuckscollect.com/2013.html
Everything is pinned to the top and center pin except for the cards.
My problem is on certain screen resolutions that are not 'wide screen' you are not able to see all of the cards when you scroll down. Some of you may not see my problem when you open up the page which is good. For you guys, the way to see my problem is to 'zoom out' of the screen and to do that press 'ctrl' and '-'
Is there any way of avoiding this?

Hi
I believe you want a responsive design for the page where the page elements , similar discussion here :
http://forums.adobe.com/thread/1198978
Thanks,
Sanjit

How To Make Website Resize On Different Screens

Similar Messages

Maybe you are looking for