0

別の div に従って div を配置しようとしましたが、役に立ちません!

私はレスポンシブなフルスクリーンのバックグラウンド サイトを持っており、その上に (ロゴホルダー) という div があり、そのロゴ ホルダー内には (ロゴ) を識別した別の img ホルダーがあり、ユーザーの画面解像度とデバイスに応答します。これはjqueryを介して行われます。

ロゴホルダーの下には、3 行の段落 (通常のテキスト) しかなく、これも同様にレスポンシブです。つまり、さまざまな画面解像度でサイズを縮小/拡大します。これは JavaScript を介して行われます。

さて、問題は次のとおりです。

サイトを横画面や縦画面 (iPhone、Samsung など) で見ると、ロゴの下のテキストがロゴの上に重なったり、逆になったりします。

ロゴに従ってテキスト/段落の位置を維持する必要があります!

ここに私のコードがあります:

<style type="text/css" media="screen">
html
{
  font-size:100%;
}

#logo
{
  top:30%;
  height:auto;
  left:5%;
  position:absolute;
  width:38%;
  z-index:1000;
}

#txt1
{
  top:55%;
  height:auto;
  left:5%;
  position:absolute;
  width:55%;
  z-index:1000;
  color:#FFF;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  margin-top:4%;
}

#txt2
{
  top:59%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  margin-top:4%;
}

#txt3
{
  top:63%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  margin-top:4%;
}

#txt4
{
  top:22%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
}

#txt5
{
  height:auto;
  width:100%;
  z-index:1000;
  color:#fff;
  font-size:4%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  text-align:center;
}

#logo img
{
  width:100%;
}

body
{
  background-image:url(images/bg.jpg);
  background-repeat:repeat;
  font:16px/1.8 sans-serif;
  font-family:Verdana, Geneva, sans-serif;
  margin:0;
}

#preloader
{
  position:fixed;
  top:45%;
  left:50%;
  height:200px;
  margin-top:-45px;
  width:200px;
  margin-left:-100px;
}

h1
{
  text-align:left;
  color:#fff;
  font:16px/1 "Verdana, Geneva, sans-serif";
  display:inline-block;
  width:100%;
  font-family:Verdana, Geneva, sans-serif;
}

a:hover
{
  color:#cf0226;
  text-decoration:underline;
}

#bottom
{
  position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  margin-top:40px;
  text-align:center;
}

a:link,a:visited,a:active
{
  color:#cf0226;
  text-decoration:none;
}

これは body タグ内のコードです。

<div id="txt3" class="txt3">
    <h1 id="fittext3" style="font-weight:600;"><a href="#">No, I do not accept the site terms and conditions.</a></h1>
</div>
<div id="txt4">
    <h1 id="fittext4" style="font-weight:600; font-size:18px;">WELCOME TO</h1>
</div>
<div id="maximage">
    <img src="lib/images/demo/9mm_Vodka_Gun Solo_GRADED.jpg" alt="" width="1400" height="1050"/>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script src="lib/js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
            $(function(){
                // Trigger maximage
                jQuery('#maximage').maximage();
            });
        </script>
<!-- DON'T USE THIS: Insert Google Analytics code here -->
<script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-733524-1']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
</div>
<script src="fittext.js"></script>
<script type="text/javascript">
      fitText(document.getElementById('fittext'), 3.5)
      fitText(document.getElementById('fittext2'), 3.6)
      fitText(document.getElementById('fittext3'), 3.6)
      fitText(document.getElementById('fittext4'), 3)
      fitText(document.getElementById('fittext5'),11.5)
    </script>
</body>
4

0 に答える 0