• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS Positioning Issue

 
tumbleweed and gunslinger
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,

Got Eric Meyer CSS book and read it through. Good book! However, still have an issue trying to figure out positioning without using tables.

On a typical portlet (like Yahoo!), there is a title bar and to the right, you have elements like minimize, edit, maximize, etc. How can I position these elements in a div while still having the title left aligned? The issue being, in a single div, you have left aligned area and a right aligned area in a single div?

Here is the code I'm trying. In the example below, the "Edit" element should be right aligned in the same DIV. It's not.



[ October 16, 2004: Message edited by: David Yutzy ]
[ October 16, 2004: Message edited by: David Yutzy ]
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The secret is to use a combination of divs and spans with the float attribute.

Here is a basic example:



Eric
 
David Yutzy
tumbleweed and gunslinger
Posts: 192
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the quick reply. I got that working, now I'm trying to apply a style to the links in the "actions" span.

According to your example, I modified the code and have the following:



The style I'm using is as follows:



I'm using a CSS editor called TopStyle and in their "preview" mode, the above works as expected, but when shown in FireFox, doesn't work at all and looks like a regular link. I also tried it in IE 6.x and get the same result.

I even tried changing the "span.edit" to a simple class "edit" and couldn't get that to work. This is odd because it should work...
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
it would be

a.edit

a.edit:hover

Eric
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic