1

これは私が助けを必要としているものです。何かアイデアはありますか?

http://i.stack.imgur.com/o2Kht.png

基本的に、これらのボタンを並べて表示したいと考えています。

コンテナに入れましたが、下の例のように並べることができません。

 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">  <!-- Linking Style Sheets -->
</head>

<body>

<style type="text/css">


<!-- Background image -->


</style>

 <div class="img-wrapper-center" id="titlebar">
    <img src="titlebar.png" id="img1"/>      
</div>
</div>  

<div id="bodycontainer">
<div id="text">
Welcome to the shop, you can add your items to to the cart below
</div>

<div id="formcontainer">
<div id="myForm">
    <form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)">
        <input type="radio" name="ram" value="yes">yes<br>
        <input type="radio" name="ram" value="no">no

        <br><br>
        <input type="radio" name="cpu" value="yes">yes<br>
        <input type="radio" name="cpu" value="no">no

        <br><br>
        <input type="radio" name="harddrive" value="yes">yes<br>
        <input type="radio" name="harddrive" value="no">no

        <br><br>

</div>

<div id="submitbuttons">
        <input type="submit" value="Submit">
        <input type="reset">
</div>
</div>

 </form>


 <div id="buttoncontainer">

 <div class="homebtn">
    <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>   
    </a>
     <div class="shopbtn">
    <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>  
    </a>
    </div>
</div>

</body>





 <!-- Start of rollover script -->

 <script>  
Rollimage = new Array()

Rollimage[0]= new Image(121,153)
Rollimage[0].src = "homebuttonup.png"

Rollimage[1] = new Image(121,153)
Rollimage[1].src = "homebutton.png"

function SwapOut() {
document.homebtn.src = Rollimage[1].src;
return true;
}

function SwapBack() {
document.homebtn.src = Rollimage[0].src;
return true;
}


Rollimageshop = new Array()

Rollimageshop[0]= new Image(121,153)
Rollimageshop[0].src = "shopbuttonup.png"

Rollimageshop[1] = new Image(121,153)
Rollimageshop[1].src = "shopbutton.png"

function SwapOutshop() {
document.shopbtn.src = Rollimageshop[1].src;
return true;
}

function SwapBackshop() {
document.shopbtn.src = Rollimageshop[0].src;
return true;
}


</script>
 <!-- end of rollover script -->

 <!-- Start of form validation -->

 <script>

function checkWholeForm(theForm) {
    var reason = ''; 
    reason += checkRadioButtons(theForm.ram); 

    if (reason != '') {  
       alert(reason);
       return false;
    }
    return true;
}


function checkRadioButtons(radiobuttons) {
    var checkvalue = "";
    var i=0;
    var error = "";
    var amountOfRadioButtons = radiobuttons.length; 
    for (i=0; i<amountOfRadioButtons; i++) { 
       if (radiobuttons[i].checked) {
            checkvalue = theForm.ram[i].value;  
       } 
    }
    if (!(checkvalue)) { 
       error = "Please choose an option for RAM.\n"
   }
    return error;
}





 </script>

 <!-- End of form validation -->

遅れて申し訳ありませんが、rofl はこれにコードを追加するのが初めてなので、識別する方法がわかりませんでした。

4

3 に答える 3

1
.homebtn, .shopbtn{
    display:inline; /*or inline-block*/
}
于 2012-12-31T22:13:58.593 に答える
0

私はあなたの画像にアクセスできないので、ここでグーグル画像検索からの画像を使用してjsfiddleを作成しましたが、cssはあなた自身の使用のために非常に似ているはずです。

ボタンコンテナのhtmlも修正する必要があります

<div id="buttoncontainer">
  <div class="homebtn">
    <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()">
      <img name="homebtn" src="homebuttonup.png"/>   
    </a>
  </div>
  <div class="shopbtn">
    <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()">
      <img name="shopbtn" src="shopbuttonup.png"/>  
    </a>
  </div>
</div>

現在、一方のボタンがもう一方のボタンの中にネストされています。

于 2012-12-31T22:40:09.713 に答える
0

あなたのコードを見て、改善できるいくつかの領域を見つけることができます。

まず、ボタンのロールオーバーを処理するために JavaScript を使用しています。これを行う特別な理由がない限り、これは必要ありません。これを行うより効率的な方法は、ボタンのロールオーバーに純粋な CSS を使用することです。

次に、リンク自体に画像が埋め込まれています。

<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>   
</a>

実際に CSS ベースのナビゲーションを使用する場合は、これを行う必要はありません。利点は、コードが少なくて済み、最終的にはページ サイズと読み込み時間です。すべての画像の読み込みは、サーバーへの個別の HTTP リクエストであることに注意してください。これは、長期的にはより多くの帯域幅に相当します。あなたのウェブサイトはこの種の影響を受けないかもしれませんが、良い習慣です。ベストプラクティス。

ナビゲーションにどのようにアプローチするかを示すために、JSFiddle を作成しました。もう 1 つ追加したいのは、すべてのナビゲーション画像をスプライトに入れることです。

http://jsfiddle.net/cbPRv/

于 2012-12-31T22:48:22.593 に答える