Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Brain fried... need creative H3 solution

    I have a site that I am developing and I want to create a good way to display this H3.

    What I'm looking to accomplish: the text needs no (transparent) background, while the rest of the area on the right preferably will have the repeating yellow stripes.

    Issues I'm facing: Each h3 title will have a different length, so my issue is adjusting the yellow stripes background via css to adjust/move with the type/title.

    Is there a way to do this with css?
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post a link to your page so that we'll get a glance at what you've at your end.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    IMHO, this is only possible with use of extra-markup…

    Something of the kind
    Code:
    <h3 class="hdr"><span class="hdr-text">HISTORY</span><span class="hdr-bg">&nbsp;</span></h3>
    Code:
    .hdr {
        display:table;
        width:100%;
    }
    .hdr span {
        display:table-cell;
    }
    .hdr-text {
        padding-right:10px;
        white-space:nowrap;
        width:1%;
    }
    .hdr-bg {
        background:red;
    }
    This will not work in IE6,7 though.
    Last edited by Amphiluke; 11-19-2011 at 10:33 AM.
    I am still learning English

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    And the following seems to be a cross-browser solution.

    Code:
    <h3 class="hdr">HISTORY<span class="hdr-bg">&nbsp;</span></h3>
    Code:
    .hdr {
        overflow:hidden;
        white-space:nowrap;
        _width:100%;
    }
    .hdr-bg {
        background:red;
        display:inline-block;
        margin-left:10px;
        width:100%;
    }
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    boogily (11-21-2011)

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there boogily,

    this example is the CSS3 method but, as yet, will only work in modern gecko and webkit browsers...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>CSS3 - display:box, box-orient, box-flex</title>
    
    <style type="text/css">
    body {
        font-family:arial,sans-serif;
        font-size:16px;
        background:url(gradient.jpg);  
     }
    h1,h2,h3,h4,h5,h6 {
        width:100%;    
        font-size:100%;
        color:#fff;
        box-shadow:#000 10px 10px 20px;
     }
    h1,h2,h3,h4,h5,h6,.text,.background {
        display:-moz-box;
        display:-webkit-box;
        -moz-box-orient:horizontal;
        -webkit-box-orient:horizontal;
     }
    .text {
        padding:5px;
     }
    .background { 
        -moz-box-flex:1;
        -webkit-box-flex:1;
        background:url(diag_stripe.jpg); 
        background-position:right center;   
     }
    </style>
    
    </head>
    <body>
    
    <h1>
    <span class="text">Philosophy</span>
    <span class="background"></span>
    </h1>
    <h2>
    <span class="text">Physics And Chemistry</span>
    <span class="background"></span>
    </h2>
    <h3>
    <span class="text">History</span>
    <span class="background"></span>
    </h3>
    <h4>
    <span class="text">Geography</span>
    <span class="background"></span>
    </h4>
    
    </body>
    </html>
    
    Further reading:-

    coothead

  • Users who have thanked coothead for this post:

    boogily (11-21-2011)

  • #6
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Thanks guys. Boy I can't wait until CSS3 is more cross-browser
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •