8

主にモバイル デバイスで、私の Web ページでいくつかの問題が発生していますが、デスクトップ デバイスにも影響します。これらの問題を解決できる人に (stackoverflow が許可する場合は) 喜んで報奨金を授与します。

HTML: http://pastebin.com/raw.php?i=bbFsMcwT

CSS: http://pastebin.com/raw.php?i=SGMwt3cs

JSFiddle: http://jsfiddle.net/D8SJD/

  • 問題 1 - 左右のスクロール イメージ ボタン
    • 現在、左右のスクロール画像ボタンはhtmlを使用して行われてonmouseoverおりonmouseout、それらをcssベースの「ボタン」に変換できるようにしたい

モバイルデバイスについては、テストのために以下のようなことを試しましたが、どれも機能しませんでした...

@media (max-width: 640px) {
    #header > a img {
        display: none;
    }
}

編集 2013 年 11 月 14 日 @ 01:58GMT

1920x1080 の画面では問題ないように見えますが、以下に示すように、テキストとプレースホルダー画像の間に大きなギャップがあります。 http://i.imgur.com/vWoEpK8.png

1680x1050 の画面では、「Semi」がどこにあるかをメモして、上の 1920x1080 の画像と比較する方法を大まかに示しています。 http://i.imgur.com/SEppf7n.png

600x600 の画面では次のように表示されます。ご覧のとおり、プレースホルダーと左矢印の間に大きなギャップがありますが、右矢印にはギャップがなく、実際にはオーバーフローしています。テキストに関しては、あまりにも遠すぎます。権利。 http://i.imgur.com/QcRhW3B.png

4

5 に答える 5

5

リンクの周りに境界線が見えます。リンクから削除してください:

a{
    border:none ;
}

最初の問題では、CSS でそれを行うことができます。次のよう<img>にタグ内の<a>タグを削除するだけです。

<div class="footleft">
   <a class="def" href="javascript: void(0);">

   </a>
</div>

次のようなイメージ ボタンを作成します。

ここに画像の説明を入力 ここに画像の説明を入力

次に、背景を次<a>のようにタグに設定します。

#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}

#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}

#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}

position:absolute;2番目の問題は、から削除すれば大丈夫だ#header .headimageと思います。#footer .footimage

中央に配置したい場合、2つの選択肢がありますheadmid。footmidfootmidtwo

まず、固定幅を設定し、次のように CSS を使用します。

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}

2 番目: 動的な幅が必要な場合は、この CSS と JQuery を使用できます。

CSS:

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}

JQuery:

var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();

$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));

jsFiddleはこちら

于 2013-11-17T11:48:12.700 に答える
3

http://jsfiddle.net/D8SJD/4/

絶対配置を使用する代わりに、テキストの中央揃えを利用するだけで、画像とテキストが自動的に中央に配置されます。

中心からのオフセットが必要な場合は、position:relative、上、左、右などを試してください。中心位置に対して相対的に移動します。

display:inline; である要素。または display:inline-block; 親の text-align プロパティ、この場合は text-align:center に従って配置されます。

#footer .footimage {
    display:inline;
    position:relative;
    top:-10px;
}

#footer .footmid {
    top: 50%;
    width:100%;
    position: absolute;
    font-size: 15px;
}

#footer .footmidtwo {
    top: 70%;
    width:100%;
    position: absolute;
    font-size: 15px;
}
于 2013-11-19T01:03:37.230 に答える
2

問題 2 に従って、私は間違っている可能性がありますが、サイトの構造を通じて画像をターゲットにする場合、つまり

headImg a img{...}

スタイルがうまくいかない。ただし、画像にクラスを追加すると、スタイルは機能します。場合によっては、いくつかの閉じられていない div または要素がアーキテクチャに干渉している可能性があります。

<div class="headimage">
    <a href="url" target="_blank"><img class="placeholder" src="http://placehold.it/300x80"/></a>
</div>

@media screen and (max-width: 640px) {
    .placeholder {
        display: none;
    }
}

JsFiddle ここ - http://jsfiddle.net/Q5bEb/

于 2013-11-14T01:24:30.167 に答える