CODEWITHSUNDEEP
htmlcssimagebuttonspace
Ryan Conway
Ryan Conway

Reputation: 125

Side by side images with no gap?

This is what i need help with, any ideas?

https://i.sstatic.net/o2Kht.png

Basically I want these buttons to be side by side.

I've put them in a container but I cannot get them side by side like the example below.

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

Sorry for delay, rofl im new to adding code to this so i did not know how to ident it.

Upvotes: 1

Views: 528

Answers (3)

Ron L
Ron L

Reputation: 45

Looking at your code, I can spot a few areas that can be improved.

First, you're using JavaScript to handle the button rollovers. Unless there is a specific reason to be doing this, it isn't necessary. A more efficient way to do this would be to use pure CSS for the button rollovers.

Second, you have the images embedded in the link itself:

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

If you were to actually use CSS based navigation, you wouldn't need to do this. The benefit is less code and ultimately page size and load time. Keep in mind, every image loading is a separate HTTP Request to the server. This equals more bandwidth in the long run. Your website may not be effected by this type of stuff, but it's good practice; best practices.

I have created a JSFiddle to show you how I would approach your navigation. One other thing I would add is putting all of the navigation imagery into a Sprite.

http://jsfiddle.net/cbPRv/

Upvotes: 0

Zack
Zack

Reputation: 2869

I made a jsfiddle here using images from google image search because I don't have access to your images, but the css should be quite similar for your own uses.

You should also fix your html for the button container

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

You currently have one button nested inside of the other.

Upvotes: 0

mbinette
mbinette

Reputation: 5094

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

Upvotes: 1

Related Questions