Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    need to position text top right side of page

    Hello

    I have 2 phone numbers on the top right side of my website. This is posted as an image, so mobile devices do not recognize them as a phone number. I want to make them a text so people can tap on the phone numbers and place a call.
    I know I probably have to create a couple of divs and position them, but I have no idea what I am doing and cant get it right.
    Here is how I want it to look:
    i.imgur.com/6h1GTuH.png
    It is very important for the 2 phone numbers to be aligned exactly under each other, so all that space between "LOCAL" and "661" will need to be retained. please help me.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by joejohn View Post
    It is very important for the 2 phone numbers to be aligned exactly under each other, so all that space between "LOCAL" and "661" will need to be retained. please help me.
    HTML:
    Code:
    <address>
    	<table>
    		<tr>
    			<th>Toll Free</th>
    			<td>800‒447‒8982</td>
    		</tr>
    		<tr>
    			<th>Local</th>
    			<td>661‒592‒0347</td>
    		</tr>
    	</table>
    </address>
    CSS:
    Code:
    address, th { font: inherit; }
    th { text-align: left; text-transform: uppercase; }
    th::after { content: ":"; }
    Last edited by Arbitrator; 07-28-2013 at 01:33 AM. Reason: I altered the code to use more semantic markup.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    joejohn (07-28-2013)

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    HTML:
    Code:
    <address>
    	<table>
    		<tr>
    			<th>Toll Free</th>
    			<td>800‒447‒8982</td>
    		</tr>
    		<tr>
    			<th>Local</th>
    			<td>661‒592‒0347</td>
    		</tr>
    	</table>
    </address>
    CSS:
    Code:
    address, th { font: inherit; }
    th { text-align: left; text-transform: uppercase; }
    th::after { content: ":"; }
    This almost works. But there are some problems: There are borders around the cells. There should be no visible borders. I tried <table border:"0"> and I also tried something with collapse, but neither worked.
    Another problem is there is too much vertical distance between the 2 numbers. They should be closer together vertically.
    I would also love to add a line after the 2 numbers that says "Available 24 hours a day"
    Thanks so much.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by joejohn View Post
    This almost works. But there are some problems: There are borders around the cells. There should be no visible borders. I tried <table border:"0"> and I also tried something with collapse, but neither worked.
    To remove borders, use border: none in a CSS style sheet. If you insist on using presentational attributes, style="border: none;" will also work, however.

    You can remove border space—the space between cells, which defaults to two pixels in every browser, if I'm not mistaken—with either border-spacing: 0 or by changing the table border model via border-collapse: collapse. Both properties have to be applied to the entire table.

    Quote Originally Posted by joejohn View Post
    Another problem is there is too much vertical distance between the 2 numbers. They should be closer together vertically.
    Try adjusting the line-height or padding properties. For example:

    Code:
    th, td { padding: 0; line-height: 1; } /* or */
    address th, address td { padding: 0; line-height: 1; }
    Quote Originally Posted by joejohn View Post
    I would also love to add a line after the 2 numbers that says "Available 24 hours a day"
    Add a p (paragraph) element with the text after the table element, but still inside of the address element.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    joejohn (07-29-2013)

  • #5
    New Coder
    Join Date
    Apr 2013
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    that last line that says "available 24 hours a day" will not occupy one line.
    instead of
    "Available 24 hours a day" it says
    "Available 24
    hours a day"
    it occupies 2 lines.


    update: alright, I got this....almost.
    I think the reason "available 24 hours a day" keeps going to the next line is because of the following code:
    #header .fl_right p{float:left; margin:1px 100px 0 0;}

    can I safely decrease the 100px to like 20px? or would that cause issues? or it depends?

    The table borders: I managed to get rid of almost all the cell borders. the only problem is there are 2 unnecessary vertical lines.
    Here is a screenshot:
    i.imgur.com/3KDAgIN.png
    Last edited by joejohn; 07-29-2013 at 08:31 PM.

  • #6
    New Coder
    Join Date
    Apr 2013
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi guys

    I almost got this. Everything looks great. Except! There is another place in my website that has the < address > html tag.
    So the font size and font color in that part of the website has changed.

    I need to get rid of the address tag in the solution given here. How can I do that?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by joejohn View Post
    that last line that says "available 24 hours a day" will not occupy one line.
    instead of
    "Available 24 hours a day" it says
    "Available 24
    hours a day"
    it occupies 2 lines.


    update: alright, I got this....almost.
    I think the reason "available 24 hours a day" keeps going to the next line is because of the following code:
    #header .fl_right p{float:left; margin:1px 100px 0 0;}

    can I safely decrease the 100px to like 20px? or would that cause issues? or it depends?
    Without seeing the rest of your code, I have no good way to troubleshoot this. float: left or margin-right: 100px are presumably causing the text to wrap.

    I'm not sure why you would want to float the p element in the first place; presumably, you'd want to position the container element (address) instead.

    Quote Originally Posted by joejohn View Post
    I almost got this. Everything looks great. Except! There is another place in my website that has the < address > html tag.
    So the font size and font color in that part of the website has changed.

    I need to get rid of the address tag in the solution given here. How can I do that?
    You don't need to get rid of the address element. Just give it an ID and use that to limit the scope of your CSS so nothing else on the page gets affected by your new styles:

    Code:
    #phone_numbers { font: inherit; }
    #phone_numbers table { border-spacing: 0; }
    #phone_numbers table, #phone_numbers th, #phone_numbers td { border: none; }
    #phone_numbers th { text-align: left; text-transform: uppercase; font: inherit; }
    #phone_numbers th::after { content: ":"; }
    #phone_numbers p { margin: 0; }
    Code:
    <address id="phone_numbers">
    	<table>
    		<tbody>
    			<tr>
    				<th>Toll Free</th>
    				<td>800‒447‒8982</td>
    			</tr>
    			<tr>
    				<th>Local</th>
    				<td>661‒592‒0347</td>
    			</tr>
    		</tbody>
    	</table>
    	<p>Available 24 hours a day.</p>
    </address>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •