How to move boxes out of HTML hierarchy?

Discussion in 'CSS' started by kfhbf, Feb 14, 2007.

  1. #1
    Hi folks,

    I have run into the following problem: My XHTML for a webpage looks more or less like this (simplified, only body part):

    
    <body>
     <div id="content">
        <h1>Title</h1>
        <h2>Subtitle</h2>
        <p>Text</p>
      </div>
    </body>
    HTML:
    As you can see, the div named "content" contains a title, a subtitle and some text, one after the other. However, I want to display this using CSS in the following way:

    That is, the title and subtitle do not go into the same box as the text. How can I achieve this? Also, in order to keep content separated from presentation, I want to achieve this without changing the HTML source (i.e., without putting the text into one div, and the title and subtitle into another).

    Thanks for any hint,
    Kaspar

    P.S. If possible, I would like the text in the blue box to have the CSS property "overflow:hidden" so that if there is so much text that it does not fit into the blue box anymore, it will be clipped away.
     
    kfhbf, Feb 14, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    You will have to make a little change in your markup. The headings need to be grouped. That's the function of the div element.
    
    #content {
        background-color: #cfd4da;
        border: 1px solid black;
        margin: 25px 0 0 25px;
        padding: 5px;
        position: relative;
        width: 400px;             /*a dimension or other hasLayout
                                    trigger required for IE*/
        }
    
    #content h1, #content h2 {
        display: inline;
        font-size: 1em;
        }
    
    #content div {
        position: absolute;
        bottom: 0;
        left: 5px;
        }
    
    #content h2 {
        font-weight: normal;
        }
    
    /*because of IE, you'll have to add the em dash
      explicitly, but this shows the modern way*/
    #content h2:before {
        content: "\2014\20";
        }
    
    #content p {
        background-color: #8596a6;
        padding: 5px;
        margin: 0;
        margin-bottom: 1.4em;
        }
    ================
    
        <div id="content">
          <div> <!-- grouping element required -->
    	<h1>Title</h1>
    	<h2>Subtitle</h2>
          </div> <!-- end grouping element -->
          <p>text</p>
        </div>
    Code (markup):
    For the ps, give p a fixed height and make overflow hidden.

    cheers,

    gary
     
    kk5st, Feb 14, 2007 IP
  3. kfhbf

    kfhbf Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Gary,

    First of all, thanks a huge lot for your fast, detailed and complete reply!

    Taking a look at your solution I see that you use the CSS positioning mechanim to move things "around". (What I mean by "moving around" is that in the HTML, the title and subtitle come before the main text in the p-element but in the presentation, the text comes first.) The CSS positioning can only move containers and that's why you insert the additional div: to group the things you want to move into a container.

    The only thing that makes me worry here is that sometimes, you cannot (easily) alter the HTML souce. (I mean: that was the idea of CSS, to separate content from presentation, right?) Now you discovered that for my particular presentation needs, we need a div. Does this mean my HTML source was bad and should have come with a div around title and subtitle?

    In other words: Is this the only way CSS offers to solve the problem of "moving boxes out of the HTML hierarchy"?

    Anyway, in my particular case I can insert the div, so it's not a problem (and the above question is just out of interest). Again, many thanks for your solution,

    Kaspar
     
    kfhbf, Feb 15, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    The div element is a syntactically neutral, aggregating element. That is, it allows you to group elements and treat them as a single context. Notice that it doesn't really change the structure of the document; it only allows you to treat the elements within the div as a single entity. To see how this is true, turn off css.

    The problem you presented required that two elements be treated as one. The div's alter ego is the span, which segregates some inline node for special handling. Neither are semantic, but each allow for a coarser or a finer granularity of presentation control.

    The elements give us the ability to further remove presentation from structure by providing a potential hook for our css.

    cheers,

    gary
     
    kk5st, Feb 15, 2007 IP