SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Floating within a h tags...

    Hi,

    I want to float stuff to the right in my header tags.

    i.e. I want to do something like this:
    HTML Code:
    <h2>This is a post title   <span style"float:right">edit button</span></h2>
    ... but this doesnt work.

    -sk

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It works for me in (FF, IE6) with the test I just did.

    Though instead of using the inline style you can just do this in the .css:
    Code CSS:
    h2 span {
     float:right;
    }
    Code HTML4Strict:
    <h2>This is a post title <span>edit button</span></h2>
    Hope it helps.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by specialkitty View Post
    ... but this doesnt work.
    It's because a typo, an "=" is missing after style:
    Code HTML4Strict:
    <h2>This is a post title   <span style="float:right">edit button</span></h2>

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    It's because a typo, an "=" is missing after style:
    Code HTML4Strict:
    <h2>This is a post title   <span style="float:right">edit button</span></h2>
    Haha, that explains why it was working then, hahaha Sorry I missed it

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wearing glasses.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Woops sorry about the typo... but they're still not inline... the edit button is a line lower than the title.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I managed to do it like so:

    Code HTML4Strict:
    <span class="editbutton">Edit button</span>
    <h2>Post Title</h2>

    Code CSS:
    h2{
    	font-size: 13px;
    	color: #000;
    	margin: 15px 0 0 0;
    	border: 1px solid #000;
    	padding: 5px 0;
    	}
     
    .editbutton{
    	float:right;
    	font-weight: bold;
    	font-size: 11px;
    	padding: 1px;
    	margin: 5px 0 0 0;
    	}

    But this isn't an ideal method since the margin of the button is dependent of on the margin of the item above it and the button's position varies according to it.

    So... any suggestions?

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works fine if you put the floated part first in the html :
    Code:
    <h2><span style="float:right">edit button</span> This is a post title</h2>

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant.. thank you!

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the "edit post" link really isn't part of the post title, it would make far more sense to have it be a sibling of the heading than part and parcel of it.

    Just my take on it anyway.

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So a new problem has arised... I did exactly what "Centauri" suggested... did a debug with Dreamweaver and now it's saying that I've got a "Three Pixel Jog" problem in IE6... anyway I tried this:

    * html span {
    height: auto;
    }

    but it didn't work ... any suggestions?

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 3 pixel IE6 jog occurs when you have a floated element beside a non-floated element that has HasLayout set (ie a height and/or width has been specified), and that does not apply to the code presented above so far. If the jog exists at all, it is somewhere else in the code page (I wouldn't trust Dreamweaver to identify all possible ways in which the jog could occur).

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm trying a purely test html in Dreamweaver.... i.e.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
     
    <body>
     
    <h2><span style="float:right;">edit button</span> This is a post title</h2>
     
     
    </body>
    </html>

    That's it, there's nothing else, but Dreamweaver is picking it up as the 3px jog bug... so I guess, I should just ignore it then?

    -sk

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, this is just a false positive.

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, no 3px jog here.


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
  •