[SOLVED] My page numbers are falling off of my website!!

[62vye]

Hello,

I would like to have a go at sorting out a problem on my website

http://www.letsrent2me.com/list_properties.php

All of the old pages for my website are being cut off at the edge and they need re-arranging.

I don't really want to use a web designer and would like to have a go myself, does anyone know if this is achievable and if so what would be involved.

I don't know much about web design but would like to learn by doing a few little jobs myself appreciate any help which you could give me, thks

[saltedm8]

moved to css forum

[Aso]

Are you aware of CSS?

In your CSS folder there's a file called basic.css. You need to find the line

Code: Select all

.viewpageslinksbar{background:#A0CFFD;border-bottom:1px solid #4489AA;border-top:1px solid #72B3D1;margin-bottom:4px;}

and add width: 532px so you end up with

Code: Select all

.viewpageslinksbar{background:#A0CFFD;border-bottom:1px solid #4489AA;border-top:1px solid #72B3D1;margin-bottom:4px;width:532px}

Save the file and refresh your website - if it's not fixed let us know

[62vye]

Thanks a lot I will try that and let you know how I got on, really greatful to you for all your help.

[62vye]

Hello again

I have managed to locate the basic css file which you mentioned and found the line which you quoted, currently it reads;

.viewpageslinksbar{background:#A0CFFD;border-bottom:1px solid #4489AA;border-top:1px solid #72B3D1;margin-bottom:4px;}

I just wanted to confirm with you before I change it, do i get rid of -bottom:4px;} and type width: 532px and also do i need to close it with the
;}

Thanks

[saltedm8]

aso has said

replace it all with this

Code: Select all

.viewpageslinksbar{background:#A0CFFD;border-bottom:1px solid #4489AA;border-top:1px solid #72B3D1;margin-bottom:4px;width:532px}

[62vye]

I'm sorry... misunderstood I could only see the first part of the code in my browser but have now highlighted the whole code and will paste it in, thks once again for your help

[62vye]

i've updated the file but it hasn't changed the page numbers, the right hand side of the website is wider..if i remember correctly last time i think the web designer had to put more properties per page, can you help?thks

[saltedm8]

my suspicions are that this data is dynamically created via php or some other means, if that is so there could be some css within the php code itself that needs adjusting,

could you me if i am right

[Emzi]

I'm not sure if this is a problem solver, but the links for each page don't have a space between them. Maybe make sure they have a space?

Also, I noticed all the page numbers are in a span with a class of "selector", I had a look at your CSS and there doesn't seem to be a class with that name, so maybe get rid of that span altogether?

[Emzi]

Originally Posted by saltedm8

my suspicions are that this data is dynamically created via php or some other means, if that is so there could be some css within the php code itself that needs adjusting,

could you me if i am right

That's unlikely because if there is any CSS/HTML within the PHP code it will always display in the HTML.

[62vye]

I don't know anything about css or php i'm afraid, is there a way of knowing if there is css within the php code? Thank you both for your help but I think I will leave it as it is at the moment as I dont know anything about css and am unsure about how to insert a space between the pages or how to get rid of the span, unless it is a simple job and you could explain in very simple terms. I think I will read up on css to get a better understanding of the terminology as at the moment I haven't got a clue.

[Aso]

62vye, I can't see the changes you've made.

Are you sure you modified the basic.css file with the correct changes and re-uploaded it?

If you do exactly as I said in my original post, and upload the modified file, then we can see the changes and recommend another fix if needed.

You don't have to know anything about CSS, PHP or HTML. Just copy and paste-replace the line I originally quoted.

[capture]

Seems you have 34 pages listed in:<div class="viewpageslinksbar">
Remove page numbers 21 -->34 from your HTML.
Right after that you have <span class="selector">
There is NO .selector class in your stylesheet

Add to this class:
.viewpageslinksbar
{background:#A0CFFD;border-bottom:1px solid #4489AA;border-top:1px solid #72B3D1;margin-bottom:4px;width:532px;}

To your Health, Wealth and Success
ClaireP

[Aso]

capture, you've just reiterated what everyone else has said!

[62vye]

Sorry about that I have changed the code to what you said as I did originally change it but amended it back to the original code when it didn't work, it is now changed to the code that you recommended.

For this part;
Seems you have 34 pages listed in:<div class="viewpageslinksbar">
Remove page numbers 21 -->34 from your HTML.
Right after that you have <span class="selector">
There is NO .selector class in your stylesheet

Where do i find the code please is it still in my basic.css folder as i can't find this or do i need to find the html code, and if so where would it be? thks.

[Aso]

I wouldn't worry too much about this. All that's being said, is in your HTML you have a <span> element with a class of selector, but no reference to that class in your CSS.

Back to the problem, here's a shot in the dark. Where you previously edited your basic.css file, there's another line that looks like this:

Code: Select all

.viewpageslinksbar a{background:#5FA2C1; padding:0px 4px;text-decoration:none; color:#254B65; margin:0px 1px;}

Replace it with this:

Code: Select all

.viewpageslinksbar a{background:#5FA2C1; padding:0px 4px;text-decoration:none; color:#254B65; margin:0px 1px;float:left}

That should fix things

[62vye]

ok, i've just done that, there is more room for the numbers but it looks like the top property has been squeezed out, do you know if i can alter it so that the property can drop down into place? thks

[Aso]

Ok, this should hopefully be the last fix!

Add this to your CSS:

Code: Select all

.viewpageslinksbar:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

What this does, is inserts a period after the viewpageslinksbar and clears the previous floats, so that the next element does not wrap around them.

[62vye]

Absolutely Brilliant, thank you so much for helping me it looks so much neater and you explained it so well you have given me the confidence to try things myself and i will def. learn all about css to start with. many thks