沒有間隙的並排圖像？

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即時通訊新增加的代碼，所以我不知道如何識別它。

來源

2012-12-31 Ryan Conway

很高興您提供的問題，你想要什麼的截圖，但在未來，請在郵件的問題，所以我們可以複製/粘貼與它的工作相關的代碼。 http://jsbin.com/和http://jsfiddle.net/也很適合創建示例。 – sachleen

爲什麼shopbtn在homebtn – sachleen

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

來源

2012-12-31 22:13:58 mbinette

內工作正常，但是在這種方式下是一個下劃線的東西？ http://i.imgur.com/87r3j.jpg –

@RyanConway使圖像浮動在其容器內。 – sachleen

你確定這不只是一個空間嗎？嘗試在'.homebtn，.shopbtn'塊中添加'float：left;'並且如果下劃線消失，那就是一個空格。 – mbinette

我做了一個使用圖像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>

您目前有嵌套在另一個裏面一個按鈕。

來源

2012-12-31 22:40:09 Zack

看着你的代碼，我可以發現一些可以改進的地方。

首先，您正在使用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-31 22:48:22

沒有間隙的並排圖像？

回答

相關問題