SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertical divide line / vertical rule

    I'm trying to apply a vertical divider line in my header, but I can't figure out how to do it.

    I tried borders, but they aren't tall enough.

    Is there a better way to make a vertical divider line / vertical rule that is always the full height of my header?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nope, can't be done... without a little sample code or a sketch, anyway.

    Would you mind posting something that we can use to posit a useful response. I feel sure something is possible.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Nope, can't be done... without a little sample code or a sketch, anyway.

    Would you mind posting something that we can use to posit a useful response. I feel sure something is possible.
    True, it would be beneficial to the community if I at least provided a sketch. Here is a sketch of the layout I am trying to achieve with the vertical rule pointed to.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    OK, a sketch was a dumb aid to suggest.

    If you will not post code, then how about some supporting information, such as:

    What determines the height of the header?

    What prevents you from using a vertical border on a contained block?

    The issue is obviously not as simple as the sketch suggests. Why not describe the requirements up front so we can at least offer better guesses?

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    First guess.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1013745-vertical-divide-line-vertical-rule
    Thread: vertical divide line / vertical rule
    2013.03.26 12:06
    team1504
    
    table-cells do the vertical-align:middle thing very easily,
    and you get your vertical border.
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .outer {
        width:90%;
        margin:0 auto;
    }
    .header {
        display:table;
        table-layout:auto;
        width:100%;
        background-color:#379185;
        border-bottom:4px solid #000;
    }
    .tcell {
        display:table-cell;
        width:1%;
        text-align:center;
        vertical-align:middle;
    }
    .tcell + .tcell {
        width:99%;
        border-left:4px solid #000;
    }
    img {
        display:inline-block;
        width:160px;
        height:100px;
        background-color:#aaa;
    }
    h1 {
        background-color:#faa;
    }
    .content {
        background-color:#add1cc;
        overflow:hidden;
    }
    
        </style>
    </head>
    <body>
    <div class="outer">
        <div class="header">
            <div class="tcell"><img src="#" alt="logo"></div>
            <div class="tcell"><h1>Title Title Title Title Title Title</h1></div>
        </div>
        <div class="content">
            <p>paragraph</p>
            <p>paragraph</p>
            <p>paragraph</p>
            <p>etc.</p>
        </div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help it is much appreciated!


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
  •