Text Issue With Wordpress And CSS

HTML & CSS
1

Hi everyone,

First time post here, so I hope I’m in the right forum.

To get right to it, I’m having an issue with some text that I’m trying to get to write from left to right on a part of a site that I’m working on. The link to it is :

If you scroll to the bottom of the page, there is a list of book “categories” that I’d like to run from left to right, and then once the text reaches the border (or a few px in from that edge), I’d like for the next category in the list to begin at the left margin on the next line (essentially below the first line of categories).

At the moment, I can only get it to scroll in one continuous line.

The “bookcase” that I am using is based on a slider plugin, and I’ve tried just about everything I can think of :

centering text
justifying text
margins
padding
align left / align right
float etc…

… to get the text to appear how I want it to but, unfortunately, all to no avail.

Any help would be very much appreciated.

Thanks in advance.

2

Hi Quarterwave. Welcome to the forums. :slight_smile:

Yep, this is the right forum to be posting in. The problem is caused by the massive inline width you have here:

<div class="buttons_container" [COLOR="#FF0000"]style="width: 470%;"[/COLOR]>

Remove that, and the text will flow naturally. :slight_smile:

3

Hi Ralph,

Thank you for your help. I have one more problem though - where is that line item !!! I’ve looked through every file code I can find in the plugin, my Thesis CSS and PHP and CANNOT find it anywhere !

Any help would be much appreciated…

Also - do I just need to delete it entirely - or just change the value to say, 100% ?

Thanks again…

4

[FONT=Verdana]Do I take it you managed to find it? I’ve just looked at your site and that line reads

 <div class="buttons_container" style="width: 58%;">

and it looks fine to me. :)[/FONT]

5

Yes, it’s been changed. :slight_smile:

@Quarterwave; There were many links there before … so presumably they weren’t needed? Anyhow, to be tidy about it, the idea would be to move that inline style to your style sheet, at line 61 of Stylesheets/bookshelf_slider.css

.buttons_container { margin:0 auto; position:relative; height:60px; [COLOR="#FF0000"]width: 58%;[/COLOR] }
6

Hi Ralph,

Man, thanks for your help - but, my background is in SEO / SEM and not really into code, so I’m kinda feeling my way along here.

I think the reason why the value was less, was b/c I was messing with the plugin earlier today (trying to find that line item), but could not and took a break to spend some time with my family. I didn’t get a chance to return the page to “how it should be” in regards to the # of categories that I need until just now.

So, with all that in mind, I have two quick questions :

  1. I found the line item, but it has no width value (or mention of width at all)

  2. Where exactly should I move that line to ? As I’m unsure as to what inline means…

… and again, thank you for all of your help.

7

Yes, I’ve just realized that the width is set by JavaScript, so you won’t see it in your HTML. I guess the first question we need to ask is how you want this to appear. That setting you changed did help, but if you want rows and rows of links, the layout will have to be modified anyway.

8

Hi Ralph,

Thanks for your time and effort.

Ideally, I’d like for the categories to be evenly spaced across the column (which is 790 px wide, not including any padding or margins), and then as each right hand margin is reached, and following categories start on a new line, at the left hand margin.

So, it would sort of look like this :

Books Arts & Photo Biographies Business & Investing Calendars
Children’s Books Comic’s & Graphic Novels Computers & Tech
Cookbooks, Food & Wine Crafts & Hobbies Education & Reference
Fashion Health & Fitness History Humor & Entertainment

etc… etc…

Also - I currently have the text set to “align:center” - would setting it to “justify” help to fix that as well ?

9

After looking at how my “categories” idea posted in the forum, it didn’t add all the equal spaces like I had initially put into the message, so if you can imagine it all being “square”, that would give you a better idea…

10

Perhaps the easiest way to doeal with this is to find your CSS file and add this code:


.buttons_container {
  width: 100% !important;
}

.panel_bar {
  height: auto !important; 
  text-align: justify !important;
}

You could put this in your custom.css file here:

http://www.thereadersden.com/wordpress/wp-content/themes/thesis_184/custom/custom.css

11

Ralph - you’re a lifesaver ! Thank you.

One more quick question - I have some code for a hover effect on text that I’ve been trying to apply to those “categories”. This is the code :

<=“” p=“”>

#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}

#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;

/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

}

#ex5 img:hover {
opacity: 1;

/Reflection/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

/Glow/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Would you mind advising where the best place would be to put this code into, so that the “categories” highlight when a mouse pointer is placed over the text ?

Thanks again for your help !

12

Hm, you’ve lost me a bit there. I’m not sure what you are trying to do there. What is #ex5?

13

Hi Ralph,

This is some code that I found when looking for a way to have my book “categories” highlight when a user puts their mouse pointer over any specific category (to make it visibly standout).

Again, I’m in over my head with code and are trying to get my page somewhat functional, and to try and learn as much as I can in the process, so I’m not sure what that line of code means.

You’ll have to excuse my ignorance, it’s definitely not deliberate - just being honest with you :slight_smile:

The thing is, due to the plugin that is a big part of my site, just about every bit of code I try to use (or learn and apply) never seems to work !

Case in point - since implementing your code (which worked great) I’ve been trying forever to get the categories to be evenly spaced in their “shelf” on my page, but all my efforts have been to no avail.

So, having said that, I know it’s simply a matter of my not knowing how to code and not applying things correctly (in some way)… and so your replies have been of great help .

14

That’s OK, I understand. The problem for me is that I don’t know what you are referring to on the page. Which bits are the “categories”, for example? Just describe visually hwat you want to see on the page and we can help you with that. All we need is a clear idea of what you want to see where. :slight_smile:

15

Ok, great. I’ll be as concise as I can…

In short, the site I have is a book site to help promote self-published authors :

If you scroll to the bottom of the page, I have a list of book “categories”. I have these set up so that all of the books on the site don’t get lost in an un-organized mess, and so with that in mind, I decided to organize them via genre (ie : Sports / Hobbies / Children’s Books etc…).

The problem I have now, is that those “categories” align against the left hand margin, but when I to try to justify them (to have them spaced evenly across the page), they will not respond to that CSS command.

Also - as there are a lot of categories, I’d like to have each one stand out when a user puts a mouse pointer over each “category” (a nice highlighted effect was what I’ve been trying to get - and the code I had mentioned is from this link :

which if you scroll down that page, is supposed to be the code for the “fade in and reflect” highlight style).

So, that’s what I’ve been chipping away at, trying to get it all to work. I know it’s a lot to do for a novice, but I started SEO the same way, and now I am somewhat of an expert in that field, so I know it can be done !

Needless to say, any and all help in my endeavour is really, really appreciated.

16

OK, that’s clearer. :slight_smile:

That list of links isn’t well suited to the effect you want. Firstly, the text won’t justify, because each link is wrapped in a div, which nullifies the effect, so you are probably stuck with that, unless you can work out how to modify the plugin code to remove those divs.

One thing you might consider for highlighting the links on hover is something like this:


.button_bar a:hover {
  text-shadow: 0 0 14px #e27a04;
}
17

Hi Ralph,

Ok, thank you for the explanation.

In regards to the hover code, I tried putting it into the Thesis CSS and also the plugin CSS, and it had no effect on the “categories” at all.

Am I doing something wrong, or do you think it’s due to that div issue ?

18

OK, maybe try this:

.button_items .button_bar a:hover {text-shadow: 0 0 14px #e27a04;}

If you put it inside this file, it will work fine:

http://www.thereadersden.com/wordpress/wp-content/themes/thesis_184/custom/layout.css

It may not be an effect you’d like, but it’s a start. It can be modified, of course. :slight_smile:

19

Hi Ralph,

Thanks for the suggestion. Unfortunately, I tried putting it at the start and the end of the file that you suggested, and it didn’t work.

So, I left it in the file - just below this part :

body { font-size: 10px; }

  • { padding: 0; margin: 0; }

in case you have a moment to have a look, and can tell me what I’m doing wrong.

Should it perhaps be in the CSS of the “bookcase” plugin ? As it’s a PITA to have to deactivate, edit, reactivate and then copy and paste code into the HTML everytime I need to change something on that damn slider.

I did try the other code that you had kindly provided earlier and put that into the bookcase CSS, but as per my earlier post, that didn’t take either…

20

Hm, the problem is that the code is not actually in there. I’m not sure why, though. Perhaps you have to confirm something to make the change active? (WP is not my thing.) If you look at the last link I posted, the CSS code is not in there. You could just create your own style sheet if all else fails and link to it in the head of your pages.