1

How do I put the address on the same line as "contact me on:" ? I also want one space between them. I was thinking of using float, nut isn't that overkill? 

<p>Contact me on: 
<address> 
<a href="mailto:me@gmail.com"> 
me@gmail.com
</address>
</a>
</p>

http://jsfiddle.net/tY9nS/

Thanks in advance

Bosiwow
  • 2,025
  • 3
  • 28
  • 46

3 Answers3

7

Change your html as like this ' 

<address> 
<p>Contact me on: <a href="mailto:me@gmail.com"> 
me@gmail.com</a></p>
   </address>

Don't** put the address tag in p tag put the p tag into address tag

demo

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • Surely the whole point of this question is to get them on the same line without moving `contact me on:` into `
    `.
     – Ruddy Apr 16 '14 at 09:19
  • +5 for moving `HTML` yay! xD – Ruddy Apr 16 '14 at 09:27
  • 2
    The thing is not about moving HTML, but understanding why this HTML part wasn't standard and clean, and that's why he had trouble. You can't put an address element in a p element. Furthermore, the anchor was open in the address element and closed after. – enguerranws Apr 16 '14 at 09:30
  • You can surely put

    and

    a display: inline; but that would have been dirty.
     – enguerranws Apr 16 '14 at 09:32
  • I understood you still making websites as in 1999. – enguerranws Apr 16 '14 at 09:39
2

I'm not 100% sure why this is, but browsers don't allow an address tag in a p tag.

You can make this work, but you'll need to remove the p { width:100%}. The since browsers are setting the address and p tag one after the other, your p tag will consume 100% of the width, thus no more room for the address.

Change the styles to : p,address{ display:inline-block;} and it will work just fine

Thor
  • 291
  • 2
  • 8
-2

Another simple way would be to format it in a table like this:

<table>
<tr>
<td>Contact me on:</td>
<td><a href="mailto:me@gmail.com">me@gmail.com</a></td>
</tr>
</table>

Otherwise there's the more complicated options where you go into layout using div elements that you can find here: http://www.w3schools.com/html/html_layout.asp

Ruddy
  • 9,795
  • 5
  • 45
  • 66
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
  • @wf4 Sorry whats wrong with this? This is a perfectly fine way to display information. – Ruddy Apr 16 '14 at 09:30
  • @Mr_Green The question was `How do I put the address on the same line as "contact me on:" ?` and this is a viable option. – Ruddy Apr 16 '14 at 09:31
  • @Ruddy not at all comparable to the above suggestion given by Rohit.. we can do this but think whether is it good or ok atleast? – Mr_Green Apr 16 '14 at 09:32
  • Use for tabular information, not for layout purpose guys... Flagged.
     – enguerranws Apr 16 '14 at 09:33
  • @Mr_Green I see no problem with it. When I ask a question I want as many ways to solve it at possible that way I can pick one that I understand and also is compatible with my layout etc. – Ruddy Apr 16 '14 at 09:33
  • @enguerranws Did you really flag this? It is displaying information and is also not being used as a layout. – Ruddy Apr 16 '14 at 09:34
  • This is not a solution, this is just a way to get more problems. Dirty html code will never solve anything. – enguerranws Apr 16 '14 at 09:35
  • @enguerranws Tables are not dirty at all, you clearly just don't know how to use them if you see a major problem here. – Ruddy Apr 16 '14 at 09:35
  • element should be used to display tabular information like : Email | mail@mail.com | Phone | 12451241 | Name | Joe – enguerranws Apr 16 '14 at 09:35
  • @enguerranws Oh dear. – Ruddy Apr 16 '14 at 09:36
  • @Ruddy we suggest better for asker/OP here. that is why upvoting/downvoting is here on SO. it is not to hurt others feelings. – Mr_Green Apr 16 '14 at 09:37
  • Ok good sir, go read some web books or this : http://www.w3.org/TR/html401/struct/tables.html#h-11.1 – enguerranws Apr 16 '14 at 09:37
  • @Mr_Green We suggest what we think is best, in this case this poster has gone with a table. Again there is nothing wrong with using this, yes its a little untidy and I wouldn't use it but is still a viable option. Its up to the OP to decide what they would like to use and by the looks of it they have done with fixing the `HTML`. And so I don't have to write another comment. @enguerranws You are talking about using it as a layout, this is **not** a layout. I would guess they have more information after the address, so I see no problem here. Again I wouldn't personally use it. – Ruddy Apr 16 '14 at 09:41
  • @Ruddy sorry, I thought this is not good. so, downvoted it :). btw, man, such a big comment? please cool down. :). to be frank, I am not a serial downvoter. I do when I don't like any post/suggestion. – Mr_Green Apr 16 '14 at 09:48
  • @Mr_Green I'm not saying any of this because you down-voted, and I fail to see why a big comment means that I need to "cool down". You can down-vote whenever you want, I'm not here to stop you. – Ruddy Apr 16 '14 at 09:55
  • You can read all the pros and cons in the debate here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1 My answer may not be the "best" answer, but it's an answer that'll work in this situation to get the job done. – Barry Michael Doyle Apr 16 '14 at 13:00