-2

I am using absolute positioning on almost every element of the website. It is working perectly however only issue that I am having is that when I zoom out the footer remains nicely centererd but the header(#header) and content(#content) move towards left side. I am using margin:auto and even tried to center both of them using Jquery but the problem remains there. So can any one give me a solution. I would be grateful.

Here is the Site:http://contestlancer.com/Trivia/

4

4 に答える 4

0

IDが「脇」と「右」のdivをラッパーdivに配置し、ラッパーdivに自動マージンを与える必要があります。

<div style="margin-left:auto;margin-right:auto;width:1024px;" > 
   <div id="aside"> </div>    
   <div id="righter"> </div>   
</div>
于 2013-01-18T10:42:59.893 に答える
0

通常、私がしていることは、スクランブルされた css と html の混合の大量の負荷がある場合、jquery で強制します。

var w = $(window),
    el = $('#elementIwantToCenter');

//when first viewing the site => center el horizontally
el.css({position: 'absolute', left: (w.width()-parseFloat(el.css('width')))/2});

//when resizing browser window => center el horizontally
w.resize(function() {
  el.css({left: ($(this).width()-parseFloat(el.css('width')))/2});
});
w.trigger('resize');

例: http://jsfiddle.net/XSDM7/

于 2013-04-16T03:12:09.490 に答える
0

を使用する場合position:absolute、基本的には配置を完全に制御できます。これにより、ブラウザーに何も任せないため、レイアウトが大きな仕事になります。

  • 使用する場所position:relativeの代わりにposition:absolute使用します。
  • top:0px;' on both#content and#footer`を使用します。
  • で既に行われているように、#headerとの上部セクションの左マージンと幅に % を使用します。#content#footer

例#content:

#aside
{
  top: 30px;
  float: left;
  display: inline;
  background-color: #F7B800;
  min-height: 500px;
  position: relative;
  border-radius: 9px;
  text-align: center;
  margin-left: 15%;
  left: 0;
  width: 30%;    
}

#righter {
  vertical-align: baseline;
  top: 0px;
  float: right;
  display: inline;
  left: 0px;
  position: relative;
  min-height: 550px;
  word-wrap: break-word;
  margin-right: 5%;
  width: 45%;
  margin-left: 5%;    
}

1 つの重要なことはmargin-left、margin-rightとwidthの 2 つのセクションの合計が 100% になることです。

于 2013-01-18T10:52:01.623 に答える
0

firebug を使用してあなたのウェブサイトを調べると#logo、 、#navigation、#righterおよびがピクセル単位#asideで設定されていることがわかります。margin-left: ...px

これは、ズームアウトまたはズームインしても、設定されたピクセル量の左余白が常にあることを意味します。代わりに、パーセンテージで作業してみてください。すなわち:

#righter {
   left: 40%;
}
于 2013-01-18T10:55:18.010 に答える