capnhud Posted May 25, 2009 Report Share Posted May 25, 2009 (edited) I am trying to add an icon to first link in header on this page. But it seems that no matter how I try to position the image it keeps repeating and is distorted. Is there a tutorial on how to do this. Css /* ---------- ---------- ---------- reset ---------- ---------- ---------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;} table {border-collapse:collapse; border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} q:before,q:after {content:'';} abbr,acronym {border:0;} /* TINY MCE RESET */ body.mceContentBody { text-align: left; color: #000; background: #ffffff url(); } body, html { background: transparent url(bkgrnd.png) repeat-x scroll 0 0; height:100%; } * html #bodywrapper { height:100%; } #bodywrapper { min-height:100%; height:auto!important; height:100%; margin: 0 auto -183px; width:960px; } #header { height:120px; margin:0 0 6px; } /*begin header links */ #interestlinks { background:transparent none repeat scroll 0 0; border:medium none; color:#f9f9f9; line-height:1.22em; right:350px; padding-top:15px; position:absolute; } #interestlinks li { display:inline; padding:10px; } #interestlinks a { color:#f9f9f9; text-decoration:none; border-right: 1px solid #f9f9f9; margin:0; padding-right:5px; } #interestlinks li#email { background-image:url(mail.png); } #search { } /*begin navigation of page */ #nav { background:transparent url(table.png) repeat scroll 0 0; font-family:Arial, Helvetica, Sans-serif; font-size:13px; font-style:normal; font-variant:normal; font-weight:bold; height:145px; line-height:1.2; margin:0 auto; width:960px; } #nav ul li { float:left; list-style-image:none; list-style-position:outside; list-style-type:none; width:120px; } #nav ul li a { background:transparent url(nav_image.png) repeat-x scroll -81px 100%; border-right:1px dotted #C2C2C2; color:#f9f9f9; display:block; height:26px; padding-top:12px; text-align:center; text-decoration:none; visibility:visible; } #nav ul li a:hover { background:transparent url(nav_image.png) repeat-x scroll -40px 0; } #nav ul, #nav ul ul li { margin:0; padding:0; position:relative; z-index:100; } #nav ul li ul { height:40px; left:-999em; position:absolute; top:38px; z-index:100; } #nav ul li:hover ul ul, #nav ul li.sfhover ul ul { left:-999em; } #nav ul li:hover ul, #nav ul li.sfhover ul, #nav ul ul li:hover ul, #nav ul ul li.sfhover ul { left:auto; } #nav ul ul.subhor-1item li { width:120px; z-index:100; } #nav ul ul.subhor-2items li { width:240px; z-index:100; } #nav ul ul.subhor-3items li { width:160px; z-index:100; } #nav ul ul.subhor-4items li { width:120px; z-index:100; } #nav ul ul ul li { clear:left; } #nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover { background:#777777 none repeat scroll 0 0; color:#EEEEEE; } #nav ul li a:hover { background:transparent url(nav_image.png) repeat-x scroll -40px 0; } #nav ul li ul li a:hover { background:transparent url(subver_bg.png) repeat scroll 0 0; color:#FFFFFF; } #nav li#contact { margin-right:-10px; } #nav li#contact a { border-right:0 none; } /* end of navigation */ /* this begins content */ #contentwrapper { background: transparent none repeat scroll 0 0; border-bottom: 1px solid #c2c2c2; border-left: 1px solid #c2c2c2; border-right: 1px solid #c2c2c2; height: 100%; padding-bottom:0; margin:-68px auto 0; width:958px; /* overflow:hidden; */ } /*main promotion content */ #promowrapper { height:366px; margin-top:-68px; margin-bottom:5px; position:relative; top:0; width:960px; z-index:1; } #promowrapper h2 { background:#a60000; font:normal 18px/1.22em Arial, Helvetica, sans-serif; color:#f9f9f9; text-align:center; } #promoleft { background: #a60000 none repeat scroll 0 0; height:300px; left: 10px; margin: 0 auto; padding:0; position:absolute; top:28px; width:180px; } #promolftcontent img { background-color:transparent; height:274px; padding:3px 0 0 1px; position: relative; width:179px; } #promomain { background:transparent url(headshadow.png) no-repeat scroll center top; height:366px; left:180px; padding-top:1px; position:relative; width:596px; z-index:5; } #simplegallery { margin-left:8px; margin-top:7px; position:relative; visibility:hidden; } #simplegallery .gallerydesctext { padding:1px 5px; text-align:left; } #promoright { background:#a60000 none repeat scroll 0 0; height: 300px; margin:0 auto; padding:0; position:absolute; right:12px; top:26px; width:180px; } #promorightcontent img { background-color:transparent; height:274px; padding:3px 1px 0 0; position:relative; width:179px; } /*end main promo content */ /*this begins the middle content */ #middlecontent { height:auto; margin:25px 0 0; padding-top:0; width:960px; vertical-align:top; overflow:hidden; } #middlecontent h3 { background-color:transparent; color: #a60000; font:normal 20px/1.22 Arial, Helvetica, sans-serif; padding-bottom:5px; } #middlecontent h4 { font:bold 14px/1.0em Verdana, Corbel, Sans-serif; color:#404040; background-color:transparent; padding-bottom:5px; } #leftmidcontent h3, #rightmidcontent h3{ height:17px; } #middlecontent p { text-align:left; padding:0; width:220px; margin:0 0 -140px; } #leftmidcontent { font-family:Verdana, Corbel, sans-serif; color:#404040; float:left; font-size:11px; margin:0 5px 0 10px; vertical-align:top; width:340px; height:180px; } #leftmidcontent img { float: right; border:1px solid #333; } #leftmidcontent, #mdlmdlcontent{ display:inline; } #mdlmdlcontent { background: transparent; border-left: 1px dotted #333; height: 180px; padding: 0 0 0 30px; width:190px; float:left; margin-left:5px; } #mdlmdlcontent img { margin: 0 auto; padding:10px 0; } #rightmidcontent { font-family:Verdana, Corbel, sans-serif; color:#404040; float:right; font-size:11px; border-left:1px dotted #333; vertical-align:top; width:340px; height:180px; padding:0 10px; } #rightmidcontent img { float: right; border:1px solid #333; } /*this ends middle content */ /* this begins bottom content */ .bottomctnt { background: transparent; height: 310px; padding:36px 0 15px; width:960px; } .bottomctnt h4 { background:url(h3bkgrnd.png) repeat scroll 0 0; height: 26px; color:#f9f9f9; font:normal 18px/1.2em Arial, Helvetica, sans-serif; padding:1px 0 0 5px; text-align:left; } .bottomctnt h5 { background:none; color:#940000; font: 600 14px/1.2 Verdana, Corbel, sans-serif; padding:0; text-align: center; } .bottomctnt p { background:transparent; text-align:justify; font:normal 11px/1.2em Verdana, Corbel, sans-serif; color:#404040; padding: 0 10px; margin: 0 auto; } #bottomfrst { float:left; padding-left:10px; width:220px; } #bottomfrst ul .news { background:transparent; padding:5px 6px; width:220px; font:normal 11px/1.22em Verdana, Corbel, sans-serif; color:#404040; } #bottomfrst a { background:none; color:#940000; text-decoration:none; font-weight:800;; } #bottomscnd { float:left; padding-left:20px; width:220px; } #bottomscnd img { border:1px solid #333; padding:0; margin:10px 4px; } #bottomthrd { float:left; padding:0 20px; width:220px; } #bottomthrd img { border:1px solid #333; padding:0; margin:10px 4px; } #bottomfrth { float:right; width:220px; padding-right:10px; } #bottomfrth img { border:1px solid #333; padding:0; margin:10px 4px; } /* things below are for the footer */ #push { height:183px; } #footer { background: transparent url(footer.png) repeat scroll 0 100%; height:183px; width:100%; } #ftrcontent { background:transparent; font:normal 12px/1.2em Arial, Helvetica, sans-serif; } #ftrnav { background:transparent none repeat scroll 0 0; border:medium none; color:#f9f9f9; line-height:1.22em; right:145px; margin-top:-31px; padding:15px; position:absolute; } #ftrnav li { display:inline; padding:10px; } #ftrnav a { color:#f9f9f9; text-decoration:none; border-right: 1px solid #f9f9f9; margin:0; padding-right:5px; } #footer p { text-align:justify; padding: 105px 0 0 160px; color:#f9f9f9; } Edited May 25, 2009 by capnhud Quote Link to comment Share on other sites More sharing options...
shelfimage Posted May 25, 2009 Report Share Posted May 25, 2009 Add the background to the : #interestlinks a { border-right:1px solid #F9F9F9; padding:0 5px 6px 0; color:#F9F9F9; text-decoration:none; } #interestlinks li#email a { background:transparent url(mail.png) no-repeat scroll 0 0; padding-left:34px; } Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 25, 2009 Author Report Share Posted May 25, 2009 (edited) I see I did not specify the anchor part. Amazing how a simple vowel could drive you up a wall. Thank you Edited May 25, 2009 by capnhud Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.