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