SitePoint Sponsor

User Tag List

Results 1 to 25 of 25

Hybrid View

  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,299
    Mentioned
    460 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,364
    Mentioned
    268 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,299
    Mentioned
    460 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,299
    Mentioned
    460 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,299
    Mentioned
    460 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
  •