- This topic is empty.
-
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 Carlstenyeah, 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:
Jeremy Carlsten
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.
- The forum ‘JavaScript’ is closed to new topics and replies.
