wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Positioning Links within a TH tag Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Positioning Links within a TH tag" Watch "Positioning Links within a TH tag" New topic
Author

Positioning Links within a TH tag

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Is it possible to have two links in a th tag, one positioned in the center and on to the extreem right?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
I have tried floating one div tag inside another but if the parent div tag has contents the inserted div tag will not position itself on the same line as the content of the parent as I would like it too.

I need on line that has the text 'Message Center' centered then on the right end of this same line an icon that will expand and colapse the message content div container.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60800
    
  65

Is the item you are floating first?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Bear Bibeault wrote:Is the item you are floating first?


Sorry it has taken so long to get back to this.

Yes my floated item is first. The following places the 'Message Center' text to the left of the container. I can get it closer to the center by making the width of the inner container 95% but when the page is scaled the outer container goes to two lines.



My CSS:

Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

You've set the item you want to centre as float: left, it shouldn't be too surprising to you that it's not centred?


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Rob Crowther wrote:You've set the item you want to centre as float: left, it shouldn't be too surprising to you that it's not centred?


I have tried taking out the float: left and according to documents I have read the margin: 0 auto should center the container within the container but not successful so far.
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

Is this what you're trying to do?





I had to replace your icon in the fiddle, so I picked one at random from this page. I also simplified your markup - couldn't see the point of having the <a> elements that didn't link anywhere, and the extra wrapper elements were serving no purpose either. Could be in the full version of your code they have a purpose, but in the code you posted they're just getting in your way. Also ridiculously long IDs are one of my pet hates, and you should avoid using them just as CSS hooks. Your class names also make the mistake of describing the style rather than the semantics - what are you going to do when a future revision means that your redItalicSmallBold class has to have large, blue underlined text?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Rob Crowther wrote:Is this what you're trying to do?





I had to replace your icon in the fiddle, so I picked one at random from this page. I also simplified your markup - couldn't see the point of having the <a> elements that didn't link anywhere, and the extra wrapper elements were serving no purpose either. Could be in the full version of your code they have a purpose, but in the code you posted they're just getting in your way. Also ridiculously long IDs are one of my pet hates, and you should avoid using them just as CSS hooks. Your class names also make the mistake of describing the style rather than the semantics - what are you going to do when a future revision means that your redItalicSmallBold class has to have large, blue underlined text?


This still puts the text 'Message Center' on one line and the icon on second line.
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

No, it doesn't.

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Rob Crowther wrote:No, it doesn't.



Is there a way to send you a screen shot of my page?
Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

I'm not sure how that would help, it's your code which needs fixing? I've posted working code based on the code you provided, how is your code different to that?

Also, you don't need to quote my entire comment every time, we can all see what I said already without you repeating it.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Rob Crowther wrote:I'm not sure how that would help, it's your code which needs fixing? I've posted working code based on the code you provided, how is your code different to that?

Also, you don't need to quote my entire comment every time, we can all see what I said already without you repeating it.


Thanks for your help. I have been wrestleing with my log on page for the last 12 hours. Hate to be a bother to you.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Rob Crowther wrote:No, it doesn't.



If I open the page in FireFox it is on one line but in IE8 it is on two lines.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60800
    
  65

Something doesn't work in IE8? What a shock!

Repeat: try putting the floated element first.

[Can't test it myself -- all my Windows virtual machines are at the office.]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Bear Bibeault wrote:Something doesn't work in IE8? What a shock!

Repeat: try putting the floated element first.

[Can't test it myself -- all my Windows virtual machines are at the office.]


It works like a charm. Thanks Bear.

Could not do any of this without the help here at JavaRanch. Just remember there are a lot of us who are still learning and have farther to go than we will ever have time for.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Positioning Links within a TH tag
 
Similar Threads
Getting Two Tables to Line Up
how to center table heading
Making a bean collected from a collection in a page, available in a subsequent page
Go back functionality in jsp
To create Table dynamically inside DIV tag using ajax responseXML