Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Centering my css links

Featured Replies

Hye i have just uploaded a site for a client www.edinburghguardianangels.com

 

My css links that are in red dont center, even though i have told them to in my css document. I am not sure why.

 

Can anyone help?

 

Thanks

 

Ps How does it display in your browser, i have tested it across all browsers and it displayed fine at home, however when i loaded it on my works computer it displayed quite strangely. I then hit the refresh button and it loaded fine. Not sure how this happened.

Which links that are are red, the one on the contact page?

 

If it is just the contact one, what you need to do is move the close of the <p> that ends here 7</p> and end it after your email addy.

 

 

Are your top links supposed to be cented as well as at the moment they aren't in FF3.

 

 

EDIT: I just noticed the ones on the school page as well, if you do the same thing as the contact they should work as well

  • Author

Hey Dizi

 

The top links are not supporsed to be centered. Its just the ones in red.

Moving the </p> tags as our spam queen has suggested should do the trick mate.

Oh you meant the red links, sorry mate when you pm'd me i thought you were on about the nav.

 

You need to wrap the text in p tags.

 

So like so

 

<p class="center_link"><a onclick="window.open(this.href); return false;" href="http://thehedgesguesthouse.com/index.htm">The Hedges Guesthouse website</a></p>

 

and then in your css add something like

 

p.center_link {text-align: center}

 

The text-align property applies to content within a block level element, <a> is an inline element (and a damn right shoddy tag).

 

I good rule of thumb is avoid using <a> tags alone, always try to nest them in some sort of structural element.

 

Read the bottom of this, it explains the principles pretty well http://www.ahuka.com/htmllevel1/blocklevel.html

As the text that the red links are associated with is centered as well it just makes sense to have them in with the already existing centered paragraph rather than making a new class and paragraph for it... But that is just my little opinion and also fits in with your "good rule of thumb is avoid using <a> tags alone, always try to nest them in some sort of structural element" thing :pp

 

So just moving the closing </p> tag to end after </a> instead of before the <a> it would work just as well...although in my opinion better as you are then associating the email addy with the other things in the paragraph as well.

 

Moving the </p> tags as our spam queen has suggested should do the trick mate.

 

 

See the spam queen can be helpful sometimes :pp

  • Author

Thanks Dizi and youre quite sure that will validate. Thats Why i originally took them out, i thought you were not allowed to have tags nesting in between tags, obviously iwas wrong. :D

yup I am very sure that you can have a link held within a paragraph tag and that it will validate :)

 

You can have tags nested between tags if you weren't you wouldn't be able to do much after all your <p> tags are nested between your <div> tags ... something you can't do, like having an <h1> (or any heading) tag inside an <a>, but you will learn quickly while validating what they are.

 

 

ohh and the reason why no <h1> inside <a> is because you are not suposed to put block elements inside inline elements just if you were wondering :)

But you can put inline elements within block elements.

 

So

 

<a href=#"><h1>Link</h1></a>

 

isn't allowed because h1 is a block element, it can't appear within an inline element

 

<h1><a href=#">Link</a></h1>

 

is allowed because <a> is an inline element inside the h1 which is a block

 

Some block elements can go inside other block elements depending on the hierarchy

 

You can nest multiple divs within each other, because a div is high up on the hierarchy.

 

However, right down near the bottom you have the P block element.

 

It can be used within higher level block elements such as divs, but it cannot be used within equal or lesser block elements on the hierarchy, so P cannot go within other P tags, or within lists.

 

Much like a list cannot go within a P tag, you must end the paragraph block and then start your list block.

 

And so on, you'll pick it all up..

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.