Aligning certain lines of text in sidebar

  • Hello,

    My blog is here. Sorry if the answer to this is obvious. I inserted a quotation at the top of my sidebar, and I’m wondering how to align the byline (“–Erich Fromm”) to the right. Here are the first several lines of code in my sidebar.php file:

      <!– SIDEBAR LINKS –>

      <div id=”menu”>

      <div id=”nav”>

      [p]
      “Man is the only animal for whom his own existence is a problem which he has to solve.” [br /]
      –Erich Fromm

    I’m a CSS novice, but I know that the tag refers to the style sheet and that the quotation is styled accordingly. What I can’t figure out is how to isolate that one line of text (the byline) and style it differently. I’m also not sure what tag to use to do that.

    I also noticed, while viewing my blog on a Windows machine, that the quotation is pushed to the very top of the sidebar, too close to the banner. On my Mac, there’s a nice margin above the quotation of 10 pixels or so. Any thoughts on how to fix this?

    Thanks.

Viewing 10 replies - 1 through 10 (of 10 total)

  • "Man is the only animal for whom his own existence is a problem which he has to solve."
    <span style="text-align: right;">--Erich Fromm</span>

    For spacing, edit the details for #nav and add some padding to the top, such as padding-top: 10px;.

    Thread Starter spine

    (@spine)

    Thanks, Viper–alas, I tried your fix and the byline still doesn’t want to budge. Do you think there’s something in my stylesheet that’s making the [span style] tag inoperable?

    It’s float:right but you will probably want to add some padding-right, too.

    Thread Starter spine

    (@spine)

    Bingo! Thanks, Beel. Here’s the code I used:

    <span style="float:right; padding-right: 8px";>--Erich Fromm</span>

    That look about right?

    Thanks for the info re. padding, Viper. That (admittedly simple) solution worked. I might look around for a fix that doesn’t add padding, though, because while the sidebar will look better on a Windows machine now, it’s got a little more top padding than I want when viewing the site on Macs.

    On a Mac with what browser? If it is IE use !important

    Thread Starter spine

    (@spine)

    Safari. Where would I put the !important tag, though? That’s a new one to me.

    It’s not really too much padding on my Mac, I’m just wondering if there’s a fix to solve the issue with Windows without affecting the layout for Macs. Of course, maybe it’s a browser thing, not an OS thing, now that I think of it.

    Don’t know if Safari recognizes it or not, but…

    padding-right: 8px !important;
    padding-right: 6px;

    Thread Starter spine

    (@spine)

    Thanks again.

    It’s float:right but you will probably want to add some padding-right, too.

    Hmm, I know I’m a CSS noob, but I was under the impression that text-align is the proper thing to use in this case and float was for when like you wanted to do something like this (the image):

    https://www.viper007bond.com/archives/2005/09/09/transporter-2/

    i.e. float around regardless of the other items in the element.

    Viper – only block level elements can have a text-align property set and span is an inline element.

    Imagine you were to [span this text]. Text aligning within the brackets results in no text alignment. Thus the poster could wrap the author in a div or p tag and text-align:right.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Aligning certain lines of text in sidebar’ is closed to new replies.