Skip navigation
Erik Arckens
Erik Arckens
Currently Being Moderated

css style rule question

May 1, 2009 10:37 AM

Hi,

I would like to make a <h1> and <h2> style rule to obtain the effect voor my headers as can be seen here: http://www.ecstechnics.com/modules/page.phtml?dimensionid=17&pageid=23

 

The main header style rule (<h1>) I can make easily I think: just apply the correct font style and that is it.

 

But for the <h2> header, I need a colored line that extends the width of my liquid main content container, except if it is interfered by a floating image. Example on the same site: http://www.ecstechnics.com/modules/page.phtml?dimensionid=24&pageid=37

The line extends for a certain width (preferably that of my liquid container, if not a fixed width), but if an image or other object interferes, I would like it to shorten correspondingly.

 

Is that possible? Any hints please?

 

Thank you!!

Erik

769 Views   9 Replies   Latest reply: Erik Arckens, May 2, 2009 8:56 PM
 
Replies
  • Randy Edmunds
    Currently Being Moderated
    1. Randy Edmunds,
    May 1, 2009 10:37 AM   in reply to Erik Arckens
    Report

    I think that's a "border-bottom".

     

    Randy

     
    |
    Mark as:
  • Lawrence_Cramer
    Currently Being Moderated
    2. Lawrence_Cramer,
    May 1, 2009 10:53 AM   in reply to Erik Arckens
    Report

    You could use something like this...

     

    h2 {
        font-size: 18px;
        font-weight: normal;
        color: #666;
        margin-bottom: 2px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #B90000;
    }

     

     

    Lawrence   *Adobe Community Expert*
    www.Cartweaver.com
    Complete Shopping Cart Application for
    Dreamweaver, available in ASP, PHP and CF

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    May 1, 2009 10:55 AM   in reply to Erik Arckens
    Report

    CSS:

     

    .short {

         border-bottom: 1px solid red;

         width: 400px;

    }


    .wide {

         border-bottom: 1px solid red;

         width: 100%

    }

     

    HTML:

     

    <h2 class="short">This is short</h2>
    <h2 class="wide">This is wide</h2>

     

     

    Does this help?

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/
    www.twitter.com/altweb

     
    |
    Mark as:
  • Erik Arckens
    Currently Being Moderated
    4. Erik Arckens,
    May 1, 2009 11:03 AM   in reply to Nancy O.
    Report

    Thanks for all these very usefull replies.

     

    From what I read, there is no way for the line under the header to automatically adjust according to the available space...

     

    In that case, I will use the option "short" and "wide"...

     

    Erik

     
    |
    Mark as:
  • Randy Edmunds
    Currently Being Moderated
    5. Randy Edmunds,
    May 1, 2009 1:39 PM   in reply to Erik Arckens
    Report

    From what I read, there is no way for the line under the header to automatically adjust according to the available space...

     

    Not necessarily. The H1 and H2 tags are block-level tags which automatically expand/shrink to fill the space available, so I think all you need is the border-bottom.

     

    You should open the page that you want to emulate in a browser and then use View > Page Source (in Firefox) to see how they did it.

     

    HTH,

    Randy

     
    |
    Mark as:
  • Erik Arckens
    Currently Being Moderated
    6. Erik Arckens,
    May 1, 2009 10:31 PM   in reply to Randy Edmunds
    Report

    Oh great!!

    Good to read this.

     

    So <h1> and <h2> are block level tags; <h3> and further are not block level tags?

     

    I already changed the styles and will be experimenting today. Checking this other site I refered to above http://www.ecstechnics.com/modules/page.phtml?dimensionid=17&pageid=23 I find they use tables (horrible!) and for the underlined title a <p class="contentarticletitle"> type styling is used. Not exactly what I want to do.

     
    |
    Mark as:
  • Erik Arckens
    Currently Being Moderated
    7. Erik Arckens,
    May 2, 2009 3:51 AM   in reply to Erik Arckens
    Report

    Experimenting with this rule gives following problem:

     

    When making an image float to the left, and writing an <h2> tag next to it makes the line defined in bottom-border go thru (underneath) the image floated left IF I use the .short tag. Using the .wide tage just makes the whole line wide, thru the image. This is using this style on a <h2> tag.

     

    The only difference between the .short and the .wide is the line length specification: the first is a fixed number of px, the second is 100%

     

    I want the <h2> tag with fixed line length to float to the right of an image at the left.

     

    How can I solve this?

     
    |
    Mark as:
  • Mark A. Boyd
    Currently Being Moderated
    8. Mark A. Boyd,
    May 2, 2009 9:35 AM   in reply to Erik Arckens
    Report

    You could add a margin. This example assumes the floated image is 400px wide and give it 20px gutter space.

     

    .short {

      border-bottom: 1px solid red;

      width: 400px;

      margin: 0 0 0 420px;
    }

     

    To have the bottom border extend all the way to the right of its container, just delete the width property.

     

     

    --
    Mark A. Boyd
    Keep-On-Learnin' :-)

     
    |
    Mark as:
  • Erik Arckens
    Currently Being Moderated
    9. Erik Arckens,
    May 2, 2009 8:56 PM   in reply to Mark A. Boyd
    Report

    Oh great!! So I need to make this .shortright rule you mentioned in your other reply...

     

    Thanks a lot!

    Erik

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points