Expression Web Tutorial -Center a Web Page (or a div)

[aprimic]

wow, that's great! you're a fantastic teacher

[Expressionweb2]

@aprimic thank you!!

[regaltwo]

THANK YOU. I have looked at half a dozen tutorials about how to do this and every one of the b$^$%^^ts left something out. Your simple tutorial is the first one that actually worked. Thanks again. :)

[Expressionweb2]

@regaltwo Thanks! And I do know what you mean. That's why I was meticulous in creating my tutorials to make sure I did not miss a step!

[staticdynamicandnul]

I have actually discovered a way by complete accident to get rid of those "margins" lol. Changing all the pages margin aspects to 0px. But there is a real serious question I have that might be a little more complex. I'll post it where you instructed me to.

[Expressionweb2]

@staticdynamicandnul Web browsers apply basic defaults to our web pages. To remove these defaults, we specify styles just as you mentioned, commonly, we zero out all margins and padding using either a css reset or possibly a universal selector. You can ask more questions about all this on my help forum.

[staticdynamicandnul]

first of all excellent video, this is the only suggestion that worked for me. i've always designed websites in photoshop for fun but I'm just now taking the coding part serisously. I have a bunch of questions that I'm sure you can answer. My first question is how can you but the top of the container to the very top edge of the webpage, as you can see in your video there is a white line between the browser window and your black graphic.....make sense?

[Expressionweb2]

@staticdynamicandnul Thanks! And, that is a Great Question! Since you have other questions, and because I need more space to appropriately answer this question, go to my Help Forum where you can ask all your questions. You will need to register an account and I will personally approve your account, and then you can ask your questions. For now, I will post your question and my answer so you can read it right away.

[Expressionweb2]

@staticdynamicandnul I am trying to add the link to my help forum, but I keep getting an error. So, I will add it to the video as an annotation

[jackteagarden]

Very good! Do you have a tutorial on CSS vertically centering? I mean one div inside another. I've tried some

methods and cannot get it to work properly. Thanks.

[Expressionweb2]

Hi Everyone, I want to point out one thing: this tutorial is about using CSS to center a div. It does not matter if you use Expression Web, Dreamweaver, or Notepad. CSS is the way it is regardless of any Professional web editor that you use. Therefore, this tutorial is appropriate for anyone designing web pages, regardless of the tool being used. And this tutorial will work in any browser.

[LeperAffinity5]

I have a layout thats not centering. Using notepad++ and Dreamweaver for a little insurance. First time web designer and I don't have any other div's with a width.  I do have other div's with a margin though. What is the position suppose to be when centering, if one at all. My layout is just about all div's with a few added extra's like img's, p's, and a few hr's.

[Expressionweb2]

@LeperAffinity5 In order to center your container, which is a static div, you must assign a width. The width can be in pixels, percentages, or ems. Then add auto margins for the left and right. Another way to center a static div is by adding equal margins on the left and right of the container and then specify a max-width using CSS. This way, your web page will not look ridiculous on huge screens.

[Flain33]

@LeperAffinity5 Create a container div and put all of your content inside of it, then center that div. Something like this can work:

#container { position: relative; width: 960px; margin: 0 auto;

}

[Expressionweb2]

@Flain33 Absolutely! In fact, that's how I recommend doing it. Make a container and put everything in the container. This way, you only have to center the container. But, depending upon your design goals, you can also center divs individually. Be creative and see what you can come up with!! Thanks Flain33.

[ryanandpamo]

I have done exactly as you have done in the video but still can't get my page to center... The only div I have on my page is the "container div" then the rest of the site is built with "layers" as apposed to "divs". does this matter?

[Expressionweb2]

@ryanandpamo Yes, it matters very much. The video is showing you how to center a static div and not a layer. Layers cannot be centered like a static div. Therefore, use a plain ole div (static) for your main container. If you choose to use layers from there on, then set the position property of the container to relative. This way you will position the layers 'relative' to the container.

[ryanandpamo]

@Expressionweb2 Thanks so much! that was it.

[pilotfokker320]

great work matey

[Expressionweb2]

@pilotfokker320 thanks!

[Beemerboy324]

I'm trying to force pages on the site to be 800 px wide. I spent 2 days trying to find out how and here it is in a minute and 22 seconds. Just so I understand, I can create a div, lets call it "allcontent" and set the width to 800. Then I can put all of the Web code inside and the page will stay in the boundries, right. good tutorial, thanks.

[Expressionweb2]

@Beemerboy324 Yes, you are correct. You will most likely add a few more divs inside the #allcontent div so as to divide the page into a layout. When doing this, avoid assigning a width for any div that you want to run from the left all the way to the right. By keeping the width unassigned, the div will by default take up the entire horizontal space and stay inside the boundaries of the #allcontent div.

[Hamad12a]

how to download it ?

[Expressionweb2]

@Hamad12a What do you want to download? This video?

[Hamad12a]

yeah cool this good i watch your video and i visit Expression Web Tutorial.com

i download the tutorial

[Hamad12a]

nice job !

[Expressionweb2]

@Hamad12a thanks! I think I need to remake this video because it is so blurry. But hopefully everyone got the point.

[807productions]

Great thanks. forgot how it worked so thanks

[YoSoySatanas]

Hello, Thank you so much, I spend like 2 hours trying to center the div, lots of combinations, padding:0 margin 0, it was so simple; left and right auto... Thanks :)

[paliprincefred]

is it . masthead or maskhead and what does that do?

[Expressionweb2]

'masthead'

Another name for the masthead is 'header'. It indicates that it's div at the top of the page. But you can call it whatever you want when using ID Selector. It's usually best to be descriptive.

[enzof25]

thank you

[Expressionweb2]

You're welcomed. Thanks for watching.

[moosekrause]

Thanks so much. I don't think I would have ever figured on my own :)

[Expressionweb2]

You're welcomed.  Thanks for watching.

[Typhoon07]

Thanks for this!

[Expressionweb2]

You bet. Thanks for watching.

[Noriezul]

good video thanks

[ExoriaX]

Hello, I have a page that has 3 frames, top, left, and bottom. How do I make the whole page to center at 800x600?

Help is appreciated.

[Justin28082]

This doesn't work for Internet Explorer 8

[Expressionweb2]

Sure it does. Remember, use a Static Div not a layer. Set left and right margins to auto and set a width. The width can be in pixels, ems, or %. This method will not work in Internet Explorer 5, unless we use a CSS Hack. However, IE 5 is rarely used these days thus the hack is no longer necessary. If you had problems getting this to work in IE 8, go back and double check that you followed the tutorial correctly. Note: we can use other methods to center a web page, but this is a better way

[Justin28082]

It was my fault. I didn't put the line that tells the browser to stick to standards at the top of my html.

[nsartigo]

where can i download web expression

[Expressionweb2]

Great question! Unfortunately, you cannot place a background color to the margins. Remember, a margin is on the outside aspect of the page element in question. It is invisible. However, you could, depending upon your situation, add a border to the page element. If you do this, just do not add a margin, or decrease the size of the margin. Add as much of a border as you need.

[bisconi1]

Is there any way of adding background colour to the margins?

Great video that you

[lordcimek]

Wow!...just as simple as that.

Thanks a lot...Been trying to center my website using expression web for a while now....

Thanks to google, thanks to youtube and thank you for making this video.

[Expressionweb2]

You are quite welcomed.

[DLink2theworld]

Hi, I have a problem with my page and think it is to do with margins and divs. When I view my pages at school they are fine but when at home the content is wrong. The content is not where it should be and the photo's are not where they should be. Same browser but different screen sizes, eg, home desktop pc, large widescreen and laptop small normal screen. ect.

Is it the position of the div's or do I need another command in there to tell browsers to auto size or something?

Thanks for any help.

[Expressionweb2]

First, check your browser settings....especially the font size set on your browsers...at home and at work. The next thing to check is the Screen Resolution..... Click Start -> Control Panel -> Appearance and Themes -> Choose 'Change Screen Resolution" only to view it, not to change it. You will likely see a resolution of 1024x768 and 1200 x800 or similar.

Now, how was your site built? is is fixed or fluid? (pixels or percentages?)

I had a situation due to an old computer was junk....

[VolcanicDrum]

Wow! Short Sweet and Powerful!

thanks..

[Expressionweb2]

Thanks!

[jambozx]

Hey I have a problem:

I have left side, center and right side on my web page and I want to center it. But when I try to center it with this tutorial, the left and right side go center too and they wont be next to center.

I hope you understand. English isn't my best language.

[Expressionweb2]

It sounds like you have 3 columns and you want all three centered. The best thing to do is create a container, which is one main div , and center this container.... then place the 3 columns inside this container. You will only need to center the container, not the individual columns.

[R0TUND]

I am trying to center an ap div, and when I change the left alignment to auto the div aligns flush with the left side, but when I change the right alignment to auto it does not have an effect. Please help. Thanks.

[Expressionweb2]

You can 't center an absolutely positioned div (which is technically a layer). Well, not like you can if you have a static div. If you want all viewers to see your page centered, or a page element centered, it must be a static div, meaning do not assign any css positioning properties. It must also have a width, and auto margins for the left and right.

(The width of the div can be specified in pixels, ems, or %. )

[Expressionweb2]

I do want to clarify that we are not adjusting "alignment".  The text-alignment property is used on text. It is the right and left margins that we set to auto. Now, there is a way to center an ap div, but you will end up with other issues that will need to be fixed...which is why I don't recommend the use of ap unless you are inserting something ON TOP of the layout and need to use the z-index to adjust the stacking order...etc.

[AbelineMusic]

There's a ton of code you can't use in their framework, and a lot of tables you have to learn to manipulate. It was pretty frustrating to start off with, but I'm slowly getting it now. I'd always use hotspoting, or coordinate based buttons, never seeing a need for this other approach, with is still quite confusing. If you have any other text based directions that encompass the entire process, i'd love to read them :)

[Expressionweb2]

I don't have any info about myspace layouts. However, if you want to create clear .gifs, click on View--> choose Toolbars --> choose the Pictures toolbar. this toolbar has a transparency tool that allows you to create clear .gifs. I hope this helps.

I do hope to include myspace layouts in one of my books I am writing, but it all depends upon the amount of time.

[lilty12340]

your tutorials have been very helpful so far, but how come there are several videos with the same information.. im a little confused. It would also be helpful if your videos were numbered or something.

[Expressionweb2]

Hi All! I am re-making this video because I now have a better version of video software. I will let you know when it has been uploaded so you can watch.

PLEASE TELL ME WHAT ELSE YOU WANT TO LEARN.  REQUEST A TUTORIAL.

[AbelineMusic]

show us how to do a div overlay with a full image based layout, and then set clear.gif's to place buttons freely over the top of the div. and then apply this to a myspace layout. haha.

[Expressionweb2]

Dear Lord, I have not used MySpace, but I am certain it is quite do-able. But, your wish is my command. Just give me a lot of time as I am behind in my work due to traveling.

[bati2kiwimelon]

hi. Can you help me? why can't iinsert a imege in there? how can i design my web site?

Can you make a tutorial, you know, how insert images and personalize in general? Please im new using this program and im going crazy

[Expressionweb2]

Yes, i can make more tutorials for you all. Just request them! Plus, I am uploading videos at other sites. Just send me an email through you tube and I will email you a link. Just click on my username in the top right panel on this page and you will be taken to my channel, from there look for the contact link.

[bati2kiwimelon]

Hi can you help me? emmm why can't i insetr a imege in ther? :S what can i do to desing mi page? can you make a tutorial about, you know ,how isert images and personalize in general? please im new using this program and im going crazy.

[Edel99]

But, what if you are doing a 'liquid' layout? If you set a width to auto it's no longer centered?

[Expressionweb2]

A Liquid layout can also be centered. Do not set the width to auto, just the right and left margins.

But you need to also set a width. For a fluid layout, set the width with a percentage. For instance, set width to 90%. Then auto margins left and right. It will center.

[3qwcom]

thanks that was great.

[Expressionweb2]

thanks!

[Expressionweb2]

You are quite welcome!

[Expressionweb2]

Hi there. The web editor being used is Expression Web 2 from Microsoft.thanks!

[C32347K17732]

how to center vertical?

i have only one div with divs inside that one

when i set the margins left and right to auto, it still stands at the top

Thanks!

[abyssgt]

Thanks :) helpful tutorial

[Expressionweb2]

Glad you found it helpful!

Kelly

[Glenaruto]

What is the fourth tab?