-1

まず、3 つの別々の画像があります。ひよこ、「配達」、「フードスタント」という言葉 私はそれらをそのような方法で整列させたかった--> 3つの画像 ブラウザウィンドウのサイズ変更とおそらく解像度にもかかわらず、変更されない位置を可能にするそのような配置を達成する方法はありますか?

絶対位置と相対位置の両方が機能しますが、ブラウザーのサイズを変更するとすべてが台無しになります。マージンはそのトリックを行うことができないようです..または、私は単にスキルが低いだけです.

HTML コードは次のとおりです。

<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
    <title> Foodstant Delivery </title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<figure>
<img id="del" src="images/delivery12.png" alt="Delivery" />
<img id="foo" src="images/foostant2.png" alt="Foodstant" />
<img id="chi" src="images/logochick.png" alt="Chick" />
</figure>

<nav id="hnavbar">
    <ul id="hli">
        <li><a id="home" href="index.html">Home</a></li>
        <li><a id="menu" href="menu.html">Menu</a></li>
        <li><a id="cu"   href="ContactUs.html">Contact Us</a></li>
        <li><a id="au"   href="aboutus.html">About Us</a></li>
        <li><a id="tc"   href="TC.html">Terms & Conditions</a></li>
        <li><a id="job"  href="jobs.html" target="_blank">Jobs</a></li>
        <li><a id="yo"   href="order.html">Your Order</a></li>
    </ul>   
</nav>

</body>

CSSコードは以下の通り

/* Foodstant Delivery */

* {
margin: 0;
padding:0;
  }
 body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");    
   }
   /* home page */
  #hnavbar{
font-size:2em;
margin-top:-13em;
}
  #hnavbar ul li {
    list-style-type:none;       
    width:325px;
    display:inline;
    padding:0 13px 0 13px; 
    }
  #chi {
position:relative;
top:-30em;
left:10em;
       }
  #foo {
position:relative;
top:1em;
left:-11em;
   }
  #del {
position:relative;
top:10.5em;
left:26em;
}
 /* home page */

よろしくお願いします。

4

2 に答える 2

0

'em' ではなく、パーセントで top と left の値を指定します。これらのパーセンテージは、これらの画像を含む親要素に対して相対的になります。または、3 つではなく 1 つの画像を使用し、画像マップを使用します。これを行うためのオンラインツールを次に示します。

http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/

于 2012-05-23T17:18:06.887 に答える
0

私は最近、これと非常によく似たことをしなければならず、しばらくして、すべてのリンクに絶対位置を使用する必要があると判断しました。コードの問題は、相対位置と絶対位置がどのように機能するかをよく理解していないように見えることです。絶対オブジェクトは常に、「相対位置」に設定されたより近い親に対して相対的です。したがって、これを試してください：

#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar
#home, #menu, ... { position: absolute; }

その後、上/左または下/右のプロパティを使用して、すべての絶対配置メニュー リンクの位置を設定する必要があります。

画像については、「Foodstant」と「Delivery」のリンクがない場合は、実際には 1 つの画像を使用します。

それが役に立てば幸い！

于 2012-05-23T17:12:40.537 に答える