Выравнивание заголовка CSS - PullRequest
1 голос
/ 26 декабря 2011

Мне просто не удается правильно выстроить заголовок. Я ближе всего могу получить в Internet Explorer с приведенным ниже кодом, но это выглядит ужасно в Firefox. Я перепробовал все, что мог прочитать на каждом форуме, и чем больше я играю с ним, тем хуже. Все, что я хочу, это header.png, чтобы распространяться по странице, и это прекрасно работает. Затем я хочу центрированный заголовок с formtop.png в качестве фона, и это прекрасно работает. Теперь внутри этого заголовка я хочу, чтобы logo.png находился слева внизу от заголовка div, а моя таблица меню фейерверков - справа внизу. В IE все выстраивается в линию, за исключением того, что таблица меню имеет некоторое пространство между собой и самой нижней частью div. В Firefox ничего не выстраивается вообще. Подозреваю из-за абсолютных и относительных настроек. Все, что я хочу внутри своего заголовка, заканчивается в левом верхнем углу Firefox. Но игра с абсолютными и относительными атрибутами взрывает все в IE. Может кто-нибудь помочь или указать мне основной учебник, который показывает, как выстроить div заголовка, который применим к большинству браузеров?

</head>
    <body style="text-align:center; margin:0; padding:0;">
    <div  style="width:100%; height:100px; background-image:url(header.png);position:relative;">
      <div>
        <div style="height:100%; width:100%; background-image:url(formtop.png); background-repeat:no-repeat; background-position:center; left:0; bottom:0; position: absolute;">
          <div style="width:920px; position:relative;">
            <div><img name="n12" src="logo.png" border="0" alt="" align="left"></div>
            <div style="padding-top:10px; float:right; padding-right:30px; position:absolute; bottom:0;">
              <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="400">
                <!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="navbar.png" fwstyle="Dreamweaver" fwdocid = "1979268284" fwnested="0" -->
                <tr>
                  <td><img src="images/NavBar/spacer.gif" width="124" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="139" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="137" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="1" height="1" border="0" alt="" /></td>
                </tr>
                <tr>
                  <td><img name="navbar_r1_c1_s1" src="images/NavBar/navbar_r1_c1_s1.png" width="124" height="50" border="0" id="navbar_r1_c1_s1" alt="" /></td>
                  <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c2_s1','','images/NavBar/navbar_r1_c2_s2.png',1);"><img name="navbar_r1_c2_s1" src="images/NavBar/navbar_r1_c2_s1.png" width="139" height="50" border="0" id="navbar_r1_c2_s1" alt="" /></a></td>
                  <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c3_s1','','images/NavBar/navbar_r1_c3_s3.png',1);"><img name="navbar_r1_c3_s1" src="images/NavBar/navbar_r1_c3_s1.png" width="137" height="50" border="0" id="navbar_r1_c3_s1" alt="" /></a></td>
                  <td><img src="images/NavBar/spacer.gif" width="1" height="50" border="0" alt="" /></td>
                </tr>
              </table>
            </div>
            <br/>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div>

Ответы [ 2 ]

2 голосов
/ 26 декабря 2011

Еще более кратко:

margin: 0px auto;

Было бы очень полезно увидеть опубликованный сайт, как сказал nmagerko.

0 голосов
/ 26 декабря 2011

Для выравнивания по центру в forefox используйте margin в дополнение к text-align: center

Что-то вроде:

 margin-left: auto;
 margin-right: auto;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...