Hi

I'm trying to code up this design and having problems with the title in the red box:

alt text

The page title text will be a heading, and the red container should expand to fit the text length.

I have almost achieved the effect by floating:left the red container and applying negative margins to get the 'overlap' effect. But it screws up the content below, especially in IE7 (tries to fill the space on the right of the title box).

My html:

<div id="contentbox">
<div class="title_box">
<h1>Page title here</h1>
</div>
Exciting news story etc
</div>

My CSS:

#contentbox {border: 1px solid #000;
margin: 20px 0 20px 0;}

.title_box {background-color: red;
float: left;
padding: 10px;
margin-left: -6px;
margin-top: -6px;}

h1 {color: #fff;
font-size: 2em;
line-height: 1em;}

Please could anyone advise a better way to do this? Thanks!

3 answers

2
points
This was chosen as the best answer

try this:

<!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">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            #contentbox {
                border: 1px solid #000;
                margin: 20px 0 20px 0;
                min-height: 200px;
                width: 90%;
}



            h1 {
                color: #fff;
                background-color: red;
                padding: 10px;
                float: left;
                font-size: 2em;
                line-height: 1em;
                margin: 0 0 10px 0;
                position: relative;
                top: -6px;
                left: -6px;
            }

            h1+p{
                clear:both;
            }

        </style>
    </head>
    <body>
        <div id="contentbox">
                <h1>Page title here</h1>
                    <p>Exciting news story etc <img src="" alt="" width="200" height="100" style="float: right"></p>
                    <p>Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget.</p>
        </div>
    </body>
</html>
Answered over 6 years ago by Tony Crockford
  • If it matters to you, keep in mind that IE6 does not support adjacent sibling selectors (h1+p). But I like the semantics in this answer better than my own. Doug over 6 years ago
  • You could always use a class of first on the first p if it was essential to support IE6 Tony Crockford over 6 years ago
  • Thank you - this is spot on Jim Dean over 6 years ago
Doug 1095
0
points

Your question would be well served by adding a picture of the problem.

Try this to keep the h1 line clear:

<style>
  .newsitem {clear: both;}
</style>

<div id="contentbox">
  <div class="title_box">
    <h1>Page title here</h1>
  </div>
  <div class="newsitem">
    Exciting news story etc
    <img> etc.
  </div>
</div>

And try this as an alternative to negative margins:

#contentbox {position: relative;}
.title_box {
  float: left;
  position: relative;
  left: -6px;
  top: -6px;
}
Answered over 6 years ago by Doug
0
points

This is best method I've seen, though it may look weird if you don't have a reset.css file. :)

<style type="text/css">
legend {
    border: none;
    padding: 5px;
}
fieldset {
    margin: 10px;
    padding: 10px;
    border: 2px groove threedface;
}
</style>
<fieldset>
<legend>Title</legend> 
Content text, blahblahblah.
</fieldset>

Looks like this in a blank html file in chrome:
alt text

If you start with this method, and just add your background color and whatnot, it's totally flexible and cross-browser compatible. Hope this helps!

Answered over 6 years ago by Preston Badeer
  • Except that this is completely unsemantic as the fieldset is an element intended for grouping related form controls, not random elements just because you happen to need a box around them... danwellman over 6 years ago
  • Hmm, well this is primarily used in admin panels, so I guess that would make sense... Preston Badeer over 6 years ago