Grow your CSS skills. Land your dream job.

Frills

  • # June 23, 2010 at 8:39 am

    Hello Everyone, I’d like to start off by saying i suck at pretty much all jquery/javascript so if i’m way off just call me stupid. I worked out how to add ‘frills’ to the sides of my headers using this code:

    Code:
    $(document).ready(function() {
    $ (‘h2′).append(‘‘);
    $ (‘h2′).prepend(‘‘);
    });

    However, In my design i have the h2 tag as having an underline but not under the frills. When I reloaded the page all i could get was a mess or the frills underlined as well. Note that i’ve tried adding an id to the images to state no underline for them, I’ve also wrapped the heading in a div with an id of header and displaying it inline, that only caused the frills to be thrown to the top and bottom of the header.

    Any Suggestions?

    Thanks in Advance,
    Jeremy Carlsten

    # June 23, 2010 at 10:07 am

    Well .prepend and .append add whatever you want to where ever you specified. But they add them inside the tag you specify, not outside.

    Say you had

    Code:

    Then if you ran the javascript…

    Code:
    $(document).ready(function() {
    $ (‘#header’).append(‘ Goodbye’);
    });

    You would end up with

    Code:

    Knowing that, can you think of a solution?

    # June 23, 2010 at 6:31 pm

    Well might not be semantic but i suppose i could put empty divs on either side of the headers with an id of say frill and append one and prepend the other? just read your post and figured i would answer still havn’t tried it. Thanks

    Update- No go throws them to the left again, Is there a function like those that put them outside?

    # June 24, 2010 at 2:08 am

    Could you show some code? Specifically css?

    # June 24, 2010 at 6:36 am

    yeah, It’s almost a hundred lines long but heres the css for the page.

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    h2{
    font: normal 24px/18px ‘Yanone Kaffeesatz';
    text-decoration: underline;
    letter-spacing: 1.2px;
    text-align: center;
    }

    /* Background Styleing for Full Page Image */
    html, body, #bg, #bg table, #bg td {
    height:100%;
    width:100%;
    overflow:hidden;
    color: #fff;
    }

    #bg {
    position: fixed;
    }

    #bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
    }

    #bg td {
    text-align:center;
    vertical-align:middle;
    }

    #bg img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
    }
    /* End Background*/
    /* To Display Content on top of background */
    #cont {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
    width: 100%;
    }
    .box {
    padding: 53px 0 0 0;
    padding-bottom:100px;
    font: 12px/2.2 tahoma, Serif;
    }
    /* End Display Content */
    #logo {
    margin: 0px;
    color: #fff;
    border: 0px;
    font: 40px/50px ‘Yanone Kaffeesatz';
    }
    #tagline{
    float: right;
    margin: 60px 0 0 0;
    color: #fff;
    font: 40px/50px ‘Yanone Kaffeesatz';
    }

    #nav{
    float: right;
    margin:100px 0px;
    padding: 0px 0px;
    }
    #nav ul{
    list-style: none;
    }

    #nav ul li{
    padding: 23px 0 0 0;
    }
    #nav ul li a{
    padding: 0px 30px;
    display: block;
    color: #959595;
    font: bold 21px/30px tahoma,’Yanone Kaffeesatz';
    line-height: 46px;
    text-decoration: none;
    text-shadow: 12px 8px 5px #000;
    }
    #nav ul li a:hover{
    background:url(../images/hover.png) no-repeat;
    }
    #current{ background:url(../images/hover.png) no-repeat; }

    #project{
    margin: 10px 46px;
    }

    Pretty simple css I asume your looking for something that would cause them to be thrown over?

    The jquery is up top and here’s the html, There’s some junk in there from trying things im sure you can guess it.

    Code:
    < !DOCTYPE HTML>





    Web Designer, Geek, Musician

    Current Project

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    # June 28, 2010 at 9:34 am

    Actually a link would be better, have you tried using firebug?

    # June 30, 2010 at 8:18 am

    sorry no link yet it’s all offline, and yeah i know about firebug, although i don’t see how it pertains.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".