Useful Sites

Stu Nicholls offers CSSplay, a site with CSS examples, including many uses of :hoverCSSPlay

W3School includes many useful tutorials and examples on CSS.W3school

A demonstration of what can be accomplished visually through CSS-based design.CSS Zen Garden
free css html tutorial
Web Design Tutorials

Latest CSS Forum Discussion

Nav Images not showing in IE 6- Posted by: emrak
Please bare with me as I am more of a marketing and design guy than a css and coding guru. My site layout works fine in newer versions of IE and Firefox ( also did cross testing on browsershots and looks fine in the majority of browsers) . However for some reason in IE 6 and 5 the images that i...
CSS image in a div tag overlaps the border- Posted by: fadetoblack22
My problem is that my image on the left does not push the div container it is in like the text does. How do I make it do that? Image: http://i262.photobucket.com/albums/ii106/fadetoblack22/box.jpg *CSS:* .reviewbox { background-color: #D3D7DB; border: 1px solid #0C4A92; ...
how can i style this menu- Posted by: judge0
this the menu image Image: http://img89.imageshack.us/img89/2622/sidebar05oe4.jpg this the menu after my try (http://judge0.info/test1/Corporate%20Glass/) i deal with this menu as round corner technique but still not working with me
Help with CSS. Content / Perimiter different colors.- Posted by: Topfrog007
Hi Folks, I recently purchased a site. www(dot)dogsymptoms.org. In an effort to make it more user friendly I've decided to make the content area have a white background, while the perimeter area remains brown. I went through the CSS file and tried (one at a time) changing all the background color...
How to creat header tags with using CSS??- Posted by: edt123
Hi, Please can any one Help How to create Header Tags(H1, H2, H3, ......) Using CSS??? Regards EDT123
My site has a hand full of IE6 fixes - RE help- Posted by: mikeyd
I got a fright when i saw IE6 on my bosses laptop and now I have to figure out how to fix a few problems Site not centred in the browser One div is pushing the other down Flash not loading using swfobject.js pngs not transparent using ie6fix.js got a screener of my site in IE6 Image:...
How to set tab size in and <PRE></a>- <span style="font-style:italic;color:green;">Posted by: wanttoknow</span><br>Hi, I searched the webs and found nothing about this. Is this possible to set tab size in <TEXTAREA> and <PRE>? Any help will be appreciated.</li><li style="padding-top:10px;"><a href="http://forums.digitalpoint.com/showthread.php?t=1114538&goto=newpost" target="_blank">Vertically and Horizontally Center (Text)</a>- <span style="font-style:italic;color:green;">Posted by: inventivenerd</span><br>Dear Friends, I am pretty much new in CSS platform. Can anybody please help me regarding putting text vertically and horizontally center in a row ? by using DIV Waiting for replies. Regards John</li><li style="padding-top:10px;"><a href="http://forums.digitalpoint.com/showthread.php?t=1114456&goto=newpost" target="_blank">div problem</a>- <span style="font-style:italic;color:green;">Posted by: dizyn</span><br>if i use following code its creates problem I want it like: Radio button then text, radio button then text etc Code: --------- <style type="text/css"> #outpsp{margin:0px auto; width:330px;padding:2px;background:#FFE5E5;border: 1px solid #FFB2E5;}</li><li style="padding-top:10px;"><a href="http://forums.digitalpoint.com/showthread.php?t=1113976&goto=newpost" target="_blank">Accessability. Alt Text for a header image.</a>- <span style="font-style:italic;color:green;">Posted by: pictureboarduk</span><br>Hi everyone, I'm placing a logo in the header section of my site, but am having trouble adding the Alt Text for accessibility. This is the code as it is: ---Quote--- .thrColLiqHdr #header { background: #000000;</li></ul> </p> <div class="clear"></div> <hr /> <p> <a href="http://www.webmaster-talk.com/" target="_blank"> <img style="float:right;" src="images/wmt.gif" title="Powered by Webmaster-Talk" alt="Powered by Webmaster-Talk" width="250px" height="143px"> </a> <ul style="padding-right:5px;"><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160735-three-pixel-text-jog.html" target="_blank">three pixel text jog</a>- <span style="font-style:italic;color:green;">Posted by: oceankid</span><br>I have some text that I have placed in a div floated left... The text outsite wraps around it. The problem I'm having is I'm getting this stupid 3 pixel text jog error. I don't want to use any hacks... Is there a way to fix this so that I don't get this error and still have my text wrap around the div? Thanks</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160640-whats-wrong-with-my-div-layout.html" target="_blank">What's wrong with my div layout?</a>- <span style="font-style:italic;color:green;">Posted by: HWolfpack6</span><br>*I am new to divs, so any suggestions on how to do certain stuff would be very helpful* Image: http://img149.imageshack.us/img149/6167/layoutcopyil6.gif That's basically what I'm looking for. Here's my code. Code: --------- /*******************LAYOUT*******************/ /*********CONTAINER*********/ #container { width: 800px; margin: 50px 0px auto; background-color: #feffe9; } /*********LINKS*********/ #links { position: absolute; top: 0px; left: 0px; width: 800px; background-color: #FF0000; } /*********HEADER*********/ #header { position: absolute; top: 84px; left: 0px; width: 800px; background-color: #CC9900; } /*********CONTENT*********/ #content { position: absolute; top: 260px; left: 0px; width: 550px; background-color: #FFFF00; clear: both; } /*********LINKS-RIGHT*********/ #linksright { position: absolute; left: 550px; width: 250px; background-color: #00FF00; clear: none; } /*********ADVERTISERS*********/ #advertise { position: absolute; left: 550px; width: 250px; background-color: #0000FF; clear: none; } /*********CONTAINER*********/ #copyright { position: absolute; top: 750px; left: 0px; width: 800px; background-color: #993399; } /*******************END LAYOUT*******************/ --------- And the HTML: HTML: --------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <link href="home.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="links"> </div> <div id="header"> </div> <div id="content"> </div> <div id="linksright"> </div> <div id="advertise"> </div> <div id="copyright"> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-139461-1"; urchinTracker(); </script> </body> </html> --------- </li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160598-divs-not-stetching.html" target="_blank">Divs not stetching.</a>- <span style="font-style:italic;color:green;">Posted by: Mwiff</span><br>I can't seem to get my navigation bar on the left to stretch along with the content on the right. Whenever one of them is longer than the other, the shorter one wont stretch. link: http://halolegacy.com/test/testing2.php I did a search and everything and still couldnt find an answer. Maybe I just made a really dumb mistake but any help is much appreciated.</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160539-vertical-aligning.html" target="_blank">vertical aligning</a>- <span style="font-style:italic;color:green;">Posted by: Skeddles</span><br>I have a <td>, and inside it I have tow <div>s. I want one to align to the top, one to align to the bottom. Right now the <td> has vertical-align:top, so they both go to the top.. Any tips? Here's the page if you want to look at it: http://skeddles.com/v4/</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160528-new-problem-text-on-image-image.html" target="_blank">New Problem - Text On Image On Image</a>- <span style="font-style:italic;color:green;">Posted by: JustAGuy</span><br>If you take a look at the page I am working on HERE (http://vance.thebams.org/cbs/index.html), and look at the "left" column, you will find 3 boxes. This column is made up of a background image that repeats to fill this particular column. Then I have the boxes as an image on top of the background image. What I am trying to do is figure out how I can add text to the boxes. I would like to be able to put text in the dark blue bar of the box with other text in the light blue box, but I have no clue as to how to do this. Nothing I have tried works - which usually means I have done something wrong. If one of the experts here could take a look at this and explain to me what I did wrong and how I can fix this, it would be greatly appreciated. Thanks</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160522-floating-images.html" target="_blank">Floating Images</a>- <span style="font-style:italic;color:green;">Posted by: smacs2080</span><br>Hello, I am trying to have text wrap around an image that will float right but stay at the bottom of my page. I am using Dreamweaver CS3. I am by no means a developer. I am creating a liquid web page and want an image to anchor the bottom right of the page will still allowing text to wrap around it. Is that possible? I have found out how to right align it, I just can't get it to stay at the bottom. Thanks in advance, Sue:confused:</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160509-css-ie-firefox-issues-menu-bar.html" target="_blank">CSS IE and Firefox Issues - Menu Bar Alignment Issues</a>- <span style="font-style:italic;color:green;">Posted by: alodus</span><br>www.cornishpastyco.com Ive been tweaking and playing with margin and padding styles forever and I cant get all the pages on the site to line up accordingly. There are different elements on each page that could be affecting the menu/link bar on the left's positioning in all browsers. I think it def has to do with the margin padding incompatibility of IE and Firefox etc. Help?!! Please?!?! the first four pages (home, news, menu, reviews) line up in both IE and Firefox so far. The rest are all over the place..... alodus@gmail.com - Me</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160499-centering-images-in-divs.html" target="_blank">Centering images in divs</a>- <span style="font-style:italic;color:green;">Posted by: shonkyboy</span><br>Hi - sorry for asking this as im sure its been asked before - cant find it thogh. Centering an inage in a div - the old way was <div align=center> what is the best way to do it with css? I think i tried creating a class with text align=center and it doesnt seem to work. What is best practice for this? Many Thanks</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160450-padding-margin-playing-havoc-ie7-why.html" target="_blank">Padding/Margin Playing Havoc with IE7 - Why?</a>- <span style="font-style:italic;color:green;">Posted by: JustAGuy</span><br>I am putting together a page where I am using margin/padding to offset a list. It looks fine in Opera & Firefox, but it's playing havoc in IE7. Unfortunately I lack the knowledge and/or experience to figure out how to fix it. The page can be seen HERE (http://vance.thebams.org/cbs/index.html). The problem seems to be on line 161 (ul li {margin-right: 40px;}). It's my best guess, because of the margin, it throws off my "mid3" <div> and "right" <div> and I have no clue as to how to fix this. If any of the experts here would be so kind as to suggest what I did wrong and how I can fix it, I would greatly appreciate it. Many thanks</li><li style="padding-top:10px;"><a href="http://www.webmaster-talk.com/css-forum/160424-layout-problems.html" target="_blank">Layout Problems</a>- <span style="font-style:italic;color:green;">Posted by: samo1215</span><br>I am trying to create a site with 6 pages. Right now I'm working on the master template/style sheet and am having several layout issues. I want all of the pages to be 950px wide and centered across the page. The same header image and horizontal navigation bar will appear on each page. Below that I want a content area that will be able to expand depending on the amount of content and footer. The first issue I'm having is that my content area keeps sliding up below my header image so that it is effectivly under the nav bar. The second problem is I want the content area to expand so together with the footer it will fill the whole page vertically even if there isn't enough content to normally make it do this. Below you will find the code I have so far. Any help would be greatly appreciated. *HTML* Code: --------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <title>Atwahl - Home</title> <link rel="shortcut icon" href="/favicon.ico" /> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="pagecontainer"> <div id="header"> </div> <div id="navcontainer"> <ul id="nav"> <li id="home"><a href="index.html" rel="tag">Home</a></li> <li id="about"><a href="about.html" rel="tag">About Us</a></li> <li id="properties"><a href="properties.html" rel="tag">Properties</a></li> <li id="landgroup"><a href="landgroup.html" rel="tag">Land Group</a></li> <li id="foundation"><a href="foundation.html" rel="tag">Foundation</a></li> <li id="contact"><a href="contact.html" rel="tag">Contact Us</a></li> </ul> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html> --------- *CSS* Code: --------- /* Company STYLE SHEET */ /* GENERAL DCOUMENT SETTINGS */ body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td { margin: 0; padding: 0; outline: none; } html { min-height: 100%; } body { min-height: 100%; background-color: black; } .clear { clear: both; padding: 0px; margin: 0px; } /* LAYOUT */ #pagecontainer { width: 950px; margin: 0 auto; height: 100%; } #header { background-color: red; background-image: url(images/logo.gif); height: 165px; } #navcontainer { float: left; text-align: center; } #content { background-color: green; min-height: 400px; } #footer { background-color: yellow; height: 60px; } /* NAVIGATION */ ul#nav li { display: block; float: left; list-style-type: none; } ul#nav li a { display: block; outline: none; width: 158px; height: 70px; background: transparent url(images/nav.png) no-repeat 0 0; text-indent:-9009px; /*margin: 0 40px 0 0; */ } ul#nav li a:hover { background-position:0 -70px } ul#nav li#about a { width: 158px; background-position: -158px 0; } ul#nav li#about a:hover { background-position: -158px -70px } ul#nav li#properties a { width: 158px; background-position: -316px 0; } ul#nav li#properties a:hover { background-position: -316px -70px } ul#nav li#landgroup a { width: 158px; background-position: -474px 0; } ul#nav li#landgroup a:hover { background-position: -474px -70px } ul#nav li#foundation a { width: 158x; background-position: -632px 0; } ul#nav li#foundation a:hover { background-position: -632px -70px } ul#nav li#contact a { width: 158px; background-position: -790px 0; } ul#nav li#contact a:hover { background-position: -790px -70px } --------- </li></ul> </p> <hr /> </div> </div> <br class="clear" /> <div id="footer"> <p style="text-align:center;">All content copyright © 2006-2008 <a href="/index.php">CSSTutor.info</a>, all rights reserved. <br> Layout created at <a href="http://cssweblayouts.com" target="_blank">CSSWebLayouts</a><br /> </p> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-188610-14"; urchinTracker(); </script> </div> </body> </html>

CSS Tutor Resources from CSSTutor.info

Categories

Useful Sites

Latest CSS Forum Discussion