• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • Last Modified:

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

hi

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
screen-buttons-required-to-inser.jpg
indexv4.html
0
tenriquez199
Asked:
tenriquez199
  • 2
  • 2
3 Solutions
 
Barry62Commented:
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

0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
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>
    </ul>

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.
0
 
tenriquez199Author Commented:
hi Barry62

excuseme

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

thanks a lot
0
 
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
menus-at-bottom.jpg
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
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 {
background-image:url('images/portadan.jpg');
}


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:
http://www.w3schools.com/Css/css_positioning.asp

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now