SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Text Issue With Wordpress And CSS

    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 :

    www.thereadersden.com

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Quarterwave. Welcome to the forums.

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

    Code:
    <div class="buttons_container" style="width: 470%;">
    Remove that, and the text will flow naturally.

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,199
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Do I take it you managed to find it? I've just looked at your site and that line reads
    Code:
     <div class="buttons_container" style="width: 58%;">
    and it looks fine to me.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, it's been changed.

    @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

    Code:
    .buttons_container { margin:0 auto; position:relative; height:60px; width: 58%; }

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Quarterwave View Post
    I found the line item, but it has no width value (or mention of width at all)
    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. #8
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Perhaps the easiest way to doeal with this is to find your CSS file and add this code:

    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/wordpre...tom/custom.css

  11. #11
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, you've lost me a bit there. I'm not sure what you are trying to do there. What is #ex5?

  13. #13
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  15. #15
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 :

    www.thereadersden.com

    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 :

    http://designshack.net/?p=19746

    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. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, that's clearer.

    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:

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

  17. #17
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, maybe try this:

    Code:
    .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/wordpre...tom/layout.css

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

  19. #19
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  21. #21
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I went through and confirmed all and even updated the page and re-posted it so that any and all changes would take effect. Before I try it all again, where in the CSS would I insert the code - is there any specific spot or is just at the top or bottom, ok ?

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Any place in any CSS file should be fine.

  23. #23
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok cool - thank you, I'll try it now.

  24. #24
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It works ! Ralph, I'm not sure if you are old enough to drink or not, but if so, I owe you a cold beer.

    Thank YOU.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped. There are probably nicer effects, but I'm sure you can play around with it in time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •