Hello,
I am trying to get these pictures at the bottom of this page to be inline and not jump to another line. The middle photo is an image map which may be part of the issue. It only seems to happen in IE or Mozilla. What is the best solution? I can do two pictures without an image map but I am not sure how.
Much of your problem is that your images plus the spacing between them is just too big for the container, check your math, it’s 4px too wide… BUT…
As a rule of thumb, image maps are a waste of code and accessibility hell (bad for a school) and the whole page is full of oddities in the code that are likely why I’m seeing four different layouts in five different browsers… You’re loading the HTML5 shim javascript in a XHTML doctype, you’ve got that spry menu nonsense that should have been put down like old yeller a decade ago, multiple div that don’t seem to be serving any purpose, heading tags around non-heading content, nonsensical heading orders, static dividers inlined in the markup, STRONG tags inside heading tags, STRONG on elements that shouldn’t be receiving emphasis, no media target on your stylesheet embed, static CSS in the markup, images for text with no graceful degradation… I could go on for a while about the markup; and CSS is only as good as the HTML it’s applied to.
As to your specific problem, I would have those links/images wrapped by a parent div, with classes on each anchor, as four separate images… putting the left-most and right-most ones first.
<div class="imageLinks">
<a href="/kids-work-examples.html" class="kidsWorkExamples">
<img
src="images/kidsWorkExamples.jpg"
alt="Learn More, See what our children can create and learn"
width="440" height="360"
/>
</a>
<a href="/philosophy.html" class="philosophy">
<img
src="images/philosophy.jpg"
alt="Multi-Cultural Learning"
width="256" height="360"
/>
</a>
<a href="/early-education" class="faceBook">
<img
src="images/likeUsOnfacebook.jpg"
alt="Like Us on Facebook"
width="256" height="180"
/>
</a>
<a href="/early-education" class="earlyEducation">
<img
src="images/earlyEducation.jpg"
alt="Early Education: 10 Reasons Why"
width="256" height="180"
/>
</a>
<!-- .imageLinks --></div>
Assuming there’s enough width to hold all of them, you just float the first one left, second one right, then let the other two automatically center. (I played with the numbers a bit)… Though to be brutally honest that’s what I like to call a “non-viable for web deployment” concepts layout-wise as it basically forces you into a fixed width layout.
Still, “as is” I’d really recommend cleaning up the markup and doing an all new CSS before even trying to move forward as there are multiple accessibility issues that REALLY should be addressed for a school… much less multiple elements that just don’t make any sense. I suspect you were choosing your heading tags NOT based in if it’s a heading or not, but just for their default appearance; which if you’re choosing your tags for their default appearance, you’re choosing the wrong tags.
There’s also a few oddities that I’m hoping are just placeholder text – like “Becoming” – becoming what?!? The other ones are at least transitive verbs; becoming is not… or the “did you know” – that doesn’t appear to be related to the text that follows and really isn’t a section heading… the paragraph you have after that appears to be the heading – for the list that follows.
So, I’d probably recode the entire page thus:
<!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=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
International Children's School - New Worlds for New Minds
</title>
</head><body>
<div id="pageWrapper">
<h1>
International Children's School
<small><span> - </span>Early Learning Academy</small>
<span></span>
</h1>
<div id="enterOurWorld">
<h2>* COME ENTER OUR WORLD *</h2>
<p>
Learning, discovering, caring, sharing and becoming are all part of what happens for the young children who enter our world.
<!-- Becoming WHAT??! -->
</p>
<!-- #enterOurWorld --></div>
<ul id="features">
<li class="languages">Lanugages</li>
<li class="art">Art</li>
<li class="music">Music</li>
<li class="culture">Culture</li>
<li class="math">Math</li>
<li class="science">Science</li>
<li class="writing">Handwriting</li>
</ul>
<ul id="mainMenu">
<li>
<a href="/programs">Programs</a>
<ul>
<li><a href="/programs">Regular Programs</a></li>
<li><a href="/programs">NEW! After School Program</a></li>
<li><a href="/programs">Summer Camp</a></li>
</ul>
</li><li>
<a href="/philosophy.html">Philosophy</a>
</li><li>
<a href="#">Enrollment</a>
<ul>
<li>
<a href="#">Enroll Now</a>
<ul>
<li><a href="/Enrollment.html"> Regular Programs </a></li>
<li><a href="/Enrollment.html"> After School Program</a></li>
</ul>
</li><li>
<a href="/activities-and-events-new.html">Calendar</a>
</li><li>
<a href="/daily-schedule.html">Daily Schedule</a>
</li>
</ul>
</li><li>
<a href="#">About Us</a>
<ul>
<li><a href="/testimonials.html">Testimonials</a></li>
<li><a href="/press.html">Press</a></li>
<li><a href="/parent-information.html">History</a></li>
</ul>
</li><li>
<a href="/contact-us-old.html">Contact Us</a>
</li>
</ul>
<div id="content">
<p class="standout">
We are a small preschool in <b>South Burlington, VT</b><br />
<small>that builds and focuses on <b>early academics</b> for young children</small>
</p>
<div id="banner">
<a href="/philosophy.html">
<img src="images/main_image.png"
alt="International Childrens School, Learn More"
width="816" height="300"
/>
</a>
</div>
<div class="sideBar">
<img
src="images/a-peak-inside2.png"
alt="International Childrens School, Each Child a Whole World"
width="288" height="432"
/>
<h2>* Each Child a Whole World *</h2>
<p>
We consider each child as an individual with unique needs. Our curriculum is designed and customized for the child's age. Patterned after many successful European schools, our programs include studies in French, Spanish, Piano, Art, Drama, Etiquette...
</p>
<a href="/philosophy.html" class="readMore">Read more...</a>
<!-- .sideBar --></div>
<div class="nextToSideBar">
<h2>
<small>EARLY EDUCATION FOR YOUR CHILD'S FUTURE.</small>
NEW WORLDS for NEW MINDS.
</h2>
<p>
We are a small preschool to Kindergarten center specializing in individualized early education for children ages three to six. We believe that the early years are vital to a child's future and that everyone deserves to receive the necessary education to grow.
</p><p>
The future of the world lies in the hand of our children. More than ever before, there is a great need for individuals to understand and appreciate other languages and cultures so that we can live and work productively in a multi-national society. Let's create a place where we can love our fellow brothers and sisters of the world. We take pride in our diverse classroom and teach students to appreciate the beauty of other cultures as well as our own.
</p>
<h2>QUALITY ACADEMICS AND LEARNING PROGRAMS</h2>
<ul>
<li>Spanish and French Programs</li>
<li>Reading, spelling, math, and science lessons</li>
<li>Extracurricular activities including dancing, drama, music, field trips, international cuisine, and art</li>
<li>Low teacher to student ratio</li>
<li>Music, art, and culture classes</li>
<li>Introducing Children to Artists, world music, and famous composers</li>
<li>The lost art of handwriting</li>
<li>Students "travel" every month to a different country as they learn about the world and it's people</li>
</ul>
<p>
To learn more about the International Children's School, read about Our Philosophy and Our Programs or see what a day at our school looks like.
</p>
<!-- .nextToSideBar --></div>
<div class="tuitionSpecial">
<img
src="images/fall-img.jpg"
alt="Fall Tuition Special"
width="200" height="95"
class="plate"
/>
<h2><a href="/tuition.html">Fall Tuition Special - Click here</a></h2>
<p>
Fall is beautiful in Vermont and with the changing foliage brings the joys of a new school year. Spots are available first come first serve. Call us today for more information or to schedule a personal tour!
</p>
<!-- .tuitionSpecial --></div>
<div class="imageLinks">
<a href="/kids-work-examples.html" class="kidsWorkExamples">
<img
src="images/kidsWorkExamples.jpg"
alt="Learn More, See what our children can create and learn"
width="440" height="360"
/>
</a>
<a href="/philosophy.html" class="philosophy">
<img
src="images/philosophy.jpg"
alt="Multi-Cultural Learning"
width="256" height="360"
/>
</a>
<a href="/early-education" class="faceBook">
<img
src="images/likeUsOnfacebook.jpg"
alt="Like Us on Facebook, Early Education"
width="256" height="180"
/>
</a>
<a href="/early-education" class="earlyEducation">
<img
src="images/earlyEducation.jpg"
alt="Early Education: 10 Reasons Why"
width="256" height="180"
/>
</a>
<!-- .imageLinks --></div>
<!-- #content --></div>
<div id="footer">
<h2>* International Children's School *</h2>
<div class="address">
1 Executive Drive, South Burlington, VT, 05403
<b>Phone:</b> 802-865-3344
<b>E-mail:</b>Schoolic@gmail.com
</div>
<ul>
<li><a href="/" class="active">Home</a></li>
<li><a href="/programs.html">Programs</a></li>
<li><a href="/Enrollment.html">Enrollment</a></li>
<li><a href="/philosophy.html">Philosophy</a></li>
<li><a href="/daily-schedule.html">Daily Schedule</a></li>
<li><a href="/dress-code.html">Dress Code</a></li>
<li><a href="/about-us.html">About Us</a></li>
<li class="last"><a href="/contact-us-old.html">Contact us</a></li>
</ul>
© 2008-2009 <a href="#">www.InternationalChildrensSchool.com</a>.
All rights reserved.<br />
Web Design: Stefan Faville Designs - Hosting:
<a href="http://www.eternitywebdev.com">ETERNITY WEB DEVELOPMENT</a>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
When I get back from lunch, I’ll re-master the images, make some tweaks and belt out how I’d have the CSS for that page done… and no, it won’t need any .js to handle the menu except for legacy IE via a behavior file.
… and here it is rewritten.
http://www.cutcodedown.com/for_others/stefn927/template.html
as with all my examples the directory:
http://www.cutcodedown.com/for_others/stefn927/
is wide open for easy access to the gooey bits and pieces. Tested working all the way back to IE 5.5 – though I took some design liberties… biggest of which being axing the MASSIVE alpha .png and images with the borders built into them to use CSS3 borders. This means IE 8 and lower users do not get the shadows on the border around the images – OH WELL. Can’t bend over the table to support people who won’t join us in this century forever. Page still works for them, all it loses is a minor visual effect – big deal. (just like it WORKS in 5.5, but the border on the images aren’t padded away from it… big deal).
Your original page was almost a megabyte in size with 10k of HTML and 11k of CSS in two stylesheets, and relyed upon 21k of javascript… my rewrite totals 228k (still 80k more than I’d like), and consists of 7k of HTML, 7k of CSS, and requries no javascript in anything newer than IE7, only sending a baby-sized 2.82k behavior file at IE6 and lower… from the CSS meaning we aren’t bloating out the markup with any of that conditional comment nonsense.
The biggest thing was getting the total widths of that image section correct and getting rid of the image map… and getting the text out of the images so there’s something meaningful to look at when images are off/unavailable/etc.
Due to the fixed width a number of elements did get declared in px – but the main content paragraphs and normal h2’s remain %/EM and anything declared in PX is at LEAST 16px in size – most of it 20px or more. You won’t hear many complaining about 20px or larger being ‘too small’.
Hope this helps – at the very least you can see how to float those images together from it.
Wow. Thanks a lot, I am learning a lot from you. One question - When I try your code and put it online a lot of the images that you did not directly put in but set as a background are not showing up… any idea why??
Scratch that - I figured it out. Can’t believe you re-wrote the whole home page that fast! You must have a lot of experience. Thank again