SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Element alignment

    Hi all,

    I have three div elements of differing widths in a column. I want to align the lower two elements so that their right-hand edges align with the right-hand edge of the top element.

    I have been looking for some time for the solution without success.

    Thank you very much in advance.

    Rob

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

    Can't you just float the elements right then the right hand sides will align automatically.

    Something like:
    Code:
    .box1 {
     height: 25px;
     width: 200px;
     float: right;
     clear:both;
     margin-right: 10px;
    }
    Paul

  3. #3
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion, but that did not work.

    I have gotten the following to work though I can not help feeling that this is a long way around to the solution.

    HTML Code Snippet
    Code:
     <div class="header">
      <div class="header2">
    	<div class="header_navbar">
    	  <span class="header_navbar_cell" onmouseover="status='Cell one'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell one</span><span class="header_navbar_cell" onmouseover="status='Cell two'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell two</span><span class="header_navbar_cell" onmouseover="status='Cell three'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell three</span><span class="header_navbar_cell" onmouseover="status='Cell four'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell four</span><span class="header_navbar_cell" onmouseover="status='Cell five'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell five</span><span class="header_navbar_cell" onmouseover="status='Cell six'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell six</span><span class="header_navbar_cell" onmouseover="status='Cell seven'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell seven</span><span class="header_navbar_cell" onmouseover="status='Cell eight'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell eight</span><span class="header_navbar_cell" onmouseover="status='Cell nine'; this.className='header_navbar_cell_hover'; return true;" onmouseout="this.className='header_navbar_cell'; return true">Cell nine</span>
    	</div>
    	<div class="header_navbar_group">
    	  <span class="header_navbar_group_cell" onmouseover="status='Cell one'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell one</span><span class="header_navbar_group_cell" onmouseover="status='Cell two'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell two</span><span class="header_navbar_group_cell" onmouseover="status='Cell three'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell three</span><span class="header_navbar_group_cell" onmouseover="status='Cell four'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell four</span><span class="header_navbar_group_cell" onmouseover="status='Cell five'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell five</span><span class="header_navbar_group_cell" onmouseover="status='Cell six'; this.className='header_navbar_group_cell_hover'; return true;" onmouseout="this.className='header_navbar_group_cell'; return true">Cell six</span>
    	</div>
    	<div class="header_navbar_tools">
    	  <span class="header_navbar_tools_cell" onmouseover="status='Cell one'; this.className='header_navbar_tools_cell_hover'; return true;" onmouseout="this.className='header_navbar_tools_cell'; return true">Cell one</span> | <span class="header_navbar_tools_cell" onmouseover="status='Cell two'; this.className='header_navbar_tools_cell_hover'; return true;" onmouseout="this.className='header_navbar_tools_cell'; return true">Cell two</span> | <span class="header_navbar_tools_cell" onmouseover="status='Cell three'; this.className='header_navbar_tools_cell_hover'; return true;" onmouseout="this.className='header_navbar_tools_cell'; return true">Cell three</span> | <span class="header_navbar_tools_cell" onmouseover="status='Cell four'; this.className='header_navbar_tools_cell_hover'; return true;" onmouseout="this.className='header_navbar_tools_cell'; return true">Cell four</span> | <span class="header_navbar_tools_cell" onmouseover="status='Cell five'; this.className='header_navbar_tools_cell_hover'; return true;" onmouseout="this.className='header_navbar_tools_cell'; return true">Cell five</span>
    	</div>
      </div>
    </div>
    CSS Code Snippet
    Code:
    div.header
    {
      background-color: #039;
      color: #000;
      font: xx-small;
      height: 100%;
      left: 0;
      position: absolute;
      text-align: right;
      top: 0;
      width: 100%;
    }
    div.header2
    {
      left: 0;
      position: absolute;
      top: 0;
    }
    div.header p
    {
      margin: 0;
      padding: 1em;
    }
    div.header_navbar
    {
      margin: 1px 1px 1px 0;
      padding: 2px 0 2px 0;
    }
    span.header_navbar_cell
    {
      background-color: #fff;
      cursor: default;
      margin-left: 1px;
      padding: 2px 2px 2px 2px;
    }
    span.header_navbar_cell_hover
    {
      background-color: #039;
      color: #fff;
      cursor: hand;
      margin-left: 1px;
      padding: 2px 2px 2px 2px;
    }
    div.header_navbar_group
    {
      margin: 1px 1px 1px 0;
      padding: 2px 0 2px 0;
    }
    span.header_navbar_group_cell
    {
      background-color: #9cf;
      cursor: default;
      margin-left: 1px;
      padding: 2px 2px 2px 2px;
    }
    span.header_navbar_group_cell_hover
    {
      background-color: #9cc;
      cursor: hand;
      margin-left: 1px;
      padding: 2px 2px 2px 2px;
    }
    div.header_navbar_tools
    {
      color: #fff;
      margin: 1px 1px 1px 0;
      padding: 2px 0 2px 0;
    }
    span.header_navbar_tools_cell
    {
      cursor: default;
      padding: 2px 2px 2px 2px;
    }
    span.header_navbar_tools_cell_hover
    {
      color: #9cc;
      cursor: hand;
      padding: 2px 2px 2px 2px;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It looks ok to me and it works (apart from all those javascript mouseovers -couldn't you use hovers to get that effect?).

  5. #5
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    It looks ok to me and it works (apart from all those javascript mouseovers -couldn't you use hovers to get that effect?).
    If you know how to change the status bar using CSS I would really like to know how as it would clean up the code incredibly.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I don't think you can change the Status bar with CSS. I'm wondering if it is worth the effort anyway as most users will probably not notice it anyway. (I didn't notice it even though I knew the code was in there.)

    Paul

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the status bar is part of the browser's UI, and should therefore not be changed by a page's CSS...same goes for scroll bars etc...
    and yes, most users have now stopped caring about it. ah, back about 10 years ago it was all the rage...scrolling status bar messages...but now it just looks amateurish. my GBP 0.02, anyway
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  8. #8
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would also like to remove the onmouseover / onmouseout functions that change the style, and use div.header_navbar_cell:hover.

    This does not work. Does anyone know why?

  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what browser are you using ? as far as i know, IE does not support the :hover pseudoclass (and much, much more )
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  10. #10
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The hover pseudoclass works with <a> tags in IE. I guess hover does not work with elements though.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I assumed that your cells were all going to be links so that you could have used the standard a:hover etc to produce the same effect.

    (I suppose you could still do that and make them null links to get your rollover effect.)

    Paul

  12. #12
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some of the cells will be links, others will be headers for a sub-menu that will pop up.

  13. #13
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Devon, UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please no status bar effects!

    I always look at a link's href in the status bar to see where someone is taking me before clicking it, and anything that gets in the way is really annoying. I'm very judgemental!

    And then the other 90% of people won't even notice it...

  14. #14
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the status bar to give a short description for the link the user is pointing at.

  15. #15
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by -rob-
    I use the status bar to give a short description for the link the user is pointing at.
    don't...honestly, it's very 80's and mainly points at amateurish sites.
    if you need to provide extra information on a link, be standards compliant and accessibility minded and use the title attribute, e.g.

    Code:
    <a href="somewhere.html" title="This link takes you to our lovely somewhere page">somewhere</a>
    any modern browser shows titles as tooltips when you hover over the link with your mouse. (and screenreaders read out the title...but that's another story )

    incidentally, the title attribute should also be used in cases where - up to now - web designers have abused the alt attribute in order to get some tooltip description on their images. alt attributes serve the purpouse of providing an ALTernative for when the image cannot be displayed...and not to serve as a tooltip.

    ok, i'll get off my soapbox now...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  16. #16
    SitePoint Zealot -rob-'s Avatar
    Join Date
    Mar 2003
    Location
    Earth
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sadly I never knew about the Title tag. Ta for the info.

    New post time.

  17. #17
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Plus for a lovely way to actually style the title attribute a la Safari, do a Google search for "nicetitle.js" and "nicetitle.css".

    They even degrade gracefully, and display as simple titles on browsers that don't support the javascript/have javascript switched off.

    I don't usually promote javascript, but this is so lovely! [img]images/smilies/smile.gif[/img]

    Can't offer the actual URL as its late (about to go to bed) and the bookmark is at work.

    EDIT: Don't say I never do anything for you people! The URL is http://www.kryogenix.org/code/browser/nicetitle/
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!


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
  •