Frills

[Jerm993]

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

[Capt Otis]

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:

Hello

Then if you ran the javascript…

Code:

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

You would end up with

Code:

Hello Goodbye

Knowing that, can you think of a solution?

[Jerm993]

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?

[Capt Otis]

Could you show some code? Specifically css?

[Jerm993]

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:

• Portfolio
• About
• Blog
• Contact

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.

[Capt Otis]

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

[Jerm993]

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

[Author]

Posts