CSSでボタンポジショニング

私は、次の標準マークアップがあります。CSSでボタンポジショニング

<body> 
    <header><div class="wrapper">Header</div></header> 
    <div id="create">create something</div> 
    <div class="wrapper">Content</div> 
    <footer><div class="wrapper">footer</div></footer> 
</body>

とスタイル：、

.wrapper { 
    width: 920px; 
    margin: 0 auto; 
    padding: 0 20px; 
    text-align: left; 
}

私は「何かを作成」ボタンを配置しているとの難しさを持っています事を私は希望以下に示すように、それは重要な...

enter image description here

を位置付けのように注目すべき点は、ボタンが右に無限に広がっており、ブラウザーの幅に関係なく、常に中央領域の「4平方」の幅を占める点です。

アドバイスありがとう、ありがとう。

出典

2011-12-05 pingu

ボタンにはposition：absoluteを使用する必要があります。 – Oyeme

ピクセルはどれくらいの広さですか？ – noob

'content'は有効なHTML要素ではありません。 –

ワンボタンの要素と無限大とそれ以降..

無限要素が部分的に#wrapまたは#header要素の背景の下に隠されているに入るラインの別の要素。

http://jsfiddle.net/lollero/62wcV/1

CSS：

#wrap { 
    width: 400px; 
    margin: 0px auto; 
    background: #ffffff; 
    position: relative; 
    z-index: 10; 

    height: 600px; 
} 

#button, 
#button_line { 
    position: absolute; 
    top: 40px; 
    right: 0px; 
    height: 20px; 
    background: #3a99ff; 
} 

#button { 
    width: 100px; 
} 

#button_line { 
    left: 50%; 
    z-index: 5; 
}

HTML：

<div id="button_line"></div> 

<div id="wrap"> 
    <div id="button"></div> 
</div>

出典

2011-12-05 08:32:37 Joonas

CSSでボタンを作成する場合は、常に幅、高さ、パディング、および余白を計算します。特定のコンテナに合わせて正確なボックスサイズを与えるのに役立ちます。この投稿をチェックしてください。 http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-paddingポジショニングチュートリアルもチェックしてください。

出典

2011-12-05 08:23:11

私はこれが最善の方法であると言うつもりはありませんが、それは私のために動作します。

<div style = "background:red;position:relative;left:50%;right:0"> 
<div style = "background:green;position:relative;left:120px;right:0"> 
Your button here! 
</div> 
</div>

最初のdivは、ページの中央を示しています。 2番目のボタンは、あなたが望むだけ左にオフセットされているボタンです。

出典

2011-12-05 08:37:35 Amerdrix

CSSでボタンポジショニング

答えて

関連する問題