Playing with html for the first time, button problem

[tinpanalley]

As the title suggests, I'm just now (rather successfully) starting to play with and learn html. I don't want to rely on others anymore even they are friends. I want to learn myself the way I taught myself other applications. Sorry if this question is too basic.

 

Here's the button thing I'm stumped with...I have the image of a streetpost with two street name signs on them and I want each one to be buttons to facebook and twitter. That's it. But I need them to look like one pole. I made the one image and cut it in half so the top and bottom could be linked to two buttons. But everything I do right now comes out with the two sections separated by empty space in between. Does any of this make sense and can you help me?

 

Thanks!

[jeffman]

Can you show the relevant HTML and CSS? There are several ways this can go right, and a lot more ways it can go wrong. Probably, the elements are still displayed inline, so they behave like letters with spaces between them. I sure hope you're not using a <br> element between them.

[tinpanalley]

Well, I deleted the work I had done because it wasn't looking the way I wanted. I'd have to figure out what I did before. I just don't have a base from which to know how to even ask the question so I thought itmight be a simple thing to take an image and break different sections of it into different buttons.

[jeffman]

Assuming I've pictured your idea clearly, I would do it like this. I'd want the two images to behave as a unit, so that other content could be placed next to it. So I'd put them both in a div, and limit the dimensions of the div to the exact dimensions of the combined images. Set the display property of the images to block so that one falls below the other, and also so that there is no gap between them. If the images are embedded in <a> elements, they should display as blocks also.

 

HTML

<div id="buttons">    <a href="destination1"><img src="flag1.jpg"></a>    <a href="destination2"><img src="flag2.jpg"></a></div>

CSS

#buttons {    height: 256px;    width: 128px;}#buttons a {    display: block;}#buttons img {    display: block;}

If you need to display content to the side of the images, apply the float property.

[davej]

You should figure out why you can't get images to sit next to each other...

 

http://www.w3schools.com/css/css_boxmodel.asp

 

...but in this situation you can easily apply a map to a single image.

 

http://www.w3schools.com/tags/tag_map.asp

[tinpanalley]

Thanks guys. I'm gonna look at everything you're telling me. I'm DETERMINED to figure this out. I'm sure it's something real simple.EDIT: Question... is there a reason why someone would use a map instead of a div for this?

Edited July 4, 2013 by tinpanalley

[tinpanalley]

You guys wont believe this but I actually made it happen. I followed Deirdre's Dad's advice and got it to work.

What I did...

- My buddy who made the page had created a table for three other text links on my site. The last cell was the image of the one streetsign.

- I removed that last cell, ended the table after the last text link, and just added the streetsign after the table in the same "buttons" div that already existed

- Then I created a copy of that same streetsign link and saw them both work, replaced both with the "spliced" artwork I had created for the top and bottom signs on the pole and linked each where they needed to go.

- The two images at first sat side by side, so I went into the style sheet and noticed my friend hadn't given it a width so I gave it a width that would force the second image down to a new line.

Done! You don't know how accomplished I feel right now. What a geek.

 

I have no idea if the html on the rest of the page looks good but this works perfectly. Thank you all!!!