nfc212

If you intend to repeat that image vertically be aware there is a faint grey border to the lower edge which will be visible.

BTW your image is actually 30px high not 34px. So amend the CSS to: #page-background-left { position:absolute; background-color:#242424; top:0px; left:0px; width:50%; height:30px; } #page-background-right { position:absolute; background-color:#f1610a; top:0px; right:0px; width:50%;height:30px; }

I assume you are placing the image in the top of the main continer. If so try this add these two divs: <div id="page-background-left"></div> <div id="page-background-right"></div> And then this CSS: #page-background-left { position:absolute; background-color:#242424; top:0px; left:0px; width:50%; height:34px; } #page-background-right { position:absolute; background-color:#f1610a; top:0px; right:0px; width:50%;height:34px; }

It's easy enough to do. Sometimes we get caught up in the minutiae and miss the obvious.

Try this instead (box 2 / box 1) * 100 = box 3. At present it is 100 divided by 95, times 100 = 1.052631578947368 You need 95 divided by 100, times 100 = 95

Have a look at what Stu Nicholls has to offer over on CSS Play. http://www.cssplay.co.uk/menus/ Also try: http://www.cssmenus.co.uk/ That is another Stu Nicholls site. Note that for commercial use of the above a donation is required.

Which of the above posts are you referring to? One of them, all of them? It is handy to know which for others who may read this thread at a later date.

You can add some <hr> tags as so: <p>Some filer text</p> <hr> <p>Some other filler text</p> <hr class="blue-rule"> Then add the following CSS: hr { position: relative; margin-top: 10px; margin-bottom:10px; background: #1aaf12; height: 8px; border: none; } hr.blue-rule { position: relative; margin-top: 10px; margin-bottom:10px; background: #0034f6; height: 8px; border: none; } Also try this though it is a little iffy in IE hr { position: relative; margin-top: 20px; background: #c0c0c0; height: 2px; } hr:before { display: block; position: absolute; text-align: center; width: 1em; left: 50%; margin: -10px 0 0 -8px; content: "\2766"; font-size: 150%; padding: 0px 8px; background: white; color:#008000; }

It isn't helping that you have a stray </div> tag immediately behind the <img> tag. <div id="menubar"><ul> <li>Home<img src="images/divder.png" /></div></li>

If you mean is it possible to have source code display with syntax highlighting, then try this from CSS-Tricks. http://css-tricks.com/7663-make-a-view-source-button/

Try the GZip site then. gzip.org

Then running the page through Page Speed or something similar would be good. However ensuring the images you use are properly optimised is also a good method of reducing load time. I found a site not long ago that had a background image of nearly 2MB. GZipping would be a tinkle in the ocean compared to a mere 50% reduction on that.

You could try this .htaccess snippet from CSS-Tricks Active GZip Compression However GZip would have to be installed on the server. Contact your host or check your CPanel to find out if it is.

It's called Smooth Scrolling and there are lots of scripts about, mainly vertical but also horizontal as well. Here's one from CSS-Tricks Here's one that uses both vertical and horizontal on the same page. melissahie.com

This is something I've been playing with: http://www.mercury14-webdesign.co.uk/tests/bg-change.html This gives a choice of four background tiles which can be chosen either by the buttons or clicking on the thumbnails. The javascript is not mine. It comes from Christopher Heng's The Site Wizard. How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

To have the form data sent to you as an email without having the sender have to open an email client you will require a PHP, Perl script. There are many free scripts available for use. However you may want to try out the free version of Forms-to-go called Forms-to-go Lite. It is available from Bebosoft. It is a little hidden, look in the right hand column for the ones with (LITE) after them.

Try the following. Just copy and paste it into an editor like Notepad++ and run it. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RHP Hosting</title> <style type="text/css"> * { margin: 0; padding: 0; } body{ background-color:#f7f7f7; font-family:arial; } #header { position: relative; bottom: 140px; /* tweak this until it is in the right place */ font-family: arial; font-weight: bold; color:#fff; width:960px; } #header-logo { width: 50%; position: center; height: 85px; } #wrapper { width:960px; margin: 0 auto; } #header-tile { background: url(images/header_bg.png) repeat-x; height:134px; } #footer { background:#000000 url(path/to/your/footer/graphic.gif) repeat-x; height:40px; color:#fff; margin-top:20px; } #footer-wrapper { width:960px; margin: 0 auto; } #main-content { } #filler-text{ padding:20px; background-color:#fff; } /* upper and lower navigation */ #upper-nav{ list-style:none; margin-top:50px; font-size:12px; font-weight:bold; float:right; margin-right:50px; } #upper-nav li{ display:inline; margin-right:10px; } #upper-nav a:link, #upper-nav a:visited {color:#fff; text-decoration:none; } #upper-nav a:hover, #upper-nav a:active {color:#fff; text-decoration:underline; } #lower-nav{ list-style:none; padding-top:14px; font-size:12px; font-weight:bold; } #lower-nav li{ display:inline; margin-right:15px; } #lower-nav a:link, #lower-nav a:visited {color:#fff; text-decoration:none; } #lower-nav a:hover, #lower-nav a:active {color:#fff; text-decoration:underline; } </style> </head> <body> <div id="header-tile"><div id="header-logo" align="center"><img src="images/logo_small.png"></div></div> <!-- SPREADS ACROSS --> <div id="wrapper"> <!-- start wrapper --><!-- ALL CENTERED --> <div id="header"> <!-- start header --> <ul id="upper-nav"> <li><a href="#nogo">Home</a></li> <li><a href="#nogo">My Account</a></li> <li><a href="#nogo">Support</a></li> <li><a href="#nogo">Knowledgebase</a></li> <li><a href="#nogo">Forum</a></li> <li><a href="#nogo">About Us</a></li> </ul> </div> <!-- end header --> <div id="main-content"> <!-- start main content --> <p>all your main content and other DIVs go here...</p> <br> <p id="filler-text">In hac habitasse platea dictumst. Mauris rutrum enim vitae mauris. Proin mattis eleifend pede. Sed pretium ante sit amet elit. Quisque pede tellus, dictum eget, dapibus ac, sodales dictum, lectus. Pellentesque mi dui, molestie sit amet, adipiscing id, iaculis quis, arcu. Nulla tellus sem, viverra eu, ultricies ac, mattis et, velit. Maecenas quis magna. Ut viverra nisl eu ipsum. Maecenas rhoncus. Duis mattis nisi nec sapien. Nullam eu ante non enim tincidunt fringilla. Integer leo. Duis eget enim.</p> </div> <!-- end main content --> </div> <!-- end wrapper --> <div id="footer"> <!-- start footer --> <div id="footer-wrapper"> <!-- start footer wrapper --> <ul id="lower-nav"> <li><a href="#nogo">FORUM</a></li> <li><a href="#nogo">AFFILIATE PROGRAM</a></li> <li><a href="#nogo">DATA CENTER</a></li> <li><a href="#nogo">TERMS OF USE</a></li> <li><a href="#nogo">SITEMAP</a></li> <li><a href="#nogo">CONTACT US</a></li> </ul> </div> <!-- end footer wrapper --> </div> <!-- end footer --> </body> </html>

Then give the header its own wrapper.

Have a read of this. Ryan Fait = Sticky footer If using this technique margins need to be avoided.