PDA

View Full Version : Centering page in browser


Meeguk
05-14-2007, 10:34 PM
My page loads snug to the left in the browser. How do I center the page?

Like here: http://www.whatreallyhappened.com/

Also, I want to change the white margin color on both sides of my loaded page. How to?

Thanks.

chriskq
05-15-2007, 07:11 AM
its centered in my FireFox and IE 6 on my PC

i have a good skeleton for centered layouts.

shout out if u need it

Meeguk
05-15-2007, 07:17 AM
The link I posted was what I want my page to look like, it wasn't my page.

I'm shouting.

domedia
05-15-2007, 01:15 PM
Either view source on that page and do what they did or follow our tutorial:
http://www.dreamweaverclub.com/css-center-content.php

Meeguk
05-15-2007, 09:20 PM
Many thanks.

Does it matter where the code is placed?

Another question. Where do I find out how to make buttons like the ones at the top of this page? Home Forum Tutorials and Articles, etc.

Again, thanks in advance.

Meeguk
05-15-2007, 10:09 PM
Can't edit my post but one more question: How does one chagne the color of the wrapper?

domedia
05-16-2007, 03:28 PM
Does it matter where the code is placed? To a certain degree, yes. It really depends on which code you are talking about. Your content will go in the <body> section, and if you use CSS it will be listed or linked to in the <head> section of your webapge, unless you use inline styles directly in your HTML.
Another question. Where do I find out how to make buttons like the ones at the top of this page? Home Forum Tutorials and Articles, etc. The nav above is a bullet list with CSS. You can just view source and see how the menu is made up of LI's and then look at the stylesheet referenced in the <head> section of the webpage to see how the styles were applied to it.

Can't edit my post but one more question: How does one chagne the color of the wrapper?With CSS. So if your wrapper is called
<div id="wrapper">
then you can change it with CSS:
#wrapper {background-color: #cccccc}

Meeguk
05-16-2007, 10:42 PM
Thanks much. I'll do some work and be back, probably.

Meeguk
05-17-2007, 06:19 AM
I ran a Find - Wrapper in my source view and no such word. What else would a wrapper be named?

<div id="wrapper">

#wrapper {background-color: #cccccc}

How exactly would I replace the former with the later?

domedia
05-17-2007, 03:20 PM
You can call your wrapper exactly what you want, so use my name (wrapper) or the one you have yourself.

Meeguk
05-19-2007, 02:06 AM
Okay, so I name my outer margins anything I want - say "wrapper"

Then I insert

<div id="wrapper">

and

#wrapper {background-color: #cccccc}

with the color in place of #cccccc.

But that doesn't look like the code I see in the source view. There seems to be something missing.

Then to center my page I insert this code:
<body>
<div class="wrapper"> all content goes here </div>
</body>body {
text-align : center ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
} Is this code the exact code I need? In other words, I can copy and paste this code into code and it should work?

Exactly where do I place this code? [the tutorial doesn't say]. Anywhere in the <body> ?

What does the # symbol in front of the word 'wrapper' mean? Is it part of the code? I don't see it used in any source code except in the #color.

Thanks.

Meeguk
05-19-2007, 02:18 AM
The nav above is a bullet list with CSS. You can just view source and see how the menu is made up of LI's[Listed Items} and then look at the stylesheet referenced in the <head> section of the webpage to see how the styles were applied to it.This is the source for the bullet list above:

<div id="submenu"><div>Online community and forum for Dreamweaver, HTML and CSS</div></div>
<ul id="nav-top">
<li><a href="http://www.dreamweaverclub.com/">Home</a></li>
<li><a href="http://www.dreamweaverclub.com/forum/">Forum</a></li>
<li><a href="http://www.dreamweaverclub.com/tutorials.php">Tutorials and Articles</a></li>
<li><a href="http://www.dreamweaverclub.com/templates/">Templates</a></li>
<li><a href="http://www.dreamweaverclub.com/software.php">Software</a></li>

<li><a href="http://www.dreamweaverclub.com/books/">Books</a></li>
</ul>
<div class="clearer"></div>

<ul> means unordered list?

I could just substitute my own website particulars in place of the ones in blue I assume?

Then where would I place them? Under my <head> area?

Andromeda
05-19-2007, 08:03 AM
body {
text-align : center ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

<body>
<div class="wrapper"> all content goes here </div>
</body>
There are two parts code. The css (the part I've put in green) and the html (the part in red). The css either goes in a seperate style sheet but can also go in the head section of your web page.

External Style Sheet
If you want your css to be in an external style sheet then you can create one within Dreamweaver. If you're using DW8 you should be able to selectfile > new and from there choose css.

Name and save it. And then you can put your css code (the green bit) in it.

Now you will need to tell your html document that it needs to link to the style sheet. You do this by using this code:
<link rel="stylesheet" href="css/001.css" type="text/css">

The bit in blue needs to be changed to where you saved your css file.

Internal Style Sheet
This is where you have your css code in the html document itself.
In the head section of your html document you should have the following code at the start of your css:<style type="text/css">
Then you can put the css in.
When you have finished your css you close the style tag :</style>

The advantage of the external style sheet as opposed to this one is that other html documents can link to it. If you use an internal style sheet then only that html document will be able to read it.


Your html code (the bit in red) goes in the body section of your html document.

Andromeda
05-19-2007, 08:09 AM
What does the # symbol in front of the word 'wrapper' mean? Is it part of the code? I don't see it used in any source code except in the #color.

Yes it is part of the code so don't get rid of it ;-) !! It's used to create a css ID rule.

Andromeda
05-19-2007, 08:13 AM
This is the source for the bullet list above:

<div id="submenu"><div>Online community and forum for Dreamweaver, HTML and CSS</div></div>
<ul id="nav-top">
<li><a href="http://www.dreamweaverclub.com/">Home</a></li>
<li><a href="http://www.dreamweaverclub.com/forum/">Forum</a></li>
<li><a href="http://www.dreamweaverclub.com/tutorials.php">Tutorials and Articles</a></li>
<li><a href="http://www.dreamweaverclub.com/templates/">Templates</a></li>
<li><a href="http://www.dreamweaverclub.com/software.php">Software</a></li>

<li><a href="http://www.dreamweaverclub.com/books/">Books</a></li>
</ul>
<div class="clearer"></div>

<ul> means unordered list?

I could just substitute my own website particulars in place of the ones in blue I assume?

Then where would I place them? Under my <head> area?

Yes, you can substitute your own particulars in place of the blue text but there will be no formatting unless you use the css as well. The code above would go in the body part of your document.

Yes, <ul> means unordered list.

domedia
05-19-2007, 04:16 PM
You can't make use of a HTML handcode tutorial unless you have the core basics of HTML/CSS down.