1 reply [Last post]
georgeadams
georgeadams's picture
Offline
newbie
London
Last seen: 8 years 2 weeks ago
London
Joined: 2013-10-20
Posts: 3
Points: 5

Hi all

I'm a novice at designing websites but trying to add some contact details on my homepage.

Ideally I'm trying to achieve the layout you can see in this posts attached image.

I'm struggling to:

1. Get vertical text alignment
2. Add space between the name, email, number
3. Add a line underneath the name which isn't the default underline

I've attached the current html and css code.

Any help would be much appreciated!

Thanks
George

AttachmentSize
Screen Shot 2013-10-20 at 15.16.44.png20.12 KB
Screen Shot 2013-10-20 at 15.24.28.png11.43 KB
Screen Shot 2013-10-20 at 15.25.51.png14.12 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi georgeadams, Vertical text

Hi georgeadams,
Vertical text alignment try playing with line-height
For the space between you might want to change the markup to something like.

<h1><span>George Adama</span><span>hello@...</span><span>+44...</span></h1> 

It would be much easier to space the spans then.

The markup may make more sense as an unordered list, but that is another issue.

The underline should be easy to fix if you use firebug or one of the browser inbuilt CSS debugging tools, or provide a link to a working example Smile