SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text to the left and right

    I'm trying to create a footer for my site in CSS. It is centered 725 pixels wide with a background image. Here is the HTML I'm using:

    Code:
    <div class="footercss">Casey's Casa <div style="text-align: right">Link Link2</div></div>
    and the CSS:

    Code:
    .footercss {
     font-family: "Trebuchet MS", Verdana, Arial;
     font-size: 11px;
     line-height: 15px;
     background-image: url(../images/bottombar.gif);
     background-repeat: no-repeat;
     background-position: top;
     margin-right: auto;
     margin-left: auto;
     vertical-align: bottom;
     width: 725px;
     padding-top: 15px;
     text-align: left;
    My problem is that the text on the left is higher then the text on the right. I want all of the text to be on the same line. Any ideas on what I'm doing wrong?

  2. #2
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the right-aligned text in a span instead of a div.
    TuitionFree a free library for the self-taught
    Anode Says... Blogging For Your Pleasure

  3. #3
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. I tried that and it left the text as left-aligned. This is a tricky one.

  4. #4
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div style="navlinks">Link Link2</div>
    with
    .navlinks{
      text-align: right;
      display: inline;
    }
    should do it.
    TuitionFree a free library for the self-taught
    Anode Says... Blogging For Your Pleasure

  5. #5
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anode
    Code:
     
    <div style="navlinks">Link Link2</div> 
    with 
    .navlinks{ 
    text-align: right; 
    display: inline; 
    }
    should do it.
    Man that still didn't work. Here is the actual page if that will help. Maybe my "body" css decleration is doing something to it?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could cheat a bit and try this.

    Code:
    <div style="text-align:center"><!-- needed to centre in IE5-->
    <div class="footercss">Casey's Casa <span style="margin-left:600px">Link Link2</span></div>
    </div>
    Or if you want to do it properly have a look here:

    http://www.alistapart.com/stories/practicalcss/

    BTW I dont think theres a : background-position: top; (i think it should only be right, left or centre).

    Hope this helps

    Paul

  7. #7
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You could cheat a bit and try this.

    Code:
    <div style="text-align:center"><!-- needed to centre in IE5-->
    <div class="footercss">Casey's Casa <span style="margin-left:600px">Link Link2</span></div>
    </div>
    Paul
    Hey that worked! You're right, there is no background-position: top so I took it out. So for IE5 to center the divs properly I need to include the text-align: center even though I already included it in the body css decleration?

    I have one more question. How come Dreamweaver isn't displaying a lot of my css styles? The styles work when I preview the page, but in Dreamweaver, for instance, everything is aligning left when it should be aligning center. Any tips?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by caser85
    I have one more question. How come Dreamweaver isn't displaying a lot of my css styles? The styles work when I preview the page, but in Dreamweaver, for instance, everything is aligning left when it should be aligning center. Any tips?
    Dreamweaver isn't Wysiwyg for CSS styles . They will only show up correctly when you Preview it in a browser.

    There's a bug in IE5 that doesn't centre divs when you use margin right:auto and margin left: auto. So you use anothe IE5 bug which is to surround a div with another div that has the style text-align:center . This should only centre text but IE5 centres the div in error.

    Other browsers will then centre the text so you need to set the position of the text in the centred div to the required position as well.

    Paul

  9. #9
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I'll have to make sure and implement all of those fixes.


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
  •