レイアウトの外に画像を配置する

私は960ピクセル幅のウェブサイトを作っていますが、画面が大きくなると見えるようにヘッダの両側に画像が必要です。レイアウトの外に画像を配置する

は、私は960ピクセル幅が広い私はこれらの余分なサイド画像はブラウザによってカウントされないようにする必要がありますサイトを維持したいので、私はそれが左

上で動作するように取得することができ、ここで参照してください。

enter image description here

http://www.wireframebox.com/test/sideimages/index_leftworks.html

コード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { margin: 0; padding: 0; border: 0; background-color:#096 } 

img { border: 0; } 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg); 
    position:relative; 
    top:0; margin: 0 auto; 
} 



#left { 
    width:170px; 
    height:216px; 
    background-image:url(left.jpg); 
    float:left; 
    left:-170px; 
    position:relative; 
} 

#right { 
    width:170px; 
    height:216px; 
    background-image:url(right.jpg); 
    float:right; 
    left:170px; 
    position:relative; 
} 



</style> 

</head> 

<body> 

    <div id="main"> 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</body> 
</html>

ウィンドウを細くすると左の赤いイメージがブラウザウィンドウに下のスクロールバーを表示させずにサイト外に消えますが、右のものと同じことをしようとすると正しく動作しません

CSSがでているだけ<div id="right"></div>が欠落している、

http://www.wireframebox.com/test/sideimages/

コードが同じで

enter image description here

ここ

を見ます起源。

あなたはまた、それが全体的なサイトは、なぜ左にこの作業を行いますがない

http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/

幅影響を与えることなく、ページの左側を突き出した日付を表示するには、このサイトで使用されて見ることができます権利？

出典

2012-03-16 russian box

。他の人が同じ問題を読んで、あなたのサイトがオフラインであることを考えてください:)そして、変更を適用してください:) – Neysor

すべてをやってくれてありがとう！うまくいけば、誰かが何がうまくいかないかを知ることができます。また、私はあなたが何を意味しているのか分かりません。 –

[レイアウトの外に画像をスクロールバーなしで配置する]の可能性があります。/questions/9731774 /位置決めの画像 - スクロールバーなしのレイアウト外） – Starx

...出力については、以下のフィドルを参照してください

フィドル：http://jsfiddle.net/C2j6G/4/

デモ：

http://jsfiddle.net/C2j6G/4/embedded/result/が画像の下を参照してください。 - 私は画像やコードを挿入

enter image description here

出典

2012-03-16 07:01:03 w3uiguru

これはそうです！しかし、私がハイパーリンクを持つイメージのようなコンテンツdivにコンテンツを入れると、それをクリックすることはできません。このdivはどのように積み重ねられているのか？ –

私はこの問題をソートしました^これは私がこのすべてに慣れていないので、コンテンツdivの中にdivを置いて、それにZインデックスを与えてプレイするためです：1;コンテンツをクリック可能にするように見える！：O –

ありがとうございました！ –

ウェブサイトのページを960ピクセル幅にしたい場合は、メイン画像の幅を960-170（左）~170（右）に変更する必要があります。 main.jpgの幅を620ピクセルに変更すると問題が解決します。

出典

2012-03-16 05:59:47 Swaraj

私はサイドイメージをページの幅に向かって数えないようにしたいが、それは左側ではなく右側で機能する。私のリンクを参照してください –

HTHは、あなたの中心のdivよりも大きくなっているのdivや画像タグに画像を入れて、その中央のコンテンツのdivの子にします。また、その位置がフロー（\ absolute）から外れることを確認してください。マイナスのマージンを追加すると、画像の配置を中断することなく画像をコンテンツdivの外に引き出すことができます。

#center div.top{ 
     width:1200px; 
     height:170px; 
     margin: 0px -170px; 
     position:absolute; 

     background:url("randombackground.png") no-repeat; 
    }

HTMLはちょっと、このようになります：

<div id="center"> 
<div class="top"></div> 
Content content content 
</div>

出典

2012-03-16 06:10:13 rfinz

私はこれで遊んだが、それは動作していないようです。私はどのようにしたいですか。それは私の画面の左側から見えないよりもdivを置く：S、私がしようとしているのは、私が左にしたように、私の見出しの右にイメージを置くことで、ウィンドウが1300ピクセル以下の場合、スクロールバーをウィンドウの下部に追加してください。 http://www.wireframebox.com/test/sideimages/justleft.jpg http：//www.wireframebox。 com/test/sideimages/left_and_right.jpg –

小さな画像が2つありますか？ 1200ピクセル幅のものにそれらを組み合わせることはできますか？私の解決策はうまくいくはずです...そして、スクロールすることに関しては、おそらくオーバーフローでdiv内の全ページをラップする必要があります：隠された; ..多分いくつかのjQueryまたはプレーンなJavaScriptを使って幅を100％に保ってください – rfinz

あなたは身体のbackgroundに与える&これら2枚の画像を組み合わせることができればそれは良いでしょう。このような：

HTML

<div id="main"></div>

CSS

body { 
margin: 0; 
padding: 0; 
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center; 
} 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg); 
    margin:0 auto; 
}

チェックこのhttp://jsfiddle.net/PVWzA/1/

出典

2012-03-16 06:43:57 sandeep

ありがとうございます。はい、私はトップセクションにまたがった1つのイメージを持つことを知っていましたが、私はそれを別々に保つことを望んでいます。あなたが提案したものは、それを行う方法ですが、私が探していたものではありません。ありがとうございました！ –

レイアウトの外に画像を配置する

答えて

関連する問題