to the right!

  • How do you align calendars? I’ve been trying several ways, but I can’t get it to align to the right… unless it’s on Internet Explorer, but I would like it to look decent in other browsers too.

    My calendar’s in my sidebar, and I have it like this: <div id="calendar"> <h3><?php _e('Calendar'); ?></h3> <?php get_calendar(); ?></div> and the closest combination in my stylesheet is like this: #calendar {float:right'} Of course, my calendar would be aligned to the right, but I don’t want things that were supposed to be below it (categories, archives, etc) to float around it (on the calendar’s left and under the calendar’s right).

    My sidebar is inside a div tag “nav,” and the properties for nav is #nav {position:absolute; left:11px; top:735px; width:248px; padding:2px; z-index:1; background-color:transparent; overflow:visible; text-align:right;} Everything else but the calendar aligns to the right, including the heading “Calendar”.

    I also surrounded the <?php get_calendar(); ?> with a div tag and had the text align to the right in my stylesheet, but that didn’t work… and did the same with a paragraph tag…

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

  • The calendar is in a table and I’m not sure if you want to set the calendar to the right or the text that is in the calendar.

    To move your table calendar around, find the styles in the style sheet that reference the calendar. These may be different from the classic WordPress Theme, but they are #wp-calendar. You can position the main table inside there.

    If we had a link to your site, we could get more specific.

    To align the text within the calendar itself, you need to also work in the #wp-calendar section of your style sheet.

    Thread Starter mystical

    (@mystical)

    I want to set the calendar itself to the right… however, since the boxes are so small, it doesn’t make much of a difference (I’ve tried).

    https://mysticalillusions.5gigs.com/journal/

    Try float:right in the #calendar {} element.

    Thread Starter mystical

    (@mystical)

    I’ve tried it. While that would fix the alignment problem (sort of), it makes the categories and the archives go to the left of the calendar and then below the calendar.

    Did you also clear:right there too?

    I checked your site for validation errors, and lucky you, only one, related to the calendar:

    <p id="cal-right"><table id="wp-calendar">

    A table sits in it’s own thing, so you can put a DIV around it but not a paragraph.

    Okay, this isn’t perfect but it gives you a starting point. First, if you are not using Firefox, install it and get the Web Developer Tools Add on NOW. Using CSS Edit, you can tweak things around until you get it “right”. Then test it out in MSIE and other browsers. Here is what I ended up with. I’m not happy about it, but it works:

    /* CALENDAR */
    #calendar {}
    #calendar table {position:relative; left:120px}
    #wp-calendar {text-align:right;}
    caption {font-family:ariel, times, trebuchet, sans-serif; font-weight:bold; color:#8A2BE2; font-size:16px; text-align:center;}
    th {font-family:ariel, times, trebuchet, sans-serif; font-weight:bold; color:#DDA0DD; font-size:14px; text-align:center;}
    td {font-family:ariel, times, trebuchet, sans-serif; color:#FFFFFF; font-size: 12px; text-align:center;}

    Nope that doesn’t work either (referring to my earlier post, not Lorelle’s). I’d have to grab it all and load it at home to really look at it; your css is pretty hard to read the way you have it….

    Thread Starter mystical

    (@mystical)

    Thanks Lorelle! That plug-in helps! (I had Firefox, but I don’t really use it…)

    vkaryl: Blah, personal preference. I don’t like doing it one property/attribute per line. I find it’s easier for me to have it all out, like reading a book.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘to the right!’ is closed to new replies.

Tags