How do I make my website fit in all size browser windows?

Hi there,
I should start off by saying that I am very new to web design, and have very limited knowledge of CSS and HTML.  I understand what they are and the nature of what they do, I'm just not code savvy. 
Now that that's out of the way, I've been designing/attempting to build a website using Dreamweaver.  I have all of the components and layout that I want designed and ready to go, but I desperately need help with translating that into Dreamweaver.  I've been researching information all over the web, but with one person suggesting one thing and another suggesting something completely different I'm afraid my brain is about to melt.
Here's what I've done so far:
Because I want everything fully customized and to use a less common font style, I saved everything from the graphics, photos, and links as .png files.  I then inserted each of those images into an AP Div Tag in Dreamweaver and arranged them appropriately.  That's absolutely all I've done.  It works great, except I have no idea how to configure everything so the site layout shows up centered in any size browser window, instead of sitting awkwardly in the corner.
Here's a link to what currently exists: http://ikikatawares.com
I've read dozens of articles and forum responses about building tables, but I'd like to avoid that since to me they seem clunky and kind of a hassle to deal with.  Can anyone please help me?  Thanks.
Beth

You need to put only the bold part into your code.
Immediately after your starting <body> tag add in
<div id="wrapper">
and immediately before your ending </body> tag add in
</div>
Then at the end of your css, you currently have...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
Change that to...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
#wrapper {
     position:relative;
     width:1005px;
     margin:0 auto;

Similar Messages

  • How to make my website fit to all resolution?

    Hi all, I'm a beginner for using dreamweaver.  I've been looking for this question but I think it doesn't solve my problem. I want to make my website fit to all screen resolution. At first, I preview it at mozilla  and Internet explorer and its ok. But my friend say that she open it at her computer , Ipad it become a mess. I try to open it at public computer too and it's really such a mess.
    I used dreamweaver cs6
    And now my problem is:
    How to set it to fit for all screen resolution?
    what is the css code to make it fit to all screen resolution?
    How to set normal  width and height for website?
    this is how my css work:
    @charset "utf-8";
    .mainbody {
        background-color: #CCC;
        width: 980px;
        margin-right: auto;
        margin-left: auto;
    .mainbody .header {
        height: auto;
        width: 980px;
        padding-top: 15px;
        padding-bottom: 10px;
    .mainbody .menubar {
        width: 980px;
        height:auto;
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
    .mainbody .slider {
        width: 972px;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        border: medium dotted #60F;
        margin-top: 25px;
        margin-bottom: 15px;
    Please let me know is there's any mistake i've made. 
    By the way , sorry for my bad English ^_^

    Thank you for your reply ^_^
    this is my website : www.favoritepumps.com
    It's very very very simple right >.<
    but in this website I use the dreamweaver template . few days ago I make my own use div tags and i'ts been mess and I changed it back.
    and now I just want to know how to set it fit to all screen resolution and how about the width I make?
    I got some information that the width shouldn't be more than 980 px is it true?
    how should I write then?
    I make it like this at the source code:
    <div class="mainbody">
        <div class="header"><img src="images/favoritepump.png" width="500" height="80" alt="favoritepumps" /></div><!-- end .header -->
        <div class="menubar">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li>
              <div align="center"><a class="MenuBarItemSubmenu" href="#">Item 1</a>
                <ul>
                  <li><a href="#">Item 1.1</a></li>
                  <li><a href="#">Item 1.2</a></li>
                  <li><a href="#">Item 1.3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <div align="center"><a href="#">Item 2</a></div>
            </li>
            <li>
              <div align="center"><a class="MenuBarItemSubmenu" href="#">Item 3</a>
                <ul>
                  <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                    <ul>
                      <li><a href="#">Item 3.1.1</a></li>
                      <li><a href="#">Item 3.1.2</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item 3.2</a></li>
                  <li><a href="#">Item 3.3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <div align="center"><a href="#">Item 4</a></div>
            </li>
            <li>
              <div align="center"><a href="#">Untitled Item</a></div>
            </li>
          </ul>
        </div><!-- end .sidebar -->
        <div class="slider">
          <div align="center"><img src="images/kero.jpg" width="250" height="220" alt="kero" /></div>
        </div><!-- end .slider -->
        <div class="container">
            <div class="leftbar"> </div><!-- end .leftbar-->
             <div class="rightbar"></div><!--end .rightbar -->
        </div><!-- end .container2 -->
        <div class="footer"></div><!-- end .footer -->
    </div><!-- end .mainbody -->
    thank you

  • How can I make my computer restart with all the same windows that were open when a shut it down?

    How can I make my computer restart with all the same windows that were open when a shut it down?

    That is the way Mac OS X 10.8 (aka Mountain Lion) works by default. Are you actually running that system? (See About This Mac in the Apple menu.) If so, make sure the check box in the shut down alert is checked:

  • How to make website fit any screen size?

    Hello all!                      
    I am trying to make my website fits any screen size (desktop, tablet, mobile)
    In Dreamweaver cs6, I go to file -multiscreen preview – Media Queries- make a CSS file for (site-wide) and click on the Default Presets and then find my CSS files for phone, tablet and desktop. But it does not work for my website, my site does not respond to the size of desktop, tablet or mobile. Can someone please help? Thank you.

    The main rule to follow for a responsive design is be flexible.
    That means no rigid dimensions, no absolute positioning and images that respond to the width of their containers.
    The following typically breaks the rule of flexibility
    #apDiv35 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 1;
    That is but one example from your document out of more than 40.
    If you want a leg up regarding responsive design, have a look at http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

  • How do I make a website in three languages?

    how do I make a website in three languages?

    In this example, it's 2 language:
    Accueil | Home | Atelier de Pneus Réal Chicoine
    You just create a «master home page» and visitors select the right language.
    Of course you have to make the three version, but maybe it will be more accurate ...

  • Make flash website fit to screen

    Hi! I'm having trouble width my AS3 flash site. I know there is a code that will make my website fit to any browser. but i can't find it anywhere?? Can anybody help me out here??

    stage.displayState = "fullScreen"

  • How can I make a rule to mark all messages sent to Mail Trash as Read?

    How can I make a rule to mark all messages sent to Mail Trash as Read?
    When I look at some emails on my phone, I can see from the title that I don't need to read the email so I delete it without opening it. When I go to my Macbook Pro and open mail, the number of unread messages in my Trash shows next to the name. It drives me nuts. Can I just set a rule to mark all messages sent to trash as read? If that isn't possible, I'd take just making the number not show beside the Trash folder.

    Just in the case that I actually do need to go back to them for some reason. I have some OCD tendencies which is also why the number beside the folder drives me nuts.

  • How can I make a backup listing of all of my Firefox bookmarks, with complete URLs, so I can print it out from a word processing document?

    == Issue
    ==
    I have a problem with my bookmarks, cookies, history or settings
    == Description
    ==
    How can I make a backup listing of all of my Firefox bookmarks, with completely written out URLs, so I can print it out from a word processing document? Please email me the answer-
    [email protected]
    <blockquote>duplicate. Locked. Please continue [https://support.mozilla.com/en-US/forum/1/727213 here] -MJB</blockquote>
    == Firefox version
    ==
    2.0.0.4
    == Operating system
    ==
    PPC Mac OS X Mach-O
    == User Agent
    ==
    Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
    == Plugins installed
    ==
    *-Netscape Navigator Default Plug-in
    *Runs Java applets using the latest installed versions of Java. For more information: Java Embedding Plugin. Run version test: Test Your JVM.
    *Plugin that plays RealMedia content
    *The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.
    *Shockwave Flash 9.0 r260
    *Provides support for Digital Rights Management
    *Provides support for Windows Media.
    *Java 1.3.1 Plug-in (CFM)
    *Macromedia Shockwave for Director Netscape plug-in, version 8.5.1
    *Java 1.3.1 Plug-in

    Hello.
    Although possibly not related to your problem, I have to remind you that the version of Firefox you are using at the moment has been discontinued and is no longer supported. On top of this, it has known unpatched bugs and security problems. I urge you to update to the latest version of Firefox, for maximum security, stability, performance and usability. You can get it for free, as always, at [http://www.getfirefox.com getfirefox.com].

  • How do you make "Acrobat X Pro" open the "combine pdf" window in the foreground?

    How do you make "Acrobat X Pro" open the "combine pdf" window in the foreground?
    I am using a "Windows 7" computer at work with "Acrobat X Pro" and I'm constantly combining
    pdf's and tiff's in Acrobat.
    It would be nice if when I select 30 or 40 files to combine, the
    "Combine Supported Files in Acrobat" window would open in the
    foreground, not behind the 10 or so windows already open.
    I have been researching this for some time now with no solution.
    If the answer is that "IT CAN'T BE DONE", then that's fine. At least
    I will have an answer and can stop searching. If (as I suspect) it can
    be done, then kindly supply me with "step by step" instructions.
    Michael Jones

    Something that works  (provides Acrobat the application precedence in the OS that is requisite for this) --
    Minimize the 10 or so application windows before engaging use of Acrobat's "combine".
    That'll let the Acrobat dialog windows display front and center.
    Be well...

  • How do I make a PDF file smaller in size?

    How do I make a PDF file smaller in size?

    Do you have images on your PDF? You might want to use smaller images (smaller in file size and not in necessarely in image dimension).
    I'm not sure what else could be done to make your PDF form smaller. How big is your form?
    Gen

  • How do i make a template (poster) of this sizes 3.74in x 8.27in?

    How do i make a template (poster) of this sizes 3.74in x 8.27in?

    Inspector, Document tab
    Page Setup
    Click in the Paper Size box and choose Manage Custom Sizes
    Click the + to make a new custom setting
    Name it
    Type in the  dimensions
    Hit OK
    That gets the size you want.  Save as a template.

  • How do I pin a website to the Firefox jumplist in Windows 8?

    How do I pin a website to the Firefox jumplist in Windows 8? I am using Firefox version 35. I have one pinned site on my Firefox taskbar jumplist, but can't figure out how to add additional sites.
    Thanks!

    ''jasonf [[#question-1041305|said]]''
    <blockquote>
    How do I pin a website to the Firefox jumplist in Windows 8? I am using Firefox version 35. I have one pinned site on my Firefox taskbar jumplist, but can't figure out how to add additional sites.
    Thanks!
    </blockquote>
    Excellent. Works as advertised!

  • How can I make address labels, preferably matching Avery sizes, in Pages please?

    How can I make address labels, preferably matching Avery sizes, in Pages please?  Please don't tell me there is no labels facility!!

    If you have your addresses set up in Address Book, the logical place for them, that is also the logical place to print them from.
    Pages will only use one data set per page, although there are ways around this. But then that wasn't your question.
    Peter

  • How can I make a global change so all controls and indicators labels on the front panel change to another colour?

    How can I make a global change so all controls and indicators labels on the front panel change to another colour?
    I need to change the front panel so that it can be used in a dark environment.

    Hi
    The only way I see, is to use the "Controls[]" property and iterate through all of them. But don't forget about nested elements (i.e. clusters, tab-controls, ...).
    Thomas
    Using LV8.0
    Don't be afraid to rate a good answer...

  • How can I make US letter the default print size in PSE12

    How can I make US letter the default print size in PSE12

    Clips from JVC Everio camcorders have always had this problem with Premiere Elements (all versions). You need to select Interpret Footage.
    See this FAQ from PE version 2, step 3. Like I said it has been this way with all versions:
    http://www.adobeforums.com/webx/.3bc1265c
    You might be able to use this tool to change the header of your MOD files so they are seen as 16:9: http://www.videohelp.com/tools/DVDPatcher
    Or use this program (SDCopy) to download the video's from the cam, it will allow you to copy straight from the cam to your PC and auto renames and corrects the aspect ratio.
    http://zyvid.com/smf/index.php?action=dlattach;topic=280.0;id=153

Maybe you are looking for