25 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Hi, I'm having trouble with a link on my page. it's the "top of the page" links. firstly, is <br /> the only way to get a space before and after the links? Secondly, the first "top of the page" link only work if you have your curser at the top of the link box. any ideas why and how I can sort it out?

http://www.subtleasafish.com/test/bta/members.html

the specific css is

/*link to top of the page*/    
li.top a {
    background-color: #ccc;
    color: #999;
    padding: 1px;
    margin: 20px;
    font-size: 0.8em;
    } 
    
li.top a:hover {
    color: #666;
    text-decoration: underline;
    }    

would apprecaite any help.

larmyia

ps oops went to validate and <br /> can't be used in <ul>....

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 14 years 33 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

formatting link

the code &nbsp; will add white space, they can be strung together too.

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

hrm. was wondering if that was the best solution Spectralizer

......... :?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

formatting link

<a> is by default an inline element. If you want it on its own line then you need to do something specific to achieve that.

preceding with <br /> will work.

assigning a {display:block;} and then some margin-top / padding-top will also achieve it.

placing it inside another block element, e.g. <p>, will work too.

looking at your page, you may want to try.

li.top a {display: block; margin: 1em 0; }

and in your print styles

li.top a {visibility:hidden}

[edit, fixed incorrect style specifiers :)]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

Hi larmyia ,
With admittedly just a brief glance;
Try working on the li.top{margin-top:5px;} rather than the anchor.

With the spans , anchors and .header-members things seem to be getting confused for the hover causing the problem on that one anchor,as spans are empty and meaningless it may be a better idea to set the section headings in an actual h# tag in the first li element at the beginning, loosing the spans and keeping the anchors separate in there own li .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

I am getting confused by everything. :?

however, I do have one question. where I've put an anchor on the top of the page, I orginally named as so:

<a name="top"></a>

now, am I correct in my thinking that in xhtml the use of "name" is going to be phased out and "id" should be used in its place?

also, if I'm using a strict doctype,

<a id="top"></a>

is incorrect as there is no data inbetween the tags. so, what is the correct code in this case?

larmyia

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

Rereading your post Hugo can I clarify this is what you mean would be better:

<li><address><#h4>Roland Klepzig</h4>
42 Copperfield Street, SE1 0DY
Phone: 020 7620 3005
Email: <a href="mailto:[email protected]">[email protected]</a>
Website: <a href="mailto:[email protected]">[email protected]</a></address></li>

<li class="top"><span><a href="#top">top of the page</a></span></li>

or do you mean start a new <ul> for the "top of the page" ??? and should I get rid of the "top of the page" span as I can style it using ..top ???

8-[

sorry for being such a pleb. I'm sure I'm making this so much more difficult than it should be.

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

I was thinking of the section headings really

<a href="#top">top of the page</a></span></li>     
	               
	          <li class="header-members"><a name="advertising"><span>ADVERTISING &amp; MARKETING &amp; PR:</span>


I just thought that the 'advertising and marketing' are titles/headings as such and should be reflected in an appropriate tag rather than a span and indeed you are probably using spans needlessly, try styling using descendent selectors and on the classes; also I noticed that for whatever reason the combination above is causing a problem for the hover class on that anchor so maybe separating the groups into new ul lists may make sense.

The 'name' attribute is deprecated so switch to using ID.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 6 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

formatting link

Maybe I'm missing the point here, but your "top of the page" shouldn't be a LIST item at all should it?

So couldn't you just do something like:
<a class="top" href="#top" title="Top Of Page">Top of Page</a>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

rmfred makes a valid point, overlooked by me, why is the anchor in a list and note that rmfred has also properly included the 'title' attribute.

I was going to mention earlier that you may consider not using so many of those 'return to' links; the page isn't that long and they do tend to clutter. one at the bottom and maybe one midway if the page grows longer should surfies, remember your covering something that is already provided for on the keyboard with 'page up' and 'Home' keys and plenty of people will actually use the scroll bar to navigate back. Although it may seem considerate from an accessibility point of view it may be overkill in reality as accessibility users are probably more likely to be used to using the keyboard 'Home' key.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 18 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

formatting link

larmyia

looking at the page, i don't think you need as many top of the page links, unless, as mentioned, the list will get very long. Even then you should only need to have one 'top of the page' showing on the page at any one time. It may also reduce clutter if you float it to the right as it will make it stand out.

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

ok. thanks everyone for the comments. fyi the page is massively long (hence so many top of page links). nevertheless I take the point about not needing so many.

I have started the page 3 times now and I think I'm getting muddled by a) trying to format it correctly, and b) the amount of information.

I'm trying to get this page finished quick sharp as we did it ages ago and the original is dreadful and I can't put it on my porfolio as is. however the company has been bought by a larger one and they are going to be incorporated into the larger site. therefore, I'm not being paid for this make-over, and it's only going to be "live" for another couple of months, and I want to finish it quickly so I can finally do our online portfolio and hopefully get some paid work.

with regards to formatting it correctly, I'm still muddling my way through some of the concepts. I take the point of the "top" link not needing to be in the list, and the headers needing to be in <h3>. So, should the addresses still be in <li>?

I don't know why I'm getting so muddled with all of this...

but thanks for the advice/comments

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

'Address' should be fine there.

Sorry to hear your not getting paid for this one and that it's only going to be live for a while sort of disheartening really putting the work in and knowing that the fruits of your labour are not going to be seen for long.

When it does go live, check to see if wayback.org manage to archive the page if they do you can use that link as a example in your portfolio.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 37 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

formatting link

Hugo, did you mean waybackmachine.org?

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

LOL I was wondering what some American kids site had to do with archiving. great link though - doesn't look like I'm making up websites at any rate!

ok...I have made some changes. I'm sure some aren't "correct" but give me your opinion.

http://www.subtleasafish.com/test/bta/members.html

one thing - can't seem to reduce the gap between <h5> and <p> in #address. nothing I tried seems to work...

and furthermore, it won't validate. why can't <h5> go where I've put it? is it because of the use of <address>? what's the best solution?

many thanks

larmyia

ps...the "top of the page" link is only there for a test run. I don't plan to put it there in the final version!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

wolfcry911 wrote:
Hugo, did you mean waybackmachine.org?


:oops: Indeed I did, having one of those sorts of mornings.
also linked to via this url:
waybackmachine

( I used the archive in a post fairly recently in the 'Geek news' forum to link to some pages no longer officially available without subscription )

There is also a Firefox extension that allows a right click search on any page your on to see if there is an archived copy in the waybackmachine archives.

Larmyia wrote:
doesn't look like I'm making up websites at any rate!

Exactly, thats the reason I mentioned it.

So where did I send you Smile I'll have to take a look.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

Hugo wrote:
So where did I send you Smile I'll have to take a look.
Hugo.

you really have to! I looking through it thinking: "there must be something here. Hugo wouldn't have sent me here for no reason. but I can't ask why...I'll look stupid. what's the point?"

Laughing out loud

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

Laughing out loud So sorry I can just imagine you scanning all the pages thinking " but there has to be a reason he just wouldn't have linked to it for nothing, it's an initiative test :idea: I can't stop now until I've found the dam thing"

But little did you realise that Hugo was actually loosing the plot and in a semi-deranged state Smile it's what comes of getting too little sleep although I was always led to believe that highly intelligent people with high brain power were able to function with as little as 2-3 hours a night, so I just fail to understand why I'm struggling so much and seem to need at least eight hours, it must mean that theorys a complete fallacy 8-[

See that you have done away with the lists all together then; fair enough, but I have to admit that I fail to see why it ain't valadating at the moment as I understood it 'address' can contain any html tag.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 37 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

formatting link

larmyia,
the <address> element (in strict mode) can only contain inline elements, so both the <h5> and the <p> are illegal. I would eliminate it altogether in your page.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting link

Hm, wolfcry911 is correct seems that in strict it can only contain inline elements so would agree that it's best to loose it altogether for what it actually achieves or of course you could remove the h5 outside of the tag and loose the P's and keep the breaks for your line breaks.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

I'm using transition though...not strict.

so, don't need the <p> then?

I didn't use <li> as it seemed superfluous. but it is a list isn't it? oh, I don't know............

and I can't seem to get enough space between the bottom of the "top of the page" link and the <h4>.

larmyia

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 37 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

formatting link

you can use <p> in transistional, but not the <hx>, but why use them at all if you're going to use the <address>? I'd use one or the other. A dl seems like a reasonable idea as well - while not definitions and terms, the data is related.

To answer the <a class="top"> question: add display:block; (and perhaps a width)

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

wolfcry911 wrote:
you can use <p> in transistional, but not the <hx>, but why use them at all if you're going to use the <address>?

ah, that explains why it said the <h5> was the problem. for some reason I thought I couldn't just have address alone. so, I guess put the <h5> outisde the <address> and take out <p> from inside <address>?

Quote:
I'd use one or the other. A dl seems like a reasonable idea as well - while not definitions and terms, the data is related.

dl???

sorry!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

formatting link

<dl> tag - similar to the <ul> tag, used for definitions:

<dl>
<dt> Definition Title </dt>
<dd> Definition definition</dd>
</dl>

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

wolfcry911 wrote:
To answer the <a class="top"> question: add display:block; (and perhaps a width)

ok, I did that and it worked, but I don't really understand why. could you please explain if possible...what does display:block; actually achieve?

however, (as usual) this has spawned a new prob. <h5> of the next address was too close to the <address> of the previous one, so I added padding-top: 20px; to <h5>. nevertheless, there is now a massive gap between <h4> and <h5> and I don't seem to be able to close it. any suggestions? nothing I've tried works.

I hope that makes sense. I just had a glass of wine... Shock

Smile

thanks

larmyia

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

formatting link

thepineapplehead wrote:
<dl> tag - similar to the <ul> tag, used for definitions

oh right. thanks tph. I wouldn't have thought it would be appropriate here...but I see wolfcry911's point.

larmyia

ps...tph like your new avatar! most appropriate =D>