SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    United States
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text alignment and overflow problem (harder than it sounds...)

    To see the problem go to: http://castlevania.iwebland.com

    As you can see, the h4 block is currently attached to the left margin as would be expected. What I WANT it to do is overflow on BOTH sides making it look like the word is floating above the box in a sense but still aligned centrally to it. I can get this effect by making a class with a left property of -(however many pxls) but I want to be able to accomplish this for all h4 without having to specify custom class settings of which there would be several because I'm going to have other boxes with other headings of various lengths.

    Also, sort of related to the previous quesiton is if you can make inline content "attached" to the right margin. Alignment doesn't seem to really be the same because I've tried to right align text to a box that was too small and it still aligned itself to the left margin spilling outside past the right border (as in example). Only if there was enough room in the containing object would it right justify.

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Are you sure that URL is right? I get taken to a simple "test page" which links to a forum that uses tables for layout and has no 'h4' elements at all...
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    SitePoint Member
    Join Date
    Mar 2003
    Location
    United States
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update fixed link!!!

    Quote Originally Posted by Kevin Yank
    Are you sure that URL is right? I get taken to a simple "test page" which links to a forum that uses tables for layout and has no 'h4' elements at all...
    Yes you're right the real link should be: http://castlevania.iwebland.com/problem.html

  4. #4
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MusoSpuso
    Yes you're right the real link should be: http://castlevania.iwebland.com/problem.html
    why don't you create a container, where the other container (the dotted line) is central to, and which has the length of the longest h4 you,ve got...

    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  5. #5
    SitePoint Member
    Join Date
    Mar 2003
    Location
    United States
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Lister14
    why don't you create a container, where the other container (the dotted line) is central to, and which has the length of the longest h4 you,ve got...


    That is indeed another possibility but still somewhat of a hack. I'm curious to know if there's actually a mechanism in css that can accomplish this without adding other containers or elements to hack my way through it. My objective is to try to stay as pure to the separation of structure and presentation as is intended by css but so far yours is probably the best idea for it, if I can't come up with anything else I might use it. Thanks.

  6. #6
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MusoSpuso
    That is indeed another possibility but still somewhat of a hack. I'm curious to know if there's actually a mechanism in css that can accomplish this without adding other containers or elements to hack my way through it. My objective is to try to stay as pure to the separation of structure and presentation as is intended by css but so far yours is probably the best idea for it, if I can't come up with anything else I might use it. Thanks.
    is that not where 'id' and 'class' come to their full intended function?

    id is the big container, containing one or more classes of things, such as the h4 or the dotted box...
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!


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
  •