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?

That character is exactly what I was seeing in firebug

No am not getting confused I was only trying get to the heart of the matter as to why this was happening and now I see that the script tag because I had them indented I just backspaced them back and once I did that and reuploaded the page promptly broke using 110px. I just dont get why I could not see that as a problem. Or maybe just using Autokey has some risk. Aptana how do you specify the encodings when you save a page? If you know by chance. I found how to set the encodings thanks once again for heads up.

I noticed that but I could only assume that was from using But even changing to jquery-1.3.2.min.js it is still there.

I was noticing as a trying to develop this web page that I had in the style sheet what I thought was exactly the same as what I had in a duplicate style sheet. But upon close examination I noticed that one selector was different but was achieving the same result. the selector in question is this page #header { height: 110px } and on this page #header { height: 120px; margin: 0 0 5px; } if you try to make the 120 pixel page equal the 110px page it breaks and I was just wondering why? Everything else is the exact same.

I did not put one there initially because I thought z-index had to be positioned absolutely. Thanks for catching that. The squirrely look that I was refererring to uses the image sub_ver_bg.png I mistyped yesterday.

Why is when I change #nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover { background:#777777 none repeat scroll 0 0; color:#EEEEEE; } to background:url(sub_ver.png)repeat scroll 0 0; the navigation takes on another look?

Using the z-index solved the problem on the subhorlist and container.

I think I have did a better job of positioning, but the right side seems to be underneath the main headline part. Doesn't the selector left mean from the edge of the content? Ok with some more tweaking this is coming together. How can I make the navigation stay on top of the headline content?

I am trying to I trying position a series of div's inside of a single div with the biggest div being centered with the other smaller one surround the bigger div. The only result I keep getting is that the divs do not even want to line up. Is is possible for someone to point out the possible error. This is the demonstration page Ok i think I got this part figured out and I have changed the question to reflect the fact that the navigation goes underneath the headline content. How do I stop that?

thanks for tuts. Now take a look.