crmamx Posted March 15, 2011 Share Posted March 15, 2011 I am trying to go back and clean up my site. This is a program to test css code. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>css testing</title> <style type="text/css"> /* ==================== Color Combos ======================================= #012A80 - dark blue #81A9FE - medium blue #C0D4FE - light blue */ /* ==================== colored box for text ============================== */ .box1 { float:left; width: 250px; margin: 5px; background-color: #c0d4fe; } .floatstop { clear:both; } /* ==================== no circles ============================== */ ul.a { list-style-type: none; } </style> </head> <h1>title</h1> <br /><br /><br /><br /> <!-- ================= addresses ========================================= --> <div class="box1"> <!-- colored box --> <ul class="a"> <li><strong>FLYING FIELD ADDRESS</strong></li> <li>15498 Lillie Lane</li> <li>Summerdale, Al</li> </ul> </div> <div class="box1"> <ul class="a"> <li><strong>MAILING ADDRESS</strong></li> <li>P.O. Box 297</li> <li>Robertsdale, Al 36567</li> </ul> </div> </p> <!-- ================= 4 colored boxes ================================== --> <p><small>Slow Stick says to set the CG 95-105 mm from the leading edge. What is that in inches? You are looking at a 7.5 cc engine. How does that compare to a .46 cu in? </small></p> <p><small>Wrinkles in your new plane? Here is an article I wrote on the Mike Johnson Way that will guarantee no wrinkles.</small></p> <p><small>Choosing a powerplant for a nitro plane isn't all that complicated. You need a .35, 46 or a .55 cu in. For the electric model the terminology gets intimidating. Here are some Selection Guidelines to help you get started.</small></p> <p><small>Have you oiled up your engine and put it in storage for the winter? If so then you are missing out on some great flying conditions. </small> </p> </body> </html> I know I need to clear the float after the addresses and before the paragraphs but I don't know how to do it. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 What did you try? Also I have sent earlier by mail a complete example (custom draw-ed!)on how the float and clear works. maybe have a look at that again. For the code above I can say, throw your editor away or pay attention to the errors it gives, because it's clearly happy with the fact that you are missing a <body> tag. Also there are some </p> there that don't haven a starting tag <p> Cleaning up code doesn't mean getting a digital chainsaw. Just a few tips, float is meant for block elements, and clear is meant for block elements too. Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 16, 2011 Author Share Posted March 16, 2011 Well, you just taught me something else. I should stop working on this after 10 PM. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 what i always did, when i first started with css, is make a sample page, and just try to play with a new property. If you mastered Floats and positioning, you mastered the hardest part of css. (aside of browser differences) if you can make the question mark i attached with block elements (like <div> <p> or anything with a display:block) you passed the float test. Happy to review your code if you did it. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted March 16, 2011 Share Posted March 16, 2011 You should almost ALWAYS be able to clear a set of block elements using overflow: hidden to the parent element. (you could also use clearfix but it's discouraged unless you HAVE to). If you don't have a parent element to clear the set of elements just use "clear: both" in the element that directly follows the floated elements. Here's 2 examples <ul> <li>float me</li> <li>float me 2 </li> </ul> In this example you could simply use. ul { overflow: hidden; } ul li { float: left; } To clear the floats. <ul> <li>Float me</li> <li>Float me too!</li> <li class="clear">Don't float me... clear me!</li> </ul> Here you can't use the parent to clear the floats so you have to default to clearing it on the next element. In this case, li.clear is being cleared. ul li { float: left; } ul li.clear { clear: both; } Clearfix is another great clearing tool but only under specific scenarios should anyone be REQUIRED to use it. When overflow: hidden; and clear: both; does the trick clearfix is unnecessary. Hope this helps. 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.