并排图像没有间隙?

时间:2012-12-31 22:11:37

标签: html css image button space

This is what i need help with, any ideas?

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我刚刚为此添加代码,所以我不知道如何识别它。

3 个答案:

答案 0 :(得分:1)

.homebtn, .shopbtn{
    display:inline; /*or inline-block*/
}

答案 1 :(得分:0)

我使用谷歌图片搜索中的图片制作了jsfiddle here,因为我无权访问您的图片,但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>

您目前有一个嵌套在另一个内部的按钮。

答案 2 :(得分: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/