capnhud

For a large background you could take a look at this tutorial

I see I did not specify the anchor part. Amazing how a simple vowel could drive you up a wall. Thank you

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; }

I came to the same conclusion when I woke up this morning. Only this time I started with a background and footer to begin with and will continue from there. I did not know min-height could only be used once. Thanks for the information.

Unless I am missing something I have followed everything on this page And the paragraph tag is at the very bottom. So what did I obviously not read. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td { [b]margin:0; padding:0;[/b] } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0 none; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; } caption, th { text-align:left; } q:before, q:after { content:''; } abbr, acronym { border:0 none; } body.mceContentBody { background:#FFFFFF url() repeat scroll 0 0; color:#000000; text-align:left; } body, html { background:transparent url(bkgrnd.png) repeat-x scroll 0 0; [b]height:100%; overflow:inherit;[/b] } #bodywrapper { [b]margin: 0 auto; min-height:100%; width:960px;[/b] } * html #bodywrapper { [b]height:100%;[/b] } #header { height:120px; margin:0 0 6px; } #nav { background:transparent url(table.png) repeat scroll 0 0; font-family:Arial, Helvetica, Sans-serif; font-size:13px; font-size-adjust:none; font-stretch:normal; 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; } #contentwrapper { background:transparent none repeat scroll 0 0; border-bottom:1px solid #C2C2C2; border-left:1px solid #C2C2C2; border-right:1px solid #C2C2C2; min-height:100%; position:relative; width:958px; margin:0 auto; } #headlinewrapper { height:358px; margin:-95px auto 0; position:absolute; top:26px; width:960px; z-index:1; } #leftheadline { background:#940000 none repeat scroll 0 0; height:300px; left:10px; margin:0 auto; padding:0; position:absolute; color:#f9f9f9; top:26px; width:180px; } #leftcontent img{ background-color:transparent; height:275px; padding:10px 0 15px 15px; position:relative; width:165px; text-decoration:none; color:#f9f9f9; font:normal 11px/1.2 arial, helvetica, sans-serif; } #rightheadline { background:#940000 none repeat scroll 0 0; height:300px; margin:0 auto; padding:0; color:#f9f9f9; position:absolute; right:10px; top:26px; width:180px; } #rightcontent img{ background-color:transparent; height:275px; padding:10px 15px 15px 0; position:relative; width:165px; text-decoration:none; color:#f9f9f9; font:normal 11px/1.2 arial; } #headlinecontainer { background:transparent url(headshadow.png) no-repeat scroll center top; height:358px; left:186px; padding-top:1px; position:relative; width:588px; z-index:5; } #simplegallery { margin-left:4px; margin-top:3px; position:relative; visibility:hidden; } #simplegallery .gallerydesctext { padding:2px 5px; text-align:left; } /*This the middle content styling */ .middlecontent { background: transparent; height: 170px; position: relative; top:315px; width: 960px; } #leftmdlcontent { background: transparent; border:none; color:#404040; padding: 0 10px; width:340px; } h4.midcaption { font-family:Verdana, Corbel, sans-serif; font-size:14px; text-align:left; padding:0 0 3px 0; } h3.midheadline { background:none; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#940000; padding: 0 0 5px 0; text-align:left; } p.midcontdesc { font-family:Verdana, Corbel, sans-serif; background-color:transparent; color: #404040; text-decoration:none; word-spacing: normal; text-align:justify; letter-spacing: 0; line-height: 1.25em; font-size: 10px; width:220px; } .middlecontent img { float:right; padding:0; border:1px solid #333; margin: -48px 0 0 10px; } #mdlmdlcontent a { background: transparent; border-left: 1px dotted #333; height: 170px; padding: 0 0 0 12px; position: absolute; right: 395px; top: 0; width:190px; } #mdlmdlcontent img { position:relative; margin: 0 auto; top:0; } #rightmdlcontent { background: transparent; border-left: 1px dotted #333; color: #404040; padding: 0 10px; position: absolute; right: 0; top: 0; width: 340px; } /* End of middle content styling */ /* This is the beginning of the bottom content */ .bottomctnt { background: transparent; height: 245px; position: relative; top:345px; width:960px; } .bottomctnt h3 { background:url(h3bkgrnd.png) repeat scroll 0 0; height: 26px; color:#f9f9f9; font:normal 20px/1.2em Arial, Helvetica, sans-serif; padding:0 0 0 5px; text-align:left; } .bottomctnt h4 { height: 18px; color:#f9f9f9; font:normal 20px/1.2em Arial, Helvetica, sans-serif; padding:5px 5px; text-align:center; } .bottomctnt h5 { background:none; color:#940000; font: normal 14px/1.2 Verdana, Corbel, sans-serif; padding:5px 5px; text-align: center; } #bottomfrst { left:10px; position:relative; 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; } #bottomscnd { left:250px; margin: -334px auto 20px; position:relative; width:220px; } #bottomscnd img { border:1px solid #333; padding:0; margin:10px auto; } /* This begins the footer section */ #footer{ background:transparent url(footer.png) repeat scroll 0 100%; [b]height:183px; margin:-183px auto 0;[/b] font:normal 11px/1.2 arial, helvetica, sans-serif; color:#f9f9f9; } #footer p { text-align:justify; margin:105px 160px 0; } #ftrnav { background:transparent none repeat scroll 0 0; border:medium none; color:#f9f9f9; line-height:1.22em; right:125px; margin-top:-31px; padding:15px; position:absolute; } #ftrnav li { display:inline; padding:15px; } #ftrnav a { color:#f9f9f9; text-decoration:none; } p { [b]padding:0 0 183px;[/b] }

Rays tutorial indicates to do it one way I try that, but the footer stays stuck in the middle I try your way I get a big gap like what is showing now. So I am not understanding when you say I cannot do it two when I am only trying to do one way.

When you said that I was like what is he talking about the link is at the beginning of the thread, but I see I messed that up also here is the page

I wish that would have worked but that does not either.

This looks like it should work but for reason when I set the content wrapper to 100% it shrinks immensely instead of expand to hold the content.

I tried to make it so that the contentwrapper and the footer would always meet no what content was in the content wrapper, but now all I get it is the repeating up the page. The only that I have made it so that they meet is that I have to indicate the height of the contentwrapper and then add negative margin to footer so they meet. I am sure that is not the correct way to do that. Is there a tutorial something that can help out with this situation?

ROFL. No I think the way that I am going about this is not good, but as you have indicated it works. Which is ok for now. I am finding as I am learning css I just create a box and see how to move it the best I can. Thanks for pointing out errors that are on the page. I had not even check to see if there were any and I know when you are having problems first validate. But once I changed the left and right content to anchors that would work the images no longer sit in the background correctly. No matter how much a play with the padding.

I have set up a footer to have a repeating image in the background. Which looks ok on a 17" monitor, but when I look at the page on a 21" monitor I can see a scroll bar in IE7 and the text is outside the content frame how do I stop that on this page?

in my head I thought had labeled that headlinecontainer. So I did not realize what you were talking about. Ok the changes were made.

Do you mean header?