Help - Search - Members - Calendar
Full Version: Centering of Banner
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
shark13
Hello,

So I recently got tasked with creating a website for our local non-profit soccer tournament. I've designed sites in the past (years and years ago), but nothing spectacular. I know my code is probably junk, but in spite of that I have a question.

I cannot get the banner at the top of my page http://www.volcanotournament.com to stay centered when switching from screens with 1366 x 768 resolution to 1280 by 720. Specifically the drop down menus want to shift to the left despite what I have tried. Currently the site seems to be well positioned for the smaller resolution, but looks a bit off for the larger.

My guess is that there is a simple fix to this issue that will keep the site well positioned in both situations.

Any help would be greatly appreciated.

Thanks

pandy
I don't see any centered banner. I see an image to the left (Volcano International) and one to the right (Big Island) and I think both behave well when I size the window up and down. biggrin.gif
shark13
Hello Pandy,

You are correct the image of the tournament and the logo of the candy company are correctly placed. My problem really lies in the drop down menu. In the smaller resolution everything looks fine, but in the larger view (the view I would like to focus on) the drop-down menu of four links (tournament, policies, resources, activities) keeps positioning itself to the left. Ideally I would like to have these centered but I cannot get it to do so. I tried <center> and <td align="middle">, and neither worked.
pandy
I see. I think left align looks good, so I thought it was by design.

But try this.

Change this rule like so.

CODE
li.dropdown {
    /* display: inline-block; */
     display: inline;
     float: none;


And add this rule.
CODE
#menu ul  { text-align: center }


See http://www.w3.org/Style/Examples/007/center.html .

Not needed really, but just to be safe, remove 'align=right' from the TD.

Also, it's important to use a doctype. One reason is so you can validate and find error. Another is that browsers use something called doctype switching to toggle between two (or more) rendering modes. Without a doctype you get quirks mode. That basically means browser emulate older and buggier versions of themselves. When you use CSS you don't want that. You want all browsers to behave the same as much as possible. You want them to use standards mode, AKA strict mode.

I think HTML 4.01 Transitional fits your HTML best and you want the long version with an URL. Paste this at the very top of your documents.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you clean things up a little you can use HTML 401 Strict instead.

http://htmlhelp.com/tools/validator/doctype.html
https://hsivonen.fi/doctype/
You probably don't want to read the latter page right now, but save the URL for reference.

I still think left aligned looks better, but if you want centered you should cut some fat off the left image. It has some blank space that pushes the menu to the right and makes it look a little off center.
shark13
Thank you so much Pandy.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.