HTML5 Page Layour

Hi Experts,

Appologies if this is a simple question but a newbiew here:-

I have a webpage (attached) from a template. I am trying to format the contact Page so i can have:

Contact Information:-

Telephone:
UK - 01234 567890,
UAE - 01234 567890
USA - 01234 567890

Email:  
Information - info@test.com
sales - info@test.com
 
UK Head Office:
Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD

UAE Head Office:
Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD

USA Head Office:
Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD

But i just cant figureout how to format it right, it goes all over the place.

Anybody able to Help?

Cheers
TME
Test.zip
LVL 1
TrustGroup-UAEAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Seperate each row and use rowspan for section heading e.g.
<tr>
<td rowspan="3">Telephone:</td>
<td>UK: 01234 567890</td>
</tr>
<tr>
<td>UAE: 01234 567890</td>
</tr>
<tr>
<td>USA: 01234 567890</td>
</tr>

Open in new window


Follow the same logic for the rest, but you shouldn't be using tables for this.
0
TrustGroup-UAEAuthor Commented:
Hi Gary,

Thanks for you response:)

I have now modified as per your suggestion but it now shows like:-

Telephone: UK: 01234
                            567890
                    UAE: 01234
                            567890
                    USA: 01234
                            567890

I would like the Number to be on the same line (As apposed to spanning 2 Lines) and display like:

Telephone:   UK: 01234 567890
                     UAE: 01234 567890
                     USA: 01234  567890
 
Many Thanks for any Help in Advance.

Cheers
TME
0
GaryCommented:
					<table border='0' style="width:100%">
						<tr>
							<td rowspan="3">Telephone:</td>
							<td>UK: 01234 567890</td></tr>
                            <tr><td>UAE: 01234 567890</td></tr>
                            <tr><td>USA: 01234 567890</td></tr>
						<tr>
							<td>Email: </td>
							<td>info@gbs-europe.com</td>
						</tr>
						<tr>
							<td>UK Head Office:</td>
							<td>Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD</td>
							</tr>
                            <tr><td>UAE Head Office:</td>
							<td>Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD</td>
							</tr>
                            <tr><td>USA Head Office:</td>
							<td>Street 1, Road 1, A Town, Manchester, Englerland, AB12 3CD</td>
						</tr>
					</table>

Open in new window

0
TrustGroup-UAEAuthor Commented:
Hi Gary,

Many Thanks for your continued support.

Its looking much better now! Only problem now is, there is a space between all the phone numbers:-

Telephone:              UK: 01234 567890
                       
                               UAE: 01234 567890

                               USA: 01234 567890

How can i get it to align like:-

Telephone:              UK: 01234 567890
                               UAE: 01234 567890
                               USA: 01234 567890

Cheers Again
TME
0
GaryCommented:
Because you have this
.contact-sidebar td {
    height: 45px; // << this
    width: 110px;
}

Open in new window


If you remove the height and want space between each section then add an empty row between them
   <tr><td>&nbsp;</td></tr>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.