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 -->

抱歉耽搁了，我是新手，所以我不知道如何识别它。

4

3 回答 3

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

查看您的代码，我可以发现一些可以改进的地方。

首先，您使用 JavaScript 来处理按钮翻转。除非有特定的理由这样做，否则没有必要。一种更有效的方法是使用纯 CSS 进行按钮翻转。

其次，您将图像嵌入到链接本身中：

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

如果您要实际使用基于 CSS 的导航，则不需要这样做。好处是更少的代码以及最终的页面大小和加载时间。请记住，每次图像加载都是对服务器的单独 HTTP 请求。从长远来看，这等于更多的带宽。您的网站可能不受此类东西的影响，但这是一种很好的做法；最佳实践。

我创建了一个 JSFiddle 来向您展示我将如何处理您的导航。我要添加的另一件事是将所有导航图像放入 Sprite。

http://jsfiddle.net/cbPRv/

于 2012-12-31T22:48:22.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 回答