How to fix look of the page?

[murfy]

I have a site centered on the center, but I had a problem in that the head was
fixed width 800px (use text-align: left , while the foot was
stretched to the edge of the maximum (use text-align: center). I therefore want to do
header so that it must be stretched to the edge of page. But there's a problem. once
it is to the edge, so the elements are to the edge too - the parts of text-align left, rebounds elements
header to the edge. I thought I could fix it with absolute
positioning the 2px from left, but it does not help. So how does it actually do?

 

 

<DIV class=context>
<p id=header>
<IMG SRC=.../images/logo.png" >

<p id=mainmenu>THIS MAIN MENU ID NOT VISIBLE BECAUSE OF CSS BUG: I MADE THE p ELEMENTS TO BE ABSOLUTELY POSITIONED ON LEFT.WISIBETOTO JE HLAVNÍ MENU S BÍLÝM TEXTEM, NENÍ VIDĚT, SCHOVALO SE POD

...here are links to main menu...
</p>

User menu is like this:
<ul id=menu>
<li><a ...><IMG SRC=".../images/messages.gif" > MENU SECTION</a>
<ul>
<li><a ...>SUBMENU></a></li>
<li><a >SUBMENU</a></li>
</ul>
</li>
</ul>
<p>Notice: you have one new message THIS IS ALSO NOT VISSBLE BECAUSE OF CSS BUG</p>

There is a whole html:

http://paste.ofcode.org/KHSU6Ay88K3RW8Ki5mqwCm

Picture Title header, both menu and message need to put in order began
closest to the red lines / arrows.

 

 

PS: Sorry for Google's fucking English.

Edited February 11, 2014 by murfy

[murfy]

I have successfuly solved the problem for FF and Opera 9.64 but in IE8 I still have this problem: The header is placed on the left, whilst the yellow content of the page is on the middle. Any idea how to solve the problem?

 

 

 

Note:

I have replaced the section tag for div (there is img#head) and small (message notice) and menu tags.

 

These tags are blocks having 100% width and the p children are with 779px and margin:auto; or margin: 0 auto;

 

This is how I centered the top in Firefox and Opera, but IE8 still fails to accept the rules.

 

Any solution? I need to move the header containning logo image, notice, main menu and user menu into the same distance of the position of the yellow left side of the page content.

Edited February 12, 2014 by murfy

[murfy]

Hello,

can you help to fix this user menu?

 

http://t24.4fan.cz/

 

There is problem with the submenu. When you go with mouse over the first ul, then the submenu ul is displayed and it needs to move downwards cca +5 px. I tried to position it absolutely, but it does not work. When I make top:3px; in #menu ul li ul, no effect.

[adam_bray]

Problem 1: You want to use the following CSS to center align elements - 

margin: 0 auto;

I don't see the second issue, is it already fixed?

[josh1600]

Research what the 'box model' is, Try and better understand the structural layout of simple html css, It will save you time and should help you figure out problems like this easily.

[murfy]

HI, problem fixed. Thanks