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?
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.
-
== 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-inHello.
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 JonesSomething 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?
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
-
Screen flickering and system freezes when using Nouveau driver.
I'm testing the Nouveau driver on my computer, I really want to keep this driver installed because it makes XFCE to use less resources than the Nvidia proprietary driver. But when I start some apps like firefox or make changes to the desktop, the sys
-
I uploaded a PDF and converted to Word but only the 1st page has been saved in the .docx file
How do I select an individual page to convert to Word. Or why does the whole document not convert. Would be grateful for advice! (new user!)
-
Memory Leak in a multi threaded Swing application (ImageIcon)
When I profile my swing application with netbeans 5.5 , I notice that after each periodically tidy up my image container (add,remove IconImage objects to a hashmap or arraylist), there gather by and by surviving objects. This leads to run out of memo
-
Is there a way to do a mass deactivation of services in SICF?
We have activated the 2000 plus services under sap/bc/bsp/sap in our CRM system. Is there a way to deactivate them en masse? Thank you, Aubrey Smith
-
Cannot get details for a SLED+SP1 workstation
Hello everybody. Using ZAM 7.50.0023 IR 10. I have licenses for both Windows and Linux workstations. No firewall is operating/in use between the ZAM server and the Linux box. I installed the ZAM client on the SLED10+SP1 box without problems and the c