I want to put an h1 heading inline with a paragraph. I have given each a class of display: inline;. It works, but it left-aligns the paragraph and I need it to be justified. If I surround them both in a div then it fixes the problem, however I would prefer not to have to do that. Anyone know of a work-around for this problem? Thanks, ewwatson@gmail.com
Hi, Why do you want to place an H1 element (which is used as the page title in the body copy since it's the top-most heading on the page) inline with a paragraph? If you can post your code, or better yet a link to your page, I'll be able to help you out better.
Here is the link to the page - http://www.buildingblockshomedaycare.com/index.html As you can see there is really no heading on this page, so I would like to make the first sentence an h1. I can do it by giving the h1 and the p tag a class of display: inline; but it left aligns it and I need it to be justified. If you surround them in a div this will solve the problem, but I would rather not have to do that. I tried to place the code but it left it out of the post. Is there a way to place code in posts. Thanks alot
Start by adding this to the very top of your Web page: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> Code (markup): Now, you see this? <p><img src="images/home.gif" width="349" height="55"></p> Code (markup): I'd replace that with this: <h1>Home is where the heart is.<span></span></h1> Code (markup): And then do this: http://www.sitepoint.com/article/header-images-css-xhtml That way you'll have your heading without changing the layout of your site much.
Wow, that sitepoint method has to be some of the fattest bloat I've seen for doing that (at least on the user centric one - the 'XHML centric' one I'd never use since it doesn't gracefully degrade) - but then it is a 2003 article. Also, their CSS is designed to work with the order the other way, span then content - I prefer to reverse it as you did so that if I decide to use sliding doors instead for some sort of tab, I can. with this html: <h1><span></span>Home is where the heart is.</h1> Code (markup): I'd use this css: h1 { position:relative; overflow:hidden; /* deal with gecko resizing text content like a sweetly retarded epileptic crack addict */ text-align:center; font:normal 24px/55px arail,helvetica,sans-serif; } h1 span { position:absolute; background:url(images/home.gif) 0 0 no-repeat; } h1, h1 span { width:349px; height:55px; } Code (markup): Glider Levin and it's kin - two-thirds the CSS AND this approach does NOT need the IE specific hack to work. If you put the span after the text thus: <h1>Home is where the heart is.<span></span></h1> Code (markup): You need to add 'top:0; left:0;' to 'h1 span'
By the way, I did not build this site, www.buildingblockshomedaycare.com I am only trying to clean it up. Thanks for the advice guys, however, I have other pages that this will not work for (i.e. no images on the page). Is there any other way to do what I want with the h1 tag and also make it justify? Thanks
Just spent two minutes trying to figure out why a single page would be so complex - duh, I browse with plugins disabled, so that flash menu didn't show up. (which is why one should NEVER make navigational elements be flash, or if you use flash have an option to navigate the page some other way as well) As to the code, you've got a LOT of 'cleaning up' to do - my advice would be to chuck the whole thing and start over from scratch, it would be FASTER than trying to clean up that non-semantic table hell. (taking an axe to the presentational flash while at it). 7k of HTML for 2k of content, something's not kosher. Inlined CSS, table for a page that only has one column (ok, two if you count the flash that didn't even load here), etc, etc. For example, in just two minutes I rewrote the home page's HTML to this: <!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" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>Template</title> </head><body> <div id="container"> <h1>Building Blocks Home Daycare<span></span></h1> <div id="topFlash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="139" > <param name="movie" value="images/intro.swf"> <param name="quality" value="high"> <embed src="images/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="139" ></embed> </object> </div> <div id="sideBar"> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Learning & Fun</a></li> <li><a href="#">Meals & Snacks</a></li> <li><a href="#">Play Time</a></li> <li><a href="#">Daily Schedule</a></li> <li><a href="#">Photo Gallery</a></li> </ul> <ul id="subMenu"> <li><a href="#">Parents</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Cleanliness</a></li> <li><a href="#">Handbook</a></li> <li><a href="#">Prices/Hours</a></li> <li><a href="#">Enrollment</a></li> <li><a href="#">Map/Directions</a></li> <li><a href="#">Contact Us</a></li> </ul> <div id="license"> License # 376612912<br /> Community Care Licensing </div> </div> <div id="content"> <div class="contentTop"><div></div></div> <div class="contentMiddle"> <h2 id="h2HomeHeart">Home is where the heart is.<span></span></h2> <p> Welcome to Building Blocks Home Daycare. We offer childcare for children ages three months to five years old. Our goal is to provide a fun and safe learning environment for your child, while encouraging social, emotional, intellectual, and physical development. Your child will receive quality personal and individualized care in a warm and loving home, where they can feel safe and happy and can begin to build confidence and a positive self image. </p><p> Our home is designed to provide both a nurturing home atmosphere along with large dedicated areas for the children to actively learn and play in; a stimulating environment with spacious rooms rich in color giving each child an exciting world full of opportunities to explore, learn, and grow. Furthermore, we maintain a low teacher to child ratio. Therefore, your child will receive the kind of close attention he or she deserves, nurturing a foundation for development and helping to enable your child to reach their full potential. </p><p> We have a large fully fenced, child friendly backyard, equipped with fun and safe playing equipment. We also participate in the CDA Nutrition Program, providing well balanced nutritious meals and snacks to your child. For children of all ages we incorporate lots of fun activities into their daily schedule that include arts and crafts, free-play, structured-play, music, song and dance, painting, coloring, various creative and educational projects, and much more. Additionally, for children ages two through five, we offer a structured preschool curriculum. Because of these points, we feel we are able to provide the best of both worlds (learning and fun, all in one). </p><p> Our home daycare meets all the requirements established by the State of California Community Care Licensing. We understand that you are trusting us to care for your child, and we take this responsibility very seriously. We look forward to the opportunity to care for your child, while providing a positive influence in their life. </p> </div> <div class="contentBottom"><div></div></div> </div> </div> </body></html> Code (markup): Which is probably all it needs in terms of HTML, with the possible exception of print and handheld stylesheets, and maybe an extra container or two on the menu. Would validate if not for the flash (BFD) - It's set up to use my 'eight corners under one roof' image method for the content area, and would make use of the image replacement techniques Dan mentioned. Also would degrade usefully flash off, images off or flash off. My approach to coding a page is backwards from most - I write the HTML first with little regard for the final appearance, then I hang the few extra containers the appearance would need, and only THEN do I start slicing images and using CSS to bend the HTML to my will - the net result is pages that take anywhere from 25-50% less bandwidth than the 'design a .psd then toss containers and classes on everything like crazy' approach that is more common. If I have time later I'll toss together the CSS and images I'd use to implement that.