wich is the best practice to insert a button in a html with background image


i have a html file
i'm  making an html site.

could you help me to select the best practice to insert  buttons  faceboook, twiiter, and menu's options

thanks a lot
Who is Participating?
RartemassService Desk AnalystCommented:
The issue is that you have the image specified and the flow of the page continues beyond that. You have several options. I will list them in the preferred order.

1) If you intend the image to be the background, remove the <img src=...> line and style the body to have it as the background.

So the CSS would be

body {

2) You can use z-index to position them. Z-index only works on elements that have the position property in CSS. This explains the process:

If after reading this you need some assistance, please ask.

3) Reposition the image in your html so it is after the menu. This however will result in the menu being above the image. If you want them overlapping you need one of the above options.
First of all, your html link doesn't work.

OK, it's really simple.  I'll show you the basic code.  Since I can't currently see your html I won't be able to format it the way you want, but here is the basics:

<a href="inicio.htm"><img src="yourimagedirectory/iniciobutton.jpg"></a>
<a href="proyecto.htm"><img src="yourimagedirectory/proyectobutton.jpg"></a>
<a href="contacto.htm"><img src="yourimagedirectory/contactobutton.jpg"></a>

Open in new window

RartemassService Desk AnalystCommented:
For me the best practice is to create the link in HTML (<a href ="link.html">) then style the link so it looks like a button in CSS.

For example, the html could be:
<div class="menu">
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>

Then the CSS could be:
.menu {
      float: left;
      width: 20%;
      background-color: #FFF;
      padding-right: 10px;

ul.nav li {
      border-bottom: 1px solid #666;
      color: #FFF;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
      padding: 5px 5px 5px 15px;
      display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
      text-decoration: none;
      color: #000;
      background-color: #FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
      color: #FFF;
      background-color: #900;

For the facebook and other social media icons, you can use sharethis.com (http://sharethis.com/publishers/get-sharing-tools). It has multiple styles and is easy to add to your code.
tenriquez199Author Commented:
hi Barry62


the link is www.terrazasixmiquilpan.com.mx/indexv4.html

thanks a lot
tenriquez199Author Commented:
hi Rartemass

thanks a lot

i did a test with you recommend to me, but that menu is shoed at bottom

could you help me to set it within image background?

thanks a lot
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.