...

View Full Version : Correct this pagination display disarrangement.



hernantz
09-06-2010, 06:54 PM
Hi all.
I get this disarrangement on the pagination links.
all elements that are not links end bugged (.GenericList ul li ).

Any idea of how to fix it?


http://img824.imageshack.us/img824/5922/pagination.png (http://img824.imageshack.us/i/pagination.png/)


http://img718.imageshack.us/img718/8638/pagination2.png (http://img718.imageshack.us/i/pagination2.png/)


.GenericList ul {
margin: 0px;
padding: 0px;
list-style: none;
}

.GenericList ul li {
list-style: none;
float: left;
font-size: 14px;
}

.GenericList li a {
padding: 3px 8px;
display: block;
color: #000000;
text-decoration: none;
}

.GenericList li a.selected {
font-weight: bold;
}

.GenericList li a:hover {
background-color: #F4F4F4;
}

Thanks in advance

Doctor_Varney
09-06-2010, 07:25 PM
Hmmm... this isn't quite how I'd code it. I wouldn't normally include the a: attributes in the .GenericList rule. I normally set up my list then add the link attributes as a seperate set of rules, like this:




a:link {
color: #000000;
text-decoration: none
}

a:visited {
color: #000
text-decoration: none
}

a:hover {
background-color: #F4F4F4;
text-decoration: underline
}

a:active {
font-weight: bold;
text-decoration: none
}

(Example)



The links will inherit the formatting from the list, so I do not believe in adding padding etc to links. Just the superficial effects (underline/bold/color, etc) I want to see when hovered over and activated, etc. The 'psuedo-classes', as I believe they're called.

I don't know if this will help but certainly, I think this is a good start as there seems to be a lot wrong with that code. Then we can see if the 'disarrangement' still occurs.

And, AFAIK (it's been a while since I checked) the link behaviours should be coded in the order I have shown. You'll have to double-check with the W3C (http://www.w3schools.com/CSS/css_pseudo_classes.asp).

Dr. V

abduraooft
09-07-2010, 10:27 AM
You'll have to double-check with the W3C.
FYI: W3Schools is not a part of W3C.

Doctor_Varney
09-07-2010, 10:49 AM
That's rather deceptive. How do you know this? I can't find anything on their site that says anything about that, either way. The 'about' page is full of adverts.

Dr. V

abduraooft
09-07-2010, 11:04 AM
I can't find anything on their site that says anything about that, either way. I think it was there somewhere, but can't locate it now.

Here's some external info
http://www.whois.net/whois/w3schools.com
http://www.whois.net/whois/w3.org
http://answers.yahoo.com/question/index?qid=20070927144110AAYkviZ


The 'about' page is full of adverts Don't you have "Adblock plus" to block any unwanted stuffs from any site? :)

Doctor_Varney
09-07-2010, 12:43 PM
Don't you have "Adblock plus" to block any unwanted stuffs from any site? :)

No, I have this TV wall bracket ad that keeps following me around. I only went to the site once. This can't be good for business because when people pull stunts like this, I feel less inclined to buy from them. I'm sure it must go for many others, too.

Anyway, thanks for that. I'm quite fussy about quoting my sources... I did my own search; couldn't find anything.

Since the dawn of this bloody 'information age', I have felt like I am surrounded by deceivers...

Do we know anything about the validity of those training certificates they are selling? And the validator... I wonder who that belongs to.

Dr. V

abduraooft
09-07-2010, 01:25 PM
And the validator... I wonder who that belongs to.http://validator.w3.org/ is obviously a part of W3C

Doctor_Varney
09-07-2010, 02:58 PM
http://advancedsearch.virginmedia.com/skins/virgin/images/icon_message.gif Sorry! We could not find validator

It may be unavailable or may not exist. Try using the suggestions or related links below, or search again using our web search.

But yeah, I see. That's okay then. :thumbsup: Thanks

Dr. V

hernantz
09-07-2010, 06:38 PM
Hmmm... this isn't quite how I'd code it. I wouldn't normally include the a: attributes in the .GenericList rule. I normally set up my list then add the link attributes as a seperate set of rules, like this:




a:link {
color: #000000;
text-decoration: none
}

a:visited {
color: #000
text-decoration: none
}

a:hover {
background-color: #F4F4F4;
text-decoration: underline
}

a:active {
font-weight: bold;
text-decoration: none
}

(Example)



The links will inherit the formatting from the list, so I do not believe in adding padding etc to links. Just the superficial effects (underline/bold/color, etc) I want to see when hovered over and activated, etc. The 'psuedo-classes', as I believe they're called.

I don't know if this will help but certainly, I think this is a good start as there seems to be a lot wrong with that code. Then we can see if the 'disarrangement' still occurs.

And, AFAIK (it's been a while since I checked) the link behaviours should be coded in the order I have shown. You'll have to double-check with the W3C (http://www.w3schools.com/CSS/css_pseudo_classes.asp).

Dr. V

Hi Dr. V

That would change all links over the site, and i only want to get the pagination links styled that way.

The CSS is this way now. Got the listed elements aligned, but those who are not a link are still getting the background colored, and i only want to get links with background.


.GenericList ul {
margin: 0px;
padding: 0px;
list-style: none;
}

.GenericList ul li {
list-style: none;
float: left;
padding: 3px 8px;
font-size: 14px;
}

.GenericList ul li:hover{
background-color: #F4F4F4;
}

.GenericList li a{
display: block;
color: #000000;
text-decoration: none;
}

Doctor_Varney
09-07-2010, 08:42 PM
Fair enough, but I've never seen links coded like that before and I think it's probably wrong. Use the correct psuedo-classes and put them in the order I've shown and it should work. I assume you can seperate them from the rest of the page by class.

Dr. V

bazz
09-07-2010, 11:00 PM
Fair enough, but I've never seen links coded like that before and I think it's probably wrong.

nope, just a difference use of css for a different purpose, imv.

styling them like described by Dr V, they are generic styles for all links on the site. doing it the other way, as shown by hernantz, allows for different styles for the links in differing scenarios.

@hernantz: the background that you don't want to have shown, must be coming in from another css attribute/element. (I can never recall which is which). Try to find what css is providing it and see if you need to tighten up on it by adding a div id or something. otherwise just tell the link not to have a background.

best to try my first suggestion so as not to have this occur elsewhere in the site and cause you to have to add 'patches' to your css.

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum